Search code examples
typescriptvuejs2tsconfig

"paths" being ignored in tsconfig in my vue application

I have seen this many times, but for some reason my "paths" object is not working. It was set like this originally:

"paths": {
  "@/*": ["src/*"]
},

And I have updated it to this:

"paths": {
  "@/*": ["src/*"],
  "@graphql/*": ["src/_core/graphql/*"],
  "@components/*": ["src/_shared/components/*"],
  "@directives": ["src/_shared/directives"],
  "@models": ["src/_core/models"],
  "@logic/*": ["src/_shared/logic/*"]
},

When I try to run my application, it complains 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 this reference:

import TheFooter from "@components/layout/the-footer/the-footer.component.vue";

And the structure of my application is this:

enter image description here

Can anyone tell me why my path is not working?

I have found that a few people have this issue with vue: Vue-typescript error with webpack alias, path not found:

I tried to update my vue.config.js and add the aliases there to match my tsconfig like this:

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
        ["/"]
      ),
    ],
  };
},

But I still get the same error

Solution

  • I actually managed to solve this with a plugin:

    https://github.com/dividab/tsconfig-paths-webpack-plugin

    I updated my vue.config.js like this:

    chainWebpack: (config) => {
  config.resolve.alias.delete("@");
  config.resolve
    .plugin("tsconfig-paths")
    .use(require("tsconfig-paths-webpack-plugin"));
},

    And it all works now :)