0

I use npm to install modules in a virtual environment.like "npm install vue" my "node_modules" have @vue and vue package.json have

  "dependencies": {
    "vue": "^3.3.4"
  }

I tried

import '@vue'

but failed

Uncaught TypeError: Failed to resolve module specifier "@vue". Relative references must start with either "/", "./", or "../".

if I want use "@" to import module,what's the right way?

Hao Wu
  • 17,573
  • 6
  • 28
  • 60
little aya
  • 3
  • 1
  • 1
    The package name is `"vue"` so you have to `import {} from "vue"`. Why do you want to add an @? I don't see any good reason to do it. – JSON Derulo Aug 08 '23 at 06:09
  • sorry,this may be my mistake, I want to know how to import a module without using a path after I install it. I try import Vue from 'vue' but it failed – little aya Aug 08 '23 at 06:34
  • This is XY problem. If you have problems with `import Vue from 'vue'`, you need to ask about that. This totally depends on your project, so this needs https://stackoverflow.com/help/mcve – Estus Flask Aug 08 '23 at 10:32

1 Answers1

1

The @ symbol is often used in conjunction with a bundler like webpack to set up aliases, which are shortcuts to specific paths within your project. However it doesn't automatically map to packages within your node_modules directory.

In a Vue project, you typically import Vue like this:

import Vue from 'vue';

or, if you're using Vue 3:

import { createApp } from 'vue';

If you want to set up an alias that allows you to import modules with the @ symbol, you would have to configure that in your bundler (like webpack or Vite).

Here's an example of how you might set up an alias with webpack:

// webpack.config.js
module.exports = {
  // ...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // Alias '@' to the 'src' directory
    },
  },
};

Once that's set up, you can use the @ symbol to refer to anything inside the src directory. But this won't change how you import packages from node_modules, like Vue.

In your case, you don't need to set up an alias to import Vue; just use the standard import statement for the version of Vue you're using.

MaikeruDev
  • 1,075
  • 1
  • 19
  • thank for your answer. I tried import { createApp } from 'vue' but it failed: Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../". how should I do if I don't want use path – little aya Aug 08 '23 at 07:03
  • Hmm looks like an ES Module Error. You might want to try out and use a Module Bundler like Vite or Webpack. – MaikeruDev Aug 08 '23 at 07:28