Import from node_modules not recognized in es6 modules in browser

问题

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.

回答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'

回答2:

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

来源：https://stackoverflow.com/questions/52558777/import-from-node-modules-not-recognized-in-es6-modules-in-browser