set jsconfig.json in a VueJS project

Question

Vue js 2.6.X, create with Vue-Cli 4.5.X using vue create name

I've added a jsconfig.json inside the root folder

  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@/modules/*": ["./src/store/modules/*"]
    }
  },
  "exclude": ["node_modules", "dist"],
  "include": ["src/**/*"]
}

the @ alias works. I can do @/store/modules/...

the one I've added

@/modules/*

won't work

This dependency was not found:

* @/modules/... in in ./node_modules/cache-loader/dist/cjs...

any idea on how I can resolve this? I've checked several sources, none seem to take vue js and vue-cli setup into account....

I also think that @/* is a vue-cli default setup...so adding it maybe pointless as is

CharybdeBE · Accepted Answer · 2021-01-04 16:21:57Z

3

What have worked for me is also adding those alias in the webpack configuration in the vue.config.js

    configureWebpack: {
        resolve: {
            alias: {
                '@': path.resolve(__dirname, vueSrc),
                '@modules': path.resolve(__dirname, vueSrc + 'store/modules')
            },
            extensions: ['.js', '.vue', '.json']
        }
    }

Note also that i used directly @modules and not @/modules which would match both, try inverting the order in case something like first match is actevated, but i think it is longest match policy via webpack

answered Jan 4, 2021 at 16:21

CharybdeBE

1,8531 gold badge21 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

phil294 Over a year ago

This is the correct answer because Vue does not respect nor care for tsconfig.json and/or jsconfig.json. More specifically, one should always make sure that both TS compilerOptions.paths and webpack resolve.alias are in sync: One for IDE support, the other for the step build.

phil294 Over a year ago

...more specifically, this is even prettier with chainWebpack: chainWebpack: (config) => config.resolve.alias.set('@api', path.resolve(__dirname, '..', 'some', 'folder')). See also this GitHub issue

Jon Fleming · Accepted Answer · 2020-12-22 03:00:45Z

0

Try using

"@@/*":["./src/store/modules/*"]

and in your code use

import object from "@@/module_name";

will look for ./src/store/modules/module_name

answered Dec 22, 2020 at 3:00

Jon Fleming

11 bronze badge

Collectives™ on Stack Overflow

set jsconfig.json in a VueJS project

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related