import _ from 'lodash-es/lodash.js' used to work. Now it doesn't but I didn't change anything

Question

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?

Answer 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.

Answer 2

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);