SvelteKit TypeError:URL 不是构造函数
2021-05-26
1975
我不断遇到 @sveltejs/kit 的这个问题,我的代码中未使用或引用 URL。我在构建后的捆绑代码中以及开发过程中都遇到了此错误,我尝试了不同的适配器,但似乎没有任何作用。我在使用 yarn 和 npm 时都遇到了这个问题,在构建之前和之后也是如此。有人知道如何解决这个问题吗?
Listening on port 3000
file:///app/index.js:15823
const parsed = new URL(req.url || '', 'http://localhost');
^
TypeError: URL is not a constructor
at Array.<anonymous> (file:///app/index.js:15823:19)
at loop (file:///app/index.js:13738:58)
at next (file:///app/index.js:13739:69)
at Array.noop_handler (file:///app/index.js:15794:44)
at loop (file:///app/index.js:13738:58)
at next (file:///app/index.js:13739:69)
at Array.<anonymous> (file:///app/index.js:14022:28)
at loop (file:///app/index.js:13738:58)
at next (file:///app/index.js:13739:69)
at Array.compression (file:///app/index.js:13463:5)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
The result above is from a node docker image, ran with node.
在错误返回之前记录 URL:
{
createObjectURL: [Function: createObjectURL],
revokeObjectURL: [Function: revokeObjectURL]
}
Error: TypeError: URL is not a constructor
Node 版本:16.1.0
来自简单帖子的回复:
Error: TypeError: URL is not a constructor
Body: {}
Error
at eval (/src/lib/ft4/auth.ts:15:11)
at async Object.handle (//Users/indico/Projects/Web-Recorder/src/hooks.ts:22:54)
at async respond (file:///Users/indico/Projects/Web-Recorder/node_modules/@sveltejs/kit/dist/ssr.js:1510:10)
at async Immediate.<anonymous> (file:///Users/indico/Projects/Web-Recorder/node_modules/@sveltejs/kit/dist/chunks/index.js:3305:23)
{ user: undefined, accessToken: '7euwpophib4h3wai76cr1bpnrhkldobw' } get_task
{
createObjectURL: [Function: createObjectURL],
revokeObjectURL: [Function: revokeObjectURL]
}
Error: TypeError: URL is not a constructor
Body: {"action":"get_task","task_id":"078E57F7-7161-45AD-B00E-0CEDD3C4E19B","include":"full"}
Cannot read property 'length' of undefined
TypeError: Cannot read property 'length' of undefined
at hash (file:///Users/indico/Projects/Web-Recorder/node_modules/@sveltejs/kit/dist/ssr.js:286:16)
at render (file:///Users/indico/Projects/Web-Recorder/node_modules/@sveltejs/kit/dist/ssr.js:1543:26)
at async Object.handle (/Users/indico/Projects/Web-Recorder/src/hooks/index.ts:35:25)
at async respond (file:///Users/indico/Projects/Web-Recorder/node_modules/@sveltejs/kit/dist/ssr.js:1510:10)
at async Immediate.<anonymous> (file:///Users/indico/Projects/Web-Recorder/node_modules/@sveltejs/kit/dist/chunks/index.js:3305:23)
tsconfig:
{
"compilerOptions": {
"moduleResolution": "node",
"module": "ES2020",
"lib": [
"ES2020",
"DOM",
"DOM.Iterable"
],
"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": {
"$app/*": [
".svelte/dev/runtime/app/*",
".svelte/build/runtime/app/*"
],
"$service-worker": [
".svelte/build/runtime/service-worker"
],
"$lib/*": [
"src/lib/*"
],
"$icons/*": [
"src/lib/icons/*"
],
"$comp/*": [
"src/lib/components/*"
],
"package.json": [
"./package.json"
],
"$src/*": [
"src/*"
]
}
},
"include": [
"src/**/*.d.ts",
"src/**/*.js",
"src/**/*.ts",
"src/**/*.svelte",
"types/**/*"
]
}
package.json
{
"main": "index.js",
"private": true,
"license": "MIT",
"scripts": {
"dev": "svelte-kit dev",
"build": "svelte-kit build --verbose",
"start": "svelte-kit start",
},
"devDependencies": {
"@sveltejs/adapter-node": "^1.0.0-next.9",
"@sveltejs/adapter-static": "^1.0.0-next.9",
"@types/cookie": "^0.4.0",
"@types/lodash": "^4.14.168",
"@types/node": "^15.3.0",
"@types/recordrtc": "^5.6.5",
"@types/uuid": "^8.3.0",
"@typescript-eslint/eslint-plugin": "^4.19.0",
"@typescript-eslint/parser": "^4.19.0",
"autoprefixer": "^10.2.5",
"cross-env": "^7.0.3",
"cssnano": "^4.1.10",
"eslint": "^7.22.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-svelte3": "^3.2.0",
"postcss": "^8.2.15",
"postcss-load-config": "^3.0.1",
"postcss-nested": "^5.0.5",
"prettier": "~2.3.0",
"prettier-plugin-svelte": "^2.2.0",
"simplytyped": "^3.3.0",
"svelte": "^3.38.2",
"svelte-preprocess": "^4.7.3",
"tailwindcss": "^2.1.0",
"tslib": "^2.2.0",
"typescript": "^4.0.0",
"vite": "^2.3.3"
},
"dependencies": {
"@sveltejs/kit": "^1.0.0-next.107",
"@tailwindcss/aspect-ratio": "^0.2.0",
"@tailwindcss/custom-forms": "^0.2.1",
"@tailwindcss/forms": "^0.3.2",
"@tailwindcss/line-clamp": "^0.2.0",
"@tailwindcss/typography": "^0.4.0",
"cookie": "^0.4.1",
"date-fns": "^2.21.3",
"filesize.js": "^2.0.0",
"lodash": "^4.17.21",
"recordrtc": "^5.6.2",
"uuid": "^8.3.2"
},
"type": "module",
"engines": {
"node": ">=16.0.0"
}
}
2个回答
逐个删除依赖项后,似乎 recordrtc 导致 window.URL 丢失其构造函数。删除它解决了该问题。
SlyOtis
2021-05-27
可能导致这种情况的一个原因是您将依赖项声明为依赖项而不是 devDependencies。从您的 package.json 来看,您正在使用 svelte-kit,请记住 sveltekit 使用 SSR,它会在运行时之前捆绑所有 devDependencies。
重要的是,如果依赖项在服务器端使用,则必须将其作为 devDependency 放置,但如果在客户端使用,则可以将其放在普通依赖项中。我更喜欢将所有内容放在 devDependency 中,以确保 SvelteKit 可以在服务器中渲染所有内容。这里有一个 SO 答案,对此进行了更详细的解释: Svelte 包应该是依赖项还是 devDependency?
Joshua Q
2021-12-05