0

Hi i'm getting this error

Uncaught SyntaxError: Cannot use import statement outside a module

Expection: i'm ready to use any library or npm package if it solves the just import problem , any extension file not just .vue only

despite of installing webpack "webpack": "^5.73.0"

Here is how my project structure will look like

/project_folder
  package.json
  index.js
  webpack.config.js
  components/
             HelloWorld.vue

package.json

 {
  "type": "module",
  "main": "index.js",
  "dependencies": {
    "axios": "^0.21.0",
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "webpack": "^5.73.0"
  }
}

webpack.config.js

module.exports = {
    entry: './index.js',
};

index.js

 import HelloWorld from './components/HelloWorld.vue';

 console.log(HelloWorld);

Note: this type of project structure design is required for our plugin component, project structure design cannot be changed.

EaBengaluru
  • 131
  • 2
  • 17
  • 59
  • Maybe [this](https://webpack.js.org/guides/ecma-script-modules/) helps? In short: add `"type": "module"` to your `package.json`. – MauriceNino Jun 14 '22 at 12:05
  • Possible duplicate? [Use Webpack 5 to build an ES module bundle, and consume that bundle in a Node.js ES module](https://stackoverflow.com/questions/68913996/use-webpack-5-to-build-an-es-module-bundle-and-consume-that-bundle-in-a-node-js) – MauriceNino Jun 14 '22 at 12:07
  • @MauriceNino add same error after adding too (ran `$npm rebuild`). so i will edit my question with this addition. – EaBengaluru Jun 14 '22 at 12:08

0 Answers0