20

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.

dRoyson
  • 1,466
  • 3
  • 14
  • 25
  • Why are you using a node module instead of a CDN distribution? – Robert Mennell Sep 28 '18 at 16:13
  • 1
    @RobertMennell , lodash is not the only library I need to use. I have other library dependencies which I doubt I would get on a CDN distribution. I even got a few internal libraries. – dRoyson Sep 28 '18 at 16:17
  • internal libraries should be served by you, yes, but if it's got a CDN you should use a CDN as it offloads and keeps you from exposing node_modules. – Robert Mennell Sep 28 '18 at 16:18
  • @RobertMennell Is there a link that would help find all/most of the JS libraries hosted on CDN? That would be helpful. If not, I can revert to manual search on Google. – dRoyson Sep 28 '18 at 16:20
  • 1
    https://cdnjs.com/libraries should have a lot of them, but other CDNs do exist and there are MANY lists – Robert Mennell Sep 28 '18 at 16:22
  • @RobertMennell thanks :) – dRoyson Sep 28 '18 at 16:28

6 Answers6

12

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'
Steve Vaughan
  • 2,163
  • 13
  • 18
  • I tried your suggestion, but it did not work. Using `import _each from '../node_modules/lodash/each'` gave a 404 and using `import _each from '../node_modules/lodash/each.js'` resulted in following error: SyntaxError: The requested module '../node_modules/lodash/each.js' does not provide an export named 'default' – dRoyson Sep 28 '18 at 16:03
  • Even tried this `import * as _ from "../node_modules/lodash/lodash.js"` but got TypeError: _.each is not a function. On `console.log( _ )`, I get an object of Module on the console. – dRoyson Sep 28 '18 at 16:05
  • shouldn't your import statement be `import _ from "../node_modules/lodash/lodash.js"`? – Robert Mennell Sep 28 '18 at 16:12
  • 2
    @RobertMennell , I tried using your suggestion for importing lodash but that gives me the following error: "SyntaxError: The requested module '../node_modules/lodash/lodash.js' does not provide an export named 'default'" – dRoyson Sep 29 '18 at 10:42
8

As of 2021, please consider the following statement by Márton Salomváry (Jan 2018):

Unfortunately even most libraries authored or published in ES6 module format will not work because they target transpilers and rely on the Node.js ecosystem. Why is that a problem? Using bare module paths like import _ from 'lodash' is currently invalid, browsers don’t know what to do with them.

And also the statement by Jake Archibald (May 2017):

"Bare" import specifiers aren't currently supported.

Valid module specifiers must match one of the following:

  1. A full non-relative URL.
  2. Starts with /.
  3. Starts with ./.
  4. Starts with ../.

And javascript.info:

In the browser, import must get either a relative or absolute URL. Modules without any path are called “bare” modules. Such modules are not allowed in import.

Certain environments, like Node.js or bundle tools allow bare modules, without any path, as they have their own ways for finding modules and hooks to fine-tune them. But browsers do not support bare modules yet.

Bundlers facilitate the use of "Bare Imports" which is not supported by the browser yet. Unless you bundle your code, I recommend using the solution proposed by @Asler. Besides, a lot of work is currently being done to study the implementation of "Bare Imports" in the browser, please follow this link if you want to monitor the overall progress.

Robin
  • 143
  • 3
  • 7
2

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

Tan
  • 342
  • 3
  • 11
2

Try module lodash-es

import each from '../node_modules/lodash-es/each.js'
Asler
  • 79
  • 1
  • 3
0

If you are trying to import css file, make sure to mention .css in import statement.

Yuvraj Patil
  • 7,944
  • 5
  • 56
  • 56
0

you can add your node_modules to the public dirs, so you can easily shorten your importing syntax from ../../../../node_modules/my-package into /my-package

also, you need to specify the full path including the file and the extension

import mod from "/my-package/file.mjs"
Sh eldeeb
  • 1,589
  • 3
  • 18
  • 41