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

Question

JavaScript

I’m trying to master Webpack and I don’t understand what is the reason for the error when importing / exporting the 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: '../'
  },
};