Oops! We encountered an issue with this dependency being missing - TypeScript and Vue

Question

Oops! We encountered an issue with this dependency being missing - TypeScript and Vue

Just starting out with TS and Vue.

Encountering this error message while attempting to run 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

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

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

In tsconfig.json :

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

Switching the import statement like below resolves the error.

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

Do I need any additional configuration or package? My setup:

- vue 3.0.1
- tsc 3.0.3

typescript vue.js vuex

Answer 1

Answer №1

'@shop';

ought to be

'@/store';

Answer 2

'@shop';

ought to be

'@/store';

Answer 3

Answer №2

After some exploration, I managed to find a solution where I could easily import using '@store';

I made changes to the vue.config.js file by adding the following:

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'),
          },
        };
      }
    }

Answer 4

After some exploration, I managed to find a solution where I could easily import using '@store';

I made changes to the vue.config.js file by adding the following:

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'),
          },
        };
      }
    }

Oops! We encountered an issue with this dependency being missing - TypeScript and Vue

Answer №1

Answer №2

Similar questions

Unlocking the Power of Custom Fontawesome Icons in Ionic3 ActionSheet

TS2339: The 'contacts' property is not found within the 'Navigator' type

Tips for efficiently awaiting outcomes from numerous asynchronous procedures enclosed within a for loop?

How can I emphasize the React Material UI TextField "Cell" within a React Material UI Table?

What is the best way to delete markers from a leaflet map?

Is there a way for me to create a task filter based on its name?

retrieve a shared string from an array when toggled

Typescript erroneously raises an issue indicating that the condition is expected to always be

Entering the appropriate value into an object's property accurately

How can I integrate a timer into an Angular carousel feature?

Setting up electron with vuejs and tailwindcss: a step-by-step guide

The Map<> type does not seem to offer autofill suggestions for union arrays

Verifying the existence of an optional property on my component using Jest

Storing application state using rxjs observables in an Angular application

What Google Domain Verification APIs are needed for verifying domains in Pub/Sub?

`Angular RxJS vs Vue Reactivity: Best practices for managing UI updates that rely on timers`

Is it better to keep a lengthy array in the back-end or front-end storage?

Callback for dispatching a union type

Arranging arrays of various types in typescript

Building custom queries in ReactQuery with Typescript is a powerful tool for