3

I made a small test project to make sure I know how to use lodash in a browser environment:

/* File in directory: /ESModule/App.js */
// error message
import _ from 'lodash-es/lodash.js';
// relative path works
// import _ from '../node_modules/lodash-es/lodash.js';
const first = [1];
const second = [2];
const combined = _.union(first, second);

document.querySelector(`p`).textContent = combined;

It worked fine at the time, but now that I'm revisiting it a month later, I get this error: "Uncaught TypeError: Error resolving module specifier: lodash-es/union". I didn't touch the project at all since then, and the only change to my environment is that I updated NodeJS.

Not sure if this helps, but I have lodash-es in my package.json dependencies (installed locally), and I'm on Windows 10. I also have Webpack installed so I could test minifying the project in a separate directory, but it bothers me that I don't know why writing my import paths a certain way suddenly stopped working. I recently noticed that I'm having the same problem on other projects that are more complex, and I'd rather not have to use relative paths like this going forward:

import someModule from '../../../../node_modules/package-name/file.js';

When this should work fine

import someModule from 'package-name/file.js';

Any ideas on what could be causing this issue?

EDIT: I just realized that I also tested Lodash with individual imports

import union from 'lodash-es/union';
const first = [1];
const second = [2];
const combined = union(first, second);
document.querySelector(`p`).textContent = combined;

Somehow even this worked in the past, even without ending the path with .js. These ways all give me the same type of error:

import _ from 'lodash-es';
import _ from 'lodash-es/lodash';
import _ from 'lodash-es/lodash.js';
import union from 'lodash-es/union';
import union from 'lodash-es/union.js';
import {union} from 'lodash-es';

Uncaught TypeError: Error resolving module specifier: [specified path here]

import _ from '/node_modules/lodash-es/lodash.js';
import union from '../node_modules/lodash-es/union.js';
import union from '/node_modules/lodash-es/union.js';

Only a relative path or specific absolute path works now, so at least I know I probably have it installed correctly. As I mentioned above, all of the code used to work, but without changing it or adding to or removing from node_modules, now it doesn't.

One thing I forgot to mention was that I'm using the Live Server extension, and usually it defaults to port 5500 when I start it up, but lately it's been having trouble finding available ports and uses numbers like 5522 and 5909. Lately I've also been having problems downloading various files types for example I tried downloading a new NodeJS install file and I got this error:

C:/Users/DANIEL~1/AppData/Local/Temp/D1JF2y30.msi.part could not be saved, because the source file could not be read.

Maybe there's a problem with my machine that's causing a problem with my browsers and LS?

EDIT: I tried using lodash with NodeJS instead of testing in a browser with Live Server, and it works fine using just the package path const union = require('lodash/union');

EDIT: I just noticed that if I try to minify with Webpack, I can use the package path without any problem, and I don't need to end with .js. Maybe I wasn't clear before, but I was having issues with package paths without using Webpack. Was it weird that using import _ from 'lodash-es/lodash.js'; without Webpack even worked in the first place?

Daniel W. R. Hart
  • 77
  • 1
  • 10
  • Have you deleted your `node_modules` folder and reinstalled? If that doesn't work, then have you checked the lodash change log to see if they moved or rename their exports? – Daly Jul 30 '20 at 01:58
  • I tried deleting and reinstalling, but that didn't change anything. This still fails: ```import _ from 'lodash-es/lodash.js';``` But this still works: ```import _ from '../node_modules/lodash-es/lodash.js';``` – Daniel W. R. Hart Jul 30 '20 at 03:03
  • On the other hand ```import _ from '/node_modules/lodash-es/lodash.js';``` works, so I guess I don't need to worry about long relative paths – Daniel W. R. Hart Jul 30 '20 at 03:43

2 Answers2

1

Since you're importing the whole library you can just do:

import _ from 'lodash-es';

The slash notation is only needed when specifying a specific function to import. (This way is recommended since importing _ brings in hundreds of functions.)

import union 'lodash-es/union';

The best way is to only install one method and import that.

npm install --save lodash.union

import union from 'lodash-es.union';

See this thread for more details.

Daly
  • 787
  • 2
  • 12
  • 23
  • It should be import * as _ from 'lodash-es'; – huan feng Jul 30 '20 at 04:53
  • This method is only required for TypeScript/Angular, which wasn't mentioned in the question. – Daly Jul 30 '20 at 05:05
  • I see what you mean about saving space, but I think you meant ```import { union } from 'lodash-es';``` since ```'lodash-es/union'``` uses export default. I tested lodash with _ since I plan on using many function in future large projects, and it says on their page that many of the functions reuse the same code. – Daniel W. R. Hart Jul 30 '20 at 15:40
1

Import whole lodash as _:

TypeScript/Angular:

import * as _ from 'lodash-es';

...
const combined = _.union(first, second);

ES:

import _ from 'lodash-es';

Import method:

import {union} from 'lodash-es';

...
const combined = union(first, second);
huan feng
  • 7,307
  • 2
  • 32
  • 56
  • The ES approach is what I did originally, and just now I tried the 3rd way. I'm still getting ```Uncaught TypeError: Error resolving module specifier: lodash-es``` – Daniel W. R. Hart Jul 30 '20 at 15:13
  • What did you try? Which is the 3rd way? Have you tried with relative path for 'lodash-es'? – huan feng Jul 31 '20 at 02:02
  • I meant I tried ```import _ from 'lodash-es';``` and ```import {union} from 'lodash-es';```. I edited the question to point out that I can use the package path if I bundle with Webpack and use its output, but I'm confused because using just the package path used to work for me without Webpack, and how they suddenly don't. I've been looking into this and it looks like the real "problem" is that it never should have worked in the first place without a bundler. – Daniel W. R. Hart Jul 31 '20 at 19:33