I am a newbie to module bundlers and following this video to learn how to use Webpack: https://www.youtube.com/watch?v=5IG4UmULyoA

This is my incredibly simple package.json file:

{
  "name": "t1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "lodash": "^4.17.21"  
  },
  "devDependencies": {
    "webpack": "^5.69.1",
    "webpack-cli": "^4.9.2"
  }
}

I installed lodash and imported its camelCase function as followed in my src/index.js:

import { camelCase } from 'lodash';
console.log(camelCase('hello world'));

I built it by npm run build and a bundled file in the dist/main.js is created, just like in the video that I linked above.

I embedded the bundled dist/main.js script into my index.html and it throws Uncaught SyntaxError: Invalid or unexpected token in main.js line 2.

Tested in different browsers: Opera, Chrome and Edge but no difference and since bundled dist/main.js looks very complicated and minified, I can't understand what is wrong with it.