{"record":{"id":"105b5d47c744b5a5","repo":"vitejs/vite","slug":"url-is-not-supported-with-css-modules-tried-to","errorCode":null,"errorMessage":"?url is not supported with CSS modules. (tried to import ${id})","messagePattern":"\\?url is not supported with CSS modules\\. \\(tried to import (.+?)\\)","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/vite/src/node/plugins/css.ts","lineNumber":361,"sourceCode":"      )\n      preprocessorWorkerControllerCache.set(\n        config,\n        preprocessorWorkerController,\n      )\n    },\n\n    async buildEnd() {\n      await preprocessorWorkerController?.close()\n    },\n\n    load: {\n      filter: {\n        id: CSS_LANGS_RE,\n      },\n      handler(id) {\n        if (urlRE.test(id)) {\n          if (isModuleCSSRequest(id)) {\n            throw new Error(\n              `?url is not supported with CSS modules. (tried to import ${JSON.stringify(\n                id,\n              )})`,\n            )\n          }\n\n          // *.css?url\n          // in dev, it's handled by assets plugin.\n          if (isBuild) {\n            id = injectQuery(removeUrlQuery(id), 'transform-only')\n            return (\n              `import ${JSON.stringify(id)};` +\n              `export default \"__VITE_CSS_URL__${Buffer.from(id).toString(\n                'hex',\n              )}__\"`\n            )\n          }\n        }","sourceCodeStart":343,"sourceCodeEnd":379,"githubUrl":"https://github.com/vitejs/vite/blob/b4d66fee14d970f45b8a6f3d7d6aee73ca9b88ab/packages/vite/src/node/plugins/css.ts#L343-L379","documentation":"Thrown by the CSS plugin's load handler when a request combines the `?url` query (asking for the asset URL string) with a CSS Module request (a `.module.css`-style id). Vite does not support emitting CSS modules as plain URL assets; the two features are mutually exclusive. css.ts:361 throws before any further handling.","triggerScenarios":"Source code does `import url from './foo.module.css?url'`. `urlRE.test(id)` is true and `isModuleCSSRequest(id)` (matches the `.module.css`/CSS-modules naming convention) is also true at css.ts:360, triggering the throw.","commonSituations":"Copy-pasting a `?url` import from a regular `.css` file onto a `.module.css` file. Migrating a stylesheet to CSS modules and forgetting to remove `?url`. Tooling that auto-appends `?url` to all CSS imports.","solutions":["Drop the `?url` suffix when importing a CSS module: `import styles from './foo.module.css'`.","If you need the URL, rename the file to a plain `.css` (non-module) and keep `?url`.","Import the CSS module for its class map and import a separate plain CSS file for the URL asset.","Audit codemods/aliases that append `?url` to CSS imports."],"exampleFix":"// before\nimport imgUrl from './Button.module.css?url'\n\n// after (use the module normally)\nimport styles from './Button.module.css'","handlingStrategy":"validation","validationCode":"const CSS_MODULE_RE = /\\.module\\.(css|scss|sass|less|styl)$/i\nfunction assertNotCssModuleWithUrl(id: string) {\n  if (/\\?url($|&)/.test(id) && CSS_MODULE_RE.test(id)) {\n    throw new Error(`Refusing to import ${id}: ?url is not supported with CSS modules.`)\n  }\n}","typeGuard":"function isCssModuleUrlCombo(id: string): boolean {\n  return /\\?url($|&)/.test(id) && /\\.module\\.(css|scss|sass|less|styl)$/i.test(id)\n}","tryCatchPattern":"try {\n  await build()\n} catch (e) {\n  if (e instanceof Error && /\\?url is not supported with CSS modules/.test(e.message)) {\n    console.error('Remove ?url from CSS module imports; use a plain .css file for URL assets.')\n  }\n  throw e\n}","preventionTips":["Lint imports to forbid combining `.module.*` with `?url`.","Codemod `?url` off any stylesheet converted to a CSS module.","Use a plain `.css` file when you need `?url`."],"tags":["css","css-modules","assets","url-query"],"backgroundTag":null,"analyzedSha":"b4d66fee14d970f45b8a6f3d7d6aee73ca9b88ab","analyzedAt":"2026-08-11T11:49:19.515Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-23T08:17:48.524Z"}