Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

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

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.

about 4 years ago · Santiago Trujillo
1 answers
Answer question

0

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.

about 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!