Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: lodash-es\lodash.js

[frederikhors]

Describe the bug
I'm trying to use lodash-es like this:

import { debounce } from 'lodash-es'

//...debounce using it

but I'm getting the below error.

Logs

1:37:22 AM [vite] Error when evaluating SSR module /src/routes/players/_cmp/SearchBar.svelte:
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\kit\node_modules\lodash-es\lodash.js
require() of ES modules is not supported.
require() of C:\kit\node_modules\lodash-es\lodash.js from C:\kit\node_modules\vite\dist\node\chunks\dep-e9a16784.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename lodash.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\kit\node_modules\lodash-es\package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1085:13)
    at Module.load (internal/modules/cjs/loader.js:933:32)
    at Function.Module._load (internal/modules/cjs/loader.js:774:14)
    at Module.require (internal/modules/cjs/loader.js:957:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at nodeRequire (C:\kit\node_modules\vite\dist\node\chunks\dep-e9a16784.js:68211:17)
    at ssrImport (C:\kit\node_modules\vite\dist\node\chunks\dep-e9a16784.js:68164:20)
    at eval (/src/routes/players/_cmp/SearchBar.svelte:7:31)
    at instantiateModule (C:\kit\node_modules\vite\dist\node\chunks\dep-e9a16784.js:68197:166)

To Reproduce
Use lodash-es in a new svelte-kit skeleton (with init).

Information about your SvelteKit Installation:

Diagnostics

• The output of npx envinfo --system --npmPackages svelte,@sveltejs/kit,vite --binaries --browsers:

  System:
  OS: Windows 10 10.0.19042
  Binaries:
  Node: 14.17.0 - C:\Program Files\nodejs\node.EXE
  npm: 7.14.0 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
  @sveltejs/kit: 1.0.0-next.109 => 1.0.0-next.109
  svelte: 3.38.2 => 3.38.2
  vite: 2.3.3 => 2.3.3

Severity
This is really annoying.

[benmccann]

Closing as duplicate of vitejs/vite#2393

[trecloux]

@benmccann I am facing the same issue, but on a linux box, not really sure that it is a Windows issue.

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/tom/work/board/node_modules/lodash-es/lodash.js
require() of ES modules is not supported.
require() of /home/tom/work/board/node_modules/lodash-es/lodash.js from /home/tom/work/board/node_modules/vite/dist/node/chunks/dep-6b5f3ba8.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename lodash.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/tom/work/board/node_modules/lodash-es/package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1080:13)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at nodeRequire (/home/tom/work/board/node_modules/vite/dist/node/chunks/dep-6b5f3ba8.js:68236:17)
    at ssrImport (/home/tom/work/board/node_modules/vite/dist/node/chunks/dep-6b5f3ba8.js:68189:20)
    at eval (/src/lib/components/AsyncDataTable.svelte:10:31)
    at instantiateModule (/home/tom/work/board/node_modules/vite/dist/node/chunks/dep-6b5f3ba8.js:68222:166)``` 

[trecloux]

I found a workaround by moving lodash-es to dependencies instead of devDepencies

[benmccann]

dependencies vs devDependencies shouldn't typically matter. You might have noExternal left over in your project from one you setup awhile ago before the template changed: https://kit.svelte.dev/faq#packages

[frederikhors]

I can confirm dependencies vs devDependencies doesn't fix my problem with lodash-es. I'm still waiting for vite to fix this on Windows.

My svelte.config.js:

import preprocess from 'svelte-preprocess';
import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: preprocess(),

	kit: {
		adapter: adapter({
			fallback: '200.html'
		}),

		vite: {
			optimizeDeps: {
				include: ['broadcast-channel']
			},

			server: {
				proxy: {
					'/api': 'http://localhost:3000/',
				}
			}
		},

		ssr: false,

		appDir: 'custom'
	}
};

export default config;

[techniq]

@frederikhors I've had issues with lodash-es and have worked around the issue by sticking with version 4.17.15 instead of the latest 4.17.21 in the interim. I believe esm compatibility is a known issue with lodash.

I've also had issues with d3-format and have stayed on 2.0.0 instead of 3.0.0

[frederikhors]

@frederikhors I've had issues with lodash-es and have worked around the issue by sticking with version 4.17.15 instead of the latest 4.17.21 in the interim. I believe esm compatibility is a known issue with lodash.

I've also had issues with d3-format and have stayed on 2.0.0 instead of 3.0.0

Wow. All this is scary!

For now I'm using import debounce from 'lodash/debounce.js' instead of import { debounce } from 'lodash-es'.