{"record":{"id":"6ce4fb718031741c","repo":"vuejs/core","slug":"vue-compiler-sfc-modules-option-is-not-suppor","errorCode":null,"errorMessage":"[@vue/compiler-sfc] `modules` option is not supported in the browser build.","messagePattern":"\\[@vue/compiler-sfc\\] `modules` option is not supported in the browser build\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/compiler-sfc/src/compileStyle.ts","lineNumber":124,"sourceCode":"    ? preProcessedSource.map\n    : options.inMap || options.map\n  const source = preProcessedSource ? preProcessedSource.code : options.source\n\n  const shortId = id.replace(/^data-v-/, '')\n  const longId = `data-v-${shortId}`\n\n  const plugins = (postcssPlugins || []).slice()\n  plugins.unshift(cssVarsPlugin({ id: shortId, isProd }))\n  if (trim) {\n    plugins.push(trimPlugin())\n  }\n  if (scoped) {\n    plugins.push(scopedPlugin(longId))\n  }\n  let cssModules: Record<string, string> | undefined\n  if (modules) {\n    if (__GLOBAL__ || __ESM_BROWSER__) {\n      throw new Error(\n        '[@vue/compiler-sfc] `modules` option is not supported in the browser build.',\n      )\n    }\n    if (!options.isAsync) {\n      throw new Error(\n        '[@vue/compiler-sfc] `modules` option can only be used with compileStyleAsync().',\n      )\n    }\n    plugins.push(\n      postcssModules({\n        ...modulesOptions,\n        getJSON: (_cssFileName: string, json: Record<string, string>) => {\n          cssModules = json\n        },\n      }),\n    )\n  }\n","sourceCodeStart":106,"sourceCodeEnd":142,"githubUrl":"https://github.com/vuejs/core/blob/a2b40db9a83b36ed9da3a16403cf8f040262d73f/packages/compiler-sfc/src/compileStyle.ts#L106-L142","documentation":"Thrown by doCompileStyle in @vue/compiler-sfc when the CSS Modules `modules` option is requested in a browser build (__GLOBAL__ or __ESM_BROWSER__). CSS Modules need postcss-modules and a filesystem-aware resolver that the in-browser bundle does not ship. The guard at compileStyle.ts:124 hard-fails before postcssModules is ever pushed onto the plugin list.","triggerScenarios":"Calling compileStyle({ modules: true }) from the @vue/compiler-sfc browser/global build; loading the esm-browser or global entry of compiler-sfc in the browser and requesting CSS Modules.","commonSituations":"Trying to do full SFC compilation (including <style module>) in the browser; shipping the browser build of compiler-sfc to a client that expects Node-grade compilation.","solutions":["Move style compilation to a build step (Vite, webpack + vue-loader) that uses the Node build of @vue/compiler-sfc, where modules is supported.","If you must compile in the browser, drop the `modules` option and pre-extract the class map at build time, injecting it as data.","Ensure your bundler resolves @vue/compiler-sfc to the Node CJS entry, not the *-esm-browser entry."],"exampleFix":"// before (browser build)\nimport { compileStyle } from '@vue/compiler-sfc'\ncompileStyle({ filename: 'x.css', source: '.a{color:red}', modules: true })\n\n// after — run in Node build during bundling\nimport { compileStyleAsync } from '@vue/compiler-sfc'\nconst { code, modules } = await compileStyleAsync({\n  filename: 'x.css',\n  source: '.a{color:red}',\n  modules: true,\n})","handlingStrategy":"validation","validationCode":"// Reject the modules option in browser builds before compiling.\nconst isBrowserBuild = typeof __ESM_BROWSER__ !== 'undefined' || typeof __GLOBAL__ !== 'undefined'\nfunction safeCompileStyle(opts) {\n  if (opts.modules && (isBrowserBuild || isBrowserBundle())) {\n    throw new Error('CSS modules require the Node build of @vue/compiler-sfc')\n  }\n  return compileStyle(opts)\n}","typeGuard":"function isNodeCompilerSfc(): boolean {\n  // True when the resolved entry is the CJS/Node build, not *-esm-browser / global.\n  return typeof process !== 'undefined' && !!process.versions?.node && !__ESM_BROWSER__ && !__GLOBAL__\n}","tryCatchPattern":null,"preventionTips":["Run style compilation (especially CSS Modules) in the Node build step, not the browser.","Configure your bundler to resolve @vue/compiler-sfc to the Node entry for build-time work.","Pre-extract CSS Module class maps at build time for any browser-rendered styles."],"tags":["vue","compiler-sfc","css-modules","browser-build","configuration"],"backgroundTag":null,"analyzedSha":"a2b40db9a83b36ed9da3a16403cf8f040262d73f","analyzedAt":"2026-08-12T14:21:14.989Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}