Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SSR Externals False Positive on Windows #2393

Closed
rturnq opened this issue Mar 5, 2021 · 6 comments
Closed

SSR Externals False Positive on Windows #2393

rturnq opened this issue Mar 5, 2021 · 6 comments
Labels
feat: ssr p4-important Violate documented behavior or significantly improves performance (priority) windows only

Comments

@rturnq
Copy link

rturnq commented Mar 5, 2021

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:

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
Copy link

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
Copy link

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

@GrygrFlzr GrygrFlzr added p4-important Violate documented behavior or significantly improves performance (priority) and removed pending triage labels May 26, 2021
@rhengles
Copy link

rhengles commented May 30, 2021

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
Copy link
Contributor

raythurnvoid commented Jun 18, 2021

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

image

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
Copy link

Having the same issue on Windows with to-vfile

@ar4hc
Copy link

ar4hc commented Aug 19, 2021

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
feat: ssr p4-important Violate documented behavior or significantly improves performance (priority) windows only
Projects
None yet
Development

No branches or pull requests

9 participants