开发者问题收集

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