Despite seeing this issue multiple times, I am facing a problem with my "paths" object not working as expected. Originally, it was set up like this:
"paths": {
"@/*": ["src/*"]
},
I made updates to it and now it looks like this:
"paths": {
"@/*": ["src/*"],
"@graphql/*": ["src/_core/graphql/*"],
"@components/*": ["src/_shared/components/*"],
"@directives": ["src/_shared/directives"],
"@models": ["src/_core/models"],
"@logic/*": ["src/_shared/logic/*"]
},
However, when I attempt to run my application, I encounter an error mentioning that dependencies were not found:
- @components/layout/the-footer/the-footer.component.vue in ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/eslint-loader??ref--13-0!./src/app.component.ts?vue&type=script&lang=ts&
In my app.component.ts file, I have the following import statement:
import TheFooter from "@components/layout/the-footer/the-footer.component.vue";
The application structure is depicted below:
Any idea why my path isn't functioning correctly?
After some research, I discovered that others have experienced a similar issue with Vue: Vue-typescript error with webpack alias, path not found:
I attempted to make changes to my vue.config.js by adding aliases that mirror those in my tsconfig, like so:
configureWebpack: () => {
if (process.env.NODE_ENV !== "production") return;
return {
resolve: {
alias: {
"@": path.resolve(__dirname, "src"),
"@graphql/*": path.resolve(__dirname, "src/_core/graphql/*"),
"@components/*": path.resolve(__dirname, "src/_shared/components/*"),
"@directives": path.resolve(__dirname, "src/_shared/directives"),
"@models": path.resolve(__dirname, "src/_core/models"),
"@logic/*": path.resolve(__dirname, "src/_shared/logic/*"),
},
},
plugins: [
new PrerenderSpaPlugin(
// Absolute path to compiled SPA
path.resolve(__dirname, "dist"),
// List of routes to prerender
["/"]
),
],
};
},
Unfortunately, I am still encountering the same error.