{"id":"827882f46b441ab2","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 ${JSON.stringify(id)})","messagePattern":"\\?url is not supported with CSS modules\\. \\(tried to import (.+?)\\)","errorType":"validation","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/89620f09afcfef6b35e7bb8660132ab5b4d0cd3b/packages/vite/src/node/plugins/css.ts#L343-L379","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","solutions":["Drop the `?url` suffix when importing a CSS module: `import styles from './foo.module.css'`.","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`.","Split the styles: keep `foo.module.css` for scoped classes and a separate plain `.css` for the URL asset."],"exampleFix":"// before\nimport cssUrl from './foo.module.css?url';\n// after\nimport styles from './foo.module.css';","handlingStrategy":"validation","validationCode":"function assertNotCssModuleUrl(id) {\n  if (/\\.module\\.(css|scss|sass|less|styl)/.test(id) && /[?&]url(=|&|$)/.test(id)) {\n    throw new Error('Do not combine CSS modules with ?url: ' + id);\n  }\n}\n// assertNotCssModuleUrl(requestedId);","typeGuard":"function isCssModuleRequest(id) {\n  return /\\.module\\.(css|scss|sass|less|styl)/.test(id);\n}","tryCatchPattern":null,"preventionTips":["Reserve `?url` for plain asset CSS, never for `.module.*` files.","Codify the convention in an ESLint rule banning `module.css?url` import strings."],"tags":["css","css-modules","url-import","import"],"analyzedSha":"89620f09afcfef6b35e7bb8660132ab5b4d0cd3b","analyzedAt":"2026-08-03T19:28:02.920Z","schemaVersion":2}