I've been struggling with this problem for days now. I'm working on a project that consists of two single-page Vue applications or a two-page application as some might call it. These apps have common functionalities which have been extracted into separate folders like /utilities, /state, and /mixins. Pretty standard setup.
src/
├─ apps/
│ ├─ admin/
│ │ ├─ main.js
│ │ ├─ app.vue <-- mixins imported
│ ├─ customer/
│ │ ├─ main.js
│ │ ├─ app.vue <-- mixins imported
├─ mixins/
├─ state/
├─ utilities/
├─ vue.config.js
I've configured webpack to alias these paths so that I can access them without using 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/'),
}
}
}
};
Everything was working fine for the customer app, I could access mixins using:
import { mixin } from '@mixins';
However, I've been facing serious issues with the admin app that I just can't seem to figure out. The vue-cli-service builds the project without any errors, but when I open it in the browser, I just see a blank screen with no errors in the console. Interestingly, I can access both @state and @utilities in the admin app without any problems. It's only the @mixins that is causing issues and I can't pinpoint the exact reason why.
As a sanity check, I copied each mixin to a new folder aliased @common and imported from there in the admin app to see if any specific file was causing the problem. Surprisingly, even after copying all mixins, the issue persisted. I even tried changing one @mixins import in the customer app to @common and the blank screen reappeared without any error. I even tried switching back to relative imports as a last resort - but the issue still persists. It seems like the project breaks down completely when both apps try to import from the mixins folder, which is strange considering it works fine if only one app does it?
I'm at my wit's end with this. Does anyone have any insights into what might be going wrong here? I'm completely lost.