vitejs/vite · error · Error

?url is not supported with CSS modules. (tried to import ${J

Error message

?url is not supported with CSS modules. (tried to import ${JSON.stringify(id)})

What it means

Thrown by the CSS plugin's `load` hook when a request matches both the `?url` query and a CSS Modules request (`*.module.css`/`*.module.scss`). `?url` asks Vite to emit the CSS file as a URL asset, while CSS Modules compile to a JS module with scoped exports; combining them is contradictory, so Vite rejects it explicitly.

Source

Thrown at packages/vite/src/node/plugins/css.ts:361

      )
      preprocessorWorkerControllerCache.set(
        config,
        preprocessorWorkerController,
      )
    },

    async buildEnd() {
      await preprocessorWorkerController?.close()
    },

    load: {
      filter: {
        id: CSS_LANGS_RE,
      },
      handler(id) {
        if (urlRE.test(id)) {
          if (isModuleCSSRequest(id)) {
            throw new Error(
              `?url is not supported with CSS modules. (tried to import ${JSON.stringify(
                id,
              )})`,
            )
          }

          // *.css?url
          // in dev, it's handled by assets plugin.
          if (isBuild) {
            id = injectQuery(removeUrlQuery(id), 'transform-only')
            return (
              `import ${JSON.stringify(id)};` +
              `export default "__VITE_CSS_URL__${Buffer.from(id).toString(
                'hex',
              )}__"`
            )
          }
        }

View on GitHub (pinned to 89620f09af)

Solutions

1. Drop the `?url` suffix when importing a CSS module: `import styles from './foo.module.css'`.
2. If you actually need the raw file URL, rename the file to a non-module extension (e.g. `foo.css`) and import that with `?url`.
3. Split the styles: keep `foo.module.css` for scoped classes and a separate plain `.css` for the URL asset.

Example fix

// before
import cssUrl from './foo.module.css?url';
// after
import styles from './foo.module.css';

function assertNotCssModuleUrl(id) {
  if (/\.module\.(css|scss|sass|less|styl)/.test(id) && /[?&]url(=|&|$)/.test(id)) {
    throw new Error('Do not combine CSS modules with ?url: ' + id);
  }
}
// assertNotCssModuleUrl(requestedId);

function isCssModuleRequest(id) {
  return /\.module\.(css|scss|sass|less|styl)/.test(id);
}

When it happens

Trigger: An import like `import url from './foo.module.css?url'` or `import styleUrl from './bar.module.scss?url'` where the file is a CSS module.

Common situations: Copying a `?url` import pattern from a regular CSS file and applying it to a `.module.css`, or renaming a `.css` to `.module.css` without updating existing `?url` imports.

Related errors

• css content for ${JSON.stringify(id)} was not found
• When "build.cssCodeSplit: false" is set, "rolldownOptions.in
• HTML proxy index in "${id}" not found
• Failed to load PostCSS config: ${e}
• base or replace is required

AI-assisted analysis of vitejs/vite@89620f09af (2026-08-03). Data as JSON: /data/errors/827882f46b441ab2.json. Report an issue: GitHub.