devalue cause crash on Netlify after update

[wentallout]

Describe the bug

I updated some sveltekit-related npm packages then build successfully on local/dev but when deployed it just crashed on Netlify

Error - No "exports" main defined in /var/task/node_modules/devalue/package.json

Reproduction

package.json

{
	"name": "portfolio",
	"version": "0.0.1",
	"scripts": {
		"dev": "vite dev",
		"build": "vite build",
		"preview": "vite preview",
		"check": "svelte-check --tsconfig ./jsconfig.json",
		"check:watch": "svelte-check --tsconfig ./jsconfig.json --watch",
		"test": "playwright test",
		"lint": "prettier --check . && eslint .",
		"format": "prettier --write .",
		"ngrok": "ngrok http 4173"
	},
	"devDependencies": {
		"@iconify-json/ph": "^1.1.2",
		"@playwright/test": "^1.25.0",
		"@supabase/supabase-js": "^1.35.6",
		"@sveltejs/adapter-auto": "next",
		"@sveltejs/adapter-netlify": "^1.0.0-next.75",
		"@sveltejs/kit": "next",
		"atropos": "^1.0.2",
		"eslint": "^8.16.0",
		"eslint-config-prettier": "^8.3.0",
		"eslint-plugin-svelte3": "^4.0.0",
		"normalize.css": "^8.0.1",
		"nprogress": "^0.2.0",
		"prettier": "^2.6.2",
		"prettier-plugin-svelte": "^2.7.0",
		"svelte": "^3.49.0",
		"svelte-check": "^2.8.0",
		"typescript": "^4.7.2",
		"unplugin-icons": "^0.14.8",
		"vite": "^3.1.0-beta.1",
		"vite-imagetools": "^4.0.5"
	},
	"type": "module"
}

Logs

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in /var/task/node_modules/devalue/package.json
    at new NodeError (node:internal/errors:372:5)
    at throwExportsNotFound (node:internal/modules/esm/resolve:472:9)
    at packageExportsResolve (node:internal/modules/esm/resolve:693:7)
    at resolveExports (node:internal/modules/cjs/loader:482:36)
    at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/var/task/.netlify/server/index.js:49:22)

System Info

Binaries:
    Node: 17.9.0 - D:\nodejs\node.EXE
    npm: 8.5.3 - D:\nodejs\npm.CMD
  Browsers:
    Chrome: 104.0.5112.102
    Edge: Spartan (44.19041.1023.0), Chromium (104.0.1293.70)
    Internet Explorer: 11.0.19041.1202
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.70
    @sveltejs/adapter-netlify: ^1.0.0-next.75 => 1.0.0-next.75
    @sveltejs/kit: next => 1.0.0-next.456
    svelte: ^3.49.0 => 3.49.0
    vite: ^3.1.0-beta.1 => 3.1.0-beta.1

Severity

blocking all usage of SvelteKit

Additional Information

I did look at some reports on discord and changed my vite version to "vite": "^3.1.0-beta.1",

[kiosion]

+1, after a @sveltejs/kit upgrade from 1.0.0-next.445 1.0.0-next.449 production builds on Netlify crash on load with

Error - No "exports" main defined in /var/task/node_modules/devalue/package.json

Edit: Seems to be caused by #6318 bumping devalue's version to 3.1.2

[MajorBreakfast]

Just to visualize the error :)

[rowantrollope]

Having the same issue on vercel

[MajorBreakfast]

Looking at the package.json of devalue, it does not have a main field. My (unconfirmed) guess is that this is the issue

https://github.com/Rich-Harris/devalue/blob/master/package.json

Edit: tried patching the package via a diff applied using patch-package. it didn't yield results unfortunately

[demetrius-mp]

same here when deploying to netlify.
i tried deploying to vercel, but i had the following error

> Using @sveltejs/adapter-vercel
--
15:29:07.600 | error during build:
15:29:07.600 | Error: Failed to parse /vercel/path0/node_modules/@mapbox/node-pre-gyp/lib/util/nw-pre-gyp/index.html as script:
15:29:07.600 | Unexpected token (1:0)
15:29:07.600 | at Object.analyze [as default] (/vercel/path0/node_modules/@vercel/nft/out/analyze.js:226:30)
15:29:07.601 | at Job.emitDependency (/vercel/path0/node_modules/@vercel/nft/out/node-file-trace.js:304:52)
15:29:07.601 | at async /vercel/path0/node_modules/@vercel/nft/out/node-file-trace.js:335:21
15:29:07.601 | at async Promise.all (index 30)
15:29:07.601 | at async Job.emitDependency (/vercel/path0/node_modules/@vercel/nft/out/node-file-trace.js:310:9)
15:29:07.601 | at async /vercel/path0/node_modules/@vercel/nft/out/node-file-trace.js:335:21
15:29:07.601 | at async Promise.all (index 1)
15:29:07.601 | at async Job.emitDependency (/vercel/path0/node_modules/@vercel/nft/out/node-file-trace.js:310:9)
15:29:07.601 | at async /vercel/path0/node_modules/@vercel/nft/out/node-file-trace.js:335:21
15:29:07.601 | at async Promise.all (index 6)

could it be for the same reason?

repo that caused the issue on both netlify and vercel

[MajorBreakfast]

@demetrius-mp Doesn't look related. It says @mapbox in the error. Unless you had this app running on Vercel before, the chances of this being related to this sveltekit update are not likely

[rowantrollope]

The error I'm seeing on verbal is:

"SyntaxError: Named export 'devalue' not found. The requested module 'devalue' is a CommonJS module, which may not support all module.exports as named exports."

Screenshot attached.

[geoffrich]

This issue is happening because the new version of devalue is ESM-only, and Netlify is trying to require it. The maintainers are working on a more permanent solution, but in the meantime you can temporarily work around the issue one of the following ways:

1. Configure Netlify to bundle your functions with esbuild. In a netlify.toml at the root of the project:

[build]
  command = "npm run build"
  publish = "build"

[functions]
  node_bundler = "esbuild" # temporary workaround for https://github.com/sveltejs/kit/issues/6462

2. Deploy using Netlify edge functions. In your svelte.config.js:

import netlify from '@sveltejs/adapter-netlify';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
+		adapter: netlify({ edge: true })
-		adapter: netlify()
	}
};

export default config;

[geoffrich]

For those reporting a similar issue on Vercel -- can you provide a repro? I was able to reproduce this issue with a fresh demo project on Netlify, but not on Vercel.

[demetrius-mp]

For those reporting a similar issue on Vercel -- can you provide a repro? I was able to reproduce this issue with a fresh demo project on Netlify, but not on Vercel.

the issue i was having on vercel is not related to devalue, but to this

[xpat]

Also crashes for me on adapter-node.

import devalue from "devalue";
       ^^^^^^^
SyntaxError: The requested module 'devalue' does not provide an export named 'default'
    at ModuleJob._instantiate (node:internal/modules/esm/module_job:127:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:191:5)
    at async Promise.all (index 0)

In another issue related to this, it was suggested that the problem could be fixed by setting "true" at "esModuleInterop": true,
but my tsconfig.json already had it set to true.

cat tsconfig.json 
{
        "extends": "./.svelte-kit/tsconfig.json",
        "compilerOptions": {
                "moduleResolution": "node",
                "module": "es2020",
                "lib": ["es2020", "DOM"],
                "target": "es2020",
                /**
                svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
                to enforce using \`import type\` instead of \`import\` for Types.
                */
                "importsNotUsedAsValues": "error",
                "isolatedModules": true,
                "resolveJsonModule": true,
                /**
                To have warnings/errors of the Svelte compiler at the correct position,
                enable source maps by default.
                */
                "sourceMap": true,
                "esModuleInterop": true,
                "skipLibCheck": true,
                "forceConsistentCasingInFileNames": true,
                "baseUrl": ".",
                "allowJs": true,
                "checkJs": true,
                "paths": {
                        "$lib": ["src/lib"],
                        "$lib/*": ["src/lib/*"],
                        "$img": ["src/images"]
                }
        },
        "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
}

[Rich-Harris]

The issue described in the OP is happening because Netlify doesn't support ESM (netlify/zip-it-and-ship-it#750), and recent versions of SvelteKit depend on devalue@3 which is an ESM package.

Ultimately, this will continue to affect any app deployed to Netlify that has an ESM dependency — we've just been lucky not to stumble onto one until now. As more of the ecosystem goes ESM-only, this will happen more frequently.

The reason this doesn't happen if you specify node_bundler=esbuild is that unlike the default zisi (zip-it-and-ship-it), esbuild bundles everything to a single file rather than just zipping up stuff in node_modules. But that's too blunt a remedy — esbuild can't bundle everything (i.e. native dependencies).

I think the solution is to adopt the same strategy adapter-node has — use esbuild within the adapter to bundle everything in devDependencies, but leave prod dependencies unbundled. If you're using zisi then native dependencies will continue to work, and if you're using esbuild then it will just get bundled a second time, harmlessly.

@xpat looks like you have some out-of-date dependencies somewhere — if something is doing this...

import devalue from 'devalue'

...it means it's expecting devalue@2, not devalue@3 (which uses a named export).

@rowantrollope seems like you have the opposite problem — that code expects devalue@3, but you might have devalue@2 installed somehow?