Import from node_modules not recognized in es6 modules in browser

Question

I'm trying to use lodash in my web application. I have installed lodash using npm in my local project.

I plan on using the ES6 modules in my code.

Here is my main.js file:

import * as _ from "lodash";

_.each([1, 2, 3, 4], (i) => {
    console.log('index each ' + i);
});

And I have included it in index.html as:

<script src="js/main.js", type="module"></script>

But I get the following error in the browser console.

Uncaught TypeError: Failed to resolve module specifier "lodash". Relative references must start with either "/", "./", or "../".

Note: I do not wish to use any bundling tool.

Answer 1

If you don't wish to use any bundling tools, you will need to provide a path to the lodash folder within node_modules, relative to the JavaScript file that you have the import statement in.

If you do not wish to use a bundler, it would also be worthwhile importing from the specific file, the function you need. For example:

import _each from '../node_modules/lodash/each'

Answer 2

Eventually you can't use JS modules on browser like that. These modules are for webpack or other bundler.