Error exporting / importing webpack module. What is the reason?

  • 0
    I'm trying to master Webpack and don't understand what is the reason for the error when importing / exporting a module.
    I did everything as in the example on the site, but I get this:
    Uncaught SyntaxError: Cannot use import statement outside a module
    main.js
    import bar from './bar';
    bar();

    bar.js
    export default function bar() {
        console.log('h1');
      }

    package.json
    {
      "name": "webpack-tutorial",
      "version": "1.0.0",
      "description": "",
      "main": "src/scripts/main.js",
      "scripts": {
        "build": "webpack",
        "start": "webpack serve"  
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "webpack": "^5.4.0",
        "webpack-cli": "^4.2.0",
        "webpack-dev-server": "^3.11.0"
      }
    }

    webpack.config.js
    const path = require('path');
    const webpack = require('webpack');
    
    module.exports = {  
      context: path.resolve(__dirname, 'src'),
      entry: {
        app: [
          './scripts/main.js'
        ],
      },
    
      mode: 'development',
    
      devServer: {
        contentBase: path.join(__dirname, './src'),
        port: 3000,
        open: true,
      },
      output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'scripts/[name].js', 
        publicPath: '../'
      },
    };
    JavaScript Ella Edwards, May 13, 2019

  • 0 Answers
Your Answer
To place the code, please use CodePen or similar tool. Thanks you!