Search code examples
typescriptsveltesveltekit

SvelteKit TypeError: URL is not a constructor


Im continiously running into this issue with @sveltejs/kit, URL is not used or referenced in my code. Im getting this error both in the bundled code after build as well as during development, i have tried with different adapters, but that does not seem to do anything. I'm experiencing this issue both with yarn and npm, and before and after build. Anyone have any idea on how to solve this?

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.

Logging URL just before the error returns:

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

Node version: 16.1.0

Response from a simple post:

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"
  }
}


Solution

  • Having removed dependencies one by one, it seems that recordrtc causes window.URL to loose its constructor. Removing this resolved the problem.