TypeError: import_url.URL is not a constructor

[JoostKersjes]

Describe the bug

When trying to upgrade from 3.1.4 to a newer version (does not matter which one), I'm getting an error when running any of the following scripts:

• vite
• vite build
• vitest
• cypress open --component
• start-storybook

The error: TypeError: import_url.URL is not a constructor

This happens for projects that use Storybook.

Fix

If I change the import syntax in my vite.config.ts from:

import { fileURLToPath, URL } from "url";

to

import { fileURLToPath, URL } from "node:url";

the error no longer shows up.

I have no clue why this fixes the problem, just that it does. Got the idea from exploring the code changes in #10254

Reproduction

https://stackblitz.com/edit/vitejs-vite-udpzay?file=vite.config.ts

Steps to reproduce

1. Create a new Vite project (e.g. ``)
2. Add a vite.config.ts file:

import { defineConfig } from 'vite'
import { fileURLToPath, URL } from 'url';

export default defineConfig({
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

4. Init Storybook with npx storybook init
5. Follow the installation steps (e.g. pick html as your framework)
6. Attempt yarn dev and observe the error

System Info

System:
    OS: Linux 5.13 Ubuntu 20.04.5 LTS (Focal Fossa)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-11370H @ 3.30GHz
    Memory: 6.57 GB / 15.32 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 18.2.0 - ~/.nvm/versions/node/v18.2.0/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.9.0 - ~/.nvm/versions/node/v18.2.0/bin/npm
  Browsers:
    Chromium: 106.0.5249.91
    Firefox: 105.0
  npmPackages:
    @vitejs/plugin-vue: 3.1.2 => 3.1.2 
    vite: 3.1.7 => 3.1.7

Used Package Manager

yarn

Logs

Click to expand!

$ yarn dev
yarn run v1.22.19
$ vite
failed to load config from /home/joost/projects/aw20/app/vite.config.ts
error when starting dev server:
TypeError: import_url.URL is not a constructor
    at Object.<anonymous> (/home/joost/projects/aw20/app/vite.config.ts:49:42)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at _require.extensions.<computed> [as .js] (file:///home/joost/projects/aw20/app/node_modules/vite/dist/node/chunks/dep-0ebb5606.js:63533:24)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Module._load (node:internal/modules/cjs/loader:827:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at loadConfigFromBundledFile (file:///home/joost/projects/aw20/app/node_modules/vite/dist/node/chunks/dep-0ebb5606.js:63541:21)
    at loadConfigFromFile (file:///home/joost/projects/aw20/app/node_modules/vite/dist/node/chunks/dep-0ebb5606.js:63409:34)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[JoostKersjes]

This comment is describing a similar (or exactly the same) error: #10365 (comment)

[flibustier]

I got exactly the same problem with the same config, upgrading to vite 3.1.5 or latest and the bug appears, so was staying in 3.1.4 but you’re fix is working for me, thank you !

My dependencies :

{
  "dependencies": {
    "vue": "3.2.40"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "1.2.0",
    "@types/node": "18.8.0",
    "@vitejs/plugin-vue": "3.1.2",
    "@vue/eslint-config-prettier": "7.0.0",
    "@vue/eslint-config-typescript": "11.0.2",
    "@vue/tsconfig": "0.1.3",
    "axios": "1.1.2",
    "eslint": "8.25.0",
    "eslint-plugin-vue": "9.6.0",
    "npm-run-all": "4.1.5",
    "prettier": "2.7.1",
    "rollup-plugin-visualizer": "5.8.2",
    "typescript": "4.8.4",
    "vite": "3.1.4",
    "vue-tsc": "1.0.3"
  }
}

My vite.config.ts created by vue :

import { fileURLToPath, URL } from "url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { visualizer } from "rollup-plugin-visualizer";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), visualizer()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  server: {
    port: 3000,
  },
});

[adamdehaven]

If I change the import syntax in my vite.config.ts from:

import { fileURLToPath, URL } from "url";

to

import { fileURLToPath, URL } from "node:url";

the error no longer shows up.

Can confirm, this resolves the issue but shouldn't be needed

[Diebug1]

Same for me @adamdehaven

import { fileURLToPath, URL } from "node:url";

This worked for me 👍