Webpack error on lodash load using externals config

Question

i am trying to modify a current project using webpack. On my scripts i am using lodash library but i have also scripts that are not written on ES6 so i load lodash globally using a normal script tag. Based on the webpack documentation i have added the below config on the webpack (https://webpack.js.org/configuration/externals/).

lodash : {
        commonjs: 'lodash',
        amd: 'lodash',
        root: '_' // indicates global variable
      },

I compile the code using babel without any problem but when the actual code is executed i receive the below error "TypeError: Cannot read property 'forEach' of undefined"

If i remove the import _ from "lodash"; statement from the file then the issue is resolved and script is working as expected as _ is on global.

But this was expected to work also without adding the externals correct ? According with the webpack example for jquery

module.exports = {
  //...
  externals: {
    jquery: 'jQuery'
  }
};

The below code will be unchanged

import $ from 'jquery';
$('.my-element').animate(/* ... */);

In my case why is not working ? Any suggestions ? ideas?

Answer 1

I think i found a solution, after i read the documentation again and again i noticed that message which is also on yellow border

An object with { root, amd, commonjs, ... } is only allowed for libraryTarget: 'umd'. It's not allowed for other library targets.

So i have changed my config from

lodash : {
      commonjs: 'lodash',
      amd: 'lodash',
      root: '_' // indicates global variable
    }

to

lodash: '_'

and issue solved, now is working as expected. It will be great of course if i understand why this was an issue