0

我不断地使用@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.

上面的结果来自一个节点 docker 镜像，使用节点运行。

在错误返回之前记录 URL：

{
  createObjectURL: [Function: createObjectURL],
  revokeObjectURL: [Function: revokeObjectURL]
}
Error: TypeError: URL is not a constructor

节点版本：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)

配置：

{
  "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/**/*"
  ]
}

包.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"
  }
}
4

2 回答 2

1

逐一删除依赖项后，似乎recordrtc导致 window.URL 失去其构造函数。删除它解决了这个问题。

于 2021-05-27T10:10:14.487 回答
0

可能导致这一事实的一件事是，您将依赖项声明为依赖项而不是 devDependencies。在您的 package.json 中，您正在使用 svelte-kit，请记住 sveltekit 使用 SSR，它会在运行前捆绑您的所有 devDependencies。

重要的是，如果依赖是在服务器端使用的，你必须把它作为devDependency，但是如果它是在客户端使用的，你可以把它放在普通的deps中。我更喜欢将所有内容都放在 devDependency 中，以确保 SvelteKit 可以渲染服务器中的所有内容。这是一个 SO 答案，对此进行了更多解释：svelte package 应该是依赖项还是 devDependency？

于 2021-12-05T04:54:27.747 回答