This dependency was not found - TypeScript, Vue

Question

I am new to TS and Vue.

Getting following error when trying to do vue-cli-service serve:

This dependency was not found:

  * @store in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/ts-loader??ref--12-1!./node_modules/vue-loader/lib??vue-loader-opt
ions!./src/components/HelloWorld.vue?vue&type=script&lang=ts&

To install it, you can run: npm install --save @store

And in ./src/components/HelloWorld.vue :

import { RootState, storeBuilder, CustomerStore } from '@store';

And in tsconfig.json :

"baseUrl": "./src",
"paths": {
  "@/*": ["src/*"],
  "store": ["./store/index.ts"], 

However when I change import to following then the error goes away.

import { RootState, storeBuilder, CustomerStore } from './../store';

Do I need any extra config or package? My stack:

- vue 3.0.1
- tsc 3.0.3

Solution 1

'@store';

should be

'@/store';

Solution 2

Ok found solution...and can import via '@store';

Had to edit: vue.config.js and add:

const path = require('path');
const ROOT = path.resolve(__dirname);

function root(args) {
  args = Array.prototype.slice.call(arguments, 0);
  return path.join.apply(path, [ROOT].concat(args));
}

module.exports = {
      configureWebpack: config => {
        config.resolve = {
          extensions: ['.js', '.ts'],
          alias: {
            '@store': root('src/store/index.ts'),
          },
        };
      }
    }

Comments

[bogumbiker]

thanks, funny as with '@/store' defined in tsconfig.json and import { storeBuilder } from '@/store'; the type checking and linting works. However now getting an error in js console in browser: 'Uncaught ReferenceError: storeBuilder is not defined'. I think there is something with webpack and how it loads modules? Anyway what is the difference between '@store' and '@/store'?

[Linus Borg]

The difference is that the former creates 'srcstore' while the latter creates 'src/store'.