Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

async import('node-fetch') with v3.1.0 breaks in vite build for sveltejs

See original GitHub issue

Building a Svelte Kit app with Vite, and using the latest v3.1.0 of node-fetch, I receive this error:

[vite-plugin-svelte] ENOENT: no such file or directory, open 'node:http/package.json'
> ENOENT: no such file or directory, open 'node:http/package.json'
Error: ENOENT: no such file or directory, open 'node:http/package.json'
    at Object.openSync (node:fs:585:3)
    at Object.readFileSync (node:fs:453:35)
    at resolveViaPackageJsonSvelte (…vite@2.6.14/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:1148:39)

I have attempted the async ESM import as suggested in the pinned issue here. Here is my attempt:

	const fetch =
		typeof window !== 'undefined'
			? window.fetch
			: await import('node-fetch').then(mod => mod.default);

Reproduction

Steps to reproduce the behavior:

# 1. Build a new Svelte Kit app with Vite:
npm init svelte@next my-app # choose `skeleton app`, then say no to all prompts
# 2. 
cd my-app && npm i node-fetch
# 3.
touch src/routes/api.js && echo "async function send() {const fetch=await import('node-fetch').then(m => m.default);}" >> src/routes/api.js
# 4.
npm run build

Expected behavior

When I revert to 3.0.0, the app builds fine.

Screenshots

Your Environment

ϕ 00:36:32 ⚭ $ npx envinfo --system --binaries --browsers --npmPackages "{node-fetch,svelte,@sveltejs/*,vite}"

  System:
    OS: macOS 12.0.1
    CPU: (8) arm64 Apple M1
    Memory: 107.44 MB / 16.00 GB
    Shell: 3.3.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    Yarn: 1.22.10 - ~/.asdf/shims/yarn
    npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
  Browsers:
    Chrome: 96.0.4664.93
    Chrome Canary: 98.0.4751.0
    Firefox: 92.0.1
    Safari: 15.1
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.3 
    @sveltejs/kit: next => 1.0.0-next.201 
    node-fetch: ^3.1.0 => 3.1.0 
    svelte: ^3.44.0 => 3.44.2

Additional context

Many thanks for your labors and attentions!

Issue Analytics

State:
Created 2 years ago
Comments:6 (2 by maintainers)

Top GitHub Comments

3reactions

krrycommented, Dec 9, 2021

@krry did you try the 2.7.0 beta of Vite? Did it work? ☺️

Yes, like a charm.

1reaction

jimmywartingcommented, Dec 7, 2021

if v3.0.0 works but 3.1.0 don’t then i suspect it might be b/c of the node: prefix/protocol we added and that PR seems to fix it.

edit looking at it more closely i see that it tries to load node:http/package.json, node:http is not a package… but a builtin module. so it should really try to load node:http

Top Results From Across the Web

Help with lazy loading routes in Vue Router 3 with Vite - Reddit

I was wondering if the dynamic import syntax is still the same as Webpack's? Does something like () => import('@/pages/Page.vue') not work out ......

error loading preloads: failed to fetch dynamically imported ...

Open remote vs code with jupyter extension. Create cell with plotly FigureWidget, execute it. Expected result: Figure widget is displayed (as in jupter...

Connect your content to SvelteKit - Sanity.io

You can also download the code and run it locally or import it to your ... \u002F@sveltejs\u002Fadapter-node\u002F-\u002Fadapter-node-1.0.0-next.73.tgz\",\n ...

Full Stack SvelteKit For Beginners - Joy of Code

Right now we're in the era of meta-frameworks and tackling other problems around frontend such as tooling instead of reinventing how we build...