SSR Externals False Positive on Windows

[rturnq]

Describe the bug

Part of the heuristic for determining if a dependency should be externalized for SSR is to compare the "resolved ESM entry point and its default Node entry point". That comparison happens here:

vite/packages/vite/src/node/ssr/ssrExternal.ts

Line 67 in 5095e04

if (entry !== requireEntry) {

The path requireEntry comes from require.resolve which is not normalized. On Windows the path entry (which is normalized) has POSIX path separators and requireEntry has Windows path separators. This leads to a false positive, thinking the package has a cjs distribution which then fails at runtime.

Simply using Vite's path normalization utility on requireEntry also doesn't quite work as, at least in my case, the paths end up with slightly different casing: "C:\..." vs "c:\..."

Reproduction

https://github.com/rturnq/solid-hackernews

npm i
npm run dev

System Info

• vite version: 2.0.5
• Operating System: Windows 10.0.18363
• Node version: 15.4.0
• Package manager (npm/yarn/pnpm) and version: npm 7.0.15

Logs (Optional if provided reproduction)

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\Some\File\Path\solid-hackernews\node_modules\solid-app-router\dist\index.js
require() of ES modules is not supported.
require() of C:\Some\File\Path\solid-hackernews\node_modules\solid-app-router\dist\index.js from C:\Some\File\Path\solid-hackernews\node_modules\vite\dist\node\chunks\dep-e0f09032.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 index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\Some\File\Path\solid-hackernews\node_modules\solid-app-router\package.json.

    at new NodeError (node:internal/errors:278:15)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1125:13)
    at Module.load (node:internal/modules/cjs/loader:973:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:997:19)
    at n (C:\Some\File\Path\solid-hackernews\node_modules\jiti\dist\v8cache.js:2:2349)
    at nodeRequire (C:\Some\File\Path\solid-hackernews\node_modules\vite\dist\node\chunks\dep-e0f09032.js:68055:17)
    at ssrImport (C:\Some\File\Path\solid-hackernews\node_modules\vite\dist\node\chunks\dep-e0f09032.js:68013:20)
    at eval (/src/components/nav.tsx:15:31)
    at instantiateModule (C:\Some\File\Path\solid-hackernews\node_modules\vite\dist\node\chunks\dep-e0f09032.js:68041:166)

[frederikhors]

From sveltejs/kit#1549:

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.

[frederikhors]

@yyx990803 @Shinigami92 what is the code I can inspect to understand what is going on?

[rhengles]

I'm getting this error by simply trying to make an import to an (ESM) package I wrote from vite.config.js.

> vite

failed to load config from /home/rhengles/github/vite-test-app/vite.config.ts
error when starting dev server:
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/rhengles/github/vite-plugin-vue-mfc/index.mjs
    at Module.load (internal/modules/cjs/loader.js:861:11)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/home/rhengles/github/vite-test-app/vite.config.ts:31:45)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Object.require.extensions.<computed> [as .ts] (/home/rhengles/github/vite-test-app/node_modules/vite/dist/node/chunks/dep-6b5f3ba8.js:70305:20)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)

[raythurnvoid]

I'm getting this error on svelte-kit: sveltejs/kit#928

The package's package.json file:

"type": "module",
"exports": {
	".": {
		"import": "./index.js",
		"require": "./cjs/index.js"
	}
},

As a workaround i got it to work by adding this to vite config:

ssr: {
	noExternal: ["@raythurnevoid/svelte-hooks"],
}

[callmeberzerker]

Having the same issue on Windows with to-vfile

[ar4hc]

just for googlers:

for svelte/kit (next153) and layerrcake with d3 graphics library i had similar error until i added the d3 packages to the svette.config.js as mentioned above :

const config = {
	kit: {
		vite: {
			ssr: {
                             noExternal: ["d3-scale", "d3-array", "d3-time-format", "d3-time", "d3-shape"]

But i have noi clue what the sideeffects of that are... :/

EDIT:
Also see a related Issue for layercake