Vue 2 + Webpack common imports work for one app but fail for another

Question

This issue has been making me pull my hair out for days. I have been working on a project which is made up of two single-page Vue applications - a two-page application if you like. These applications share some common functionality so this has been extrapolated out into /utilities , /state and /mixins folders. Fairly standard stuff.

src/
├─ apps/
│  ├─ admin/
│  │  ├─ main.js
│  │  ├─ app.vue      <-- mixins imported
│  ├─ customer/
│  │  ├─ main.js
│  │  ├─ app.vue      <-- mixins imported
├─ mixins/
├─ state/
├─ utilities/
├─ vue.config.js

I have used webpack to alias these paths so that I can access them without nasty relative paths.

// vue.config.js
const path = require('path');

module.exports = {
  // Put this in the ASP.NET Core directory
  outputDir: "../wwwroot/app",
  pages: {
    admin: "src/apps/admin/main.js",
    customer: "src/apps/customer/main.js",
  },
  configureWebpack: {
    resolve: {
      alias: {
        '@app': path.resolve(__dirname, 'src/'),
        '@customer': path.resolve(__dirname, 'src/apps/customer/'),
        '@admin': path.resolve(__dirname, 'src/apps/admin/'),
        '@mixins': path.resolve(__dirname, 'src/mixins/'),
        '@utilities': path.resolve(__dirname, 'src/utilities/'),
      }
    }
  }
};

This all worked fine for the customer app, accessing mixin code via:

import { mixin } from '@mixins';

But the admin app has been causing me serious issues which I cannot seem to resolve. The vue-cli-service successfully builds the project without any errors, but when I load up the browser I get a blank screen. No console error, nothing. The worst part is I can access both the aliased @state and @utilities in the admin app without any problems. It's only @mixins that causes me any issues and I can't for the life of me figure out why.

For a sanity check, I copied each individual mixin over into a new folder aliased @common and imported from that on the admin app to try and find the file that might be causing the issue. I copied every single one across and it never broke. I then switched one @mixins import in the customer app to @common and the white screen with no error reappearred. I even tried reverting back to relative imports as a hail mary - but the issue remains. It's as if the whole project just craps itself if both apps want to import from the mixins folder even though it's fine with it if only one does?

I am at the end of my tether with this. Does anyone have any idea what might be happening here because I'm totally lost.

Answer 1

If anyone ends up here, make sure that your html includes the webpacked chunk-common.js as a script. I had both the apps individual js files included and the chunk-vendors.js but, when including the mixins in both apps, the whole @mixins folder was extracted out into common where it was no longer available. Surprisingly, the failure was completely silent where I would usually expect a browser console error of some kind.

The source of this problem was a little obfuscated because some of the other folders with shared scripts ( @utilities and @state ) continued to work despite the missing common script. I can't explain that other than webpack didn't extract those out into common because they were too small perhaps? Anyway, make sure to check your webpack basics. Hope this helps at least one person because it was just a time sink for me.