{"record":{"id":"75d239a44a79583e","repo":"vuejs/core","slug":"vue-compiler-sfc-style-preprocessing-in-the-bro","errorCode":null,"errorMessage":"[@vue/compiler-sfc] Style preprocessing in the browser build must provide the `preprocessCustomRequire` option to return the in-browser version of the preprocessor.","messagePattern":"\\[@vue/compiler-sfc\\] Style preprocessing in the browser build must provide the `preprocessCustomRequire` option to return the in-browser version of the preprocessor\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/compiler-sfc/src/compileStyle.ts","lineNumber":226,"sourceCode":"  } catch (e: any) {\n    errors.push(e)\n  }\n\n  return {\n    code: code || ``,\n    map: outMap && outMap.toJSON(),\n    errors,\n    rawResult: result,\n    dependencies,\n  }\n}\n\nfunction preprocess(\n  options: SFCStyleCompileOptions,\n  preprocessor: StylePreprocessor,\n): StylePreprocessorResults {\n  if ((__ESM_BROWSER__ || __GLOBAL__) && !options.preprocessCustomRequire) {\n    throw new Error(\n      `[@vue/compiler-sfc] Style preprocessing in the browser build must ` +\n        `provide the \\`preprocessCustomRequire\\` option to return the in-browser ` +\n        `version of the preprocessor.`,\n    )\n  }\n\n  return preprocessor(\n    options.source,\n    options.inMap || options.map,\n    {\n      filename: options.filename,\n      ...options.preprocessOptions,\n    },\n    options.preprocessCustomRequire,\n  )\n}\n","sourceCodeStart":208,"sourceCodeEnd":243,"githubUrl":"https://github.com/vuejs/core/blob/a2b40db9a83b36ed9da3a16403cf8f040262d73f/packages/compiler-sfc/src/compileStyle.ts#L208-L243","documentation":"Thrown by the internal preprocess() helper in @vue/compiler-sfc when style preprocessing is requested in a browser build (__ESM_BROWSER__ or __GLOBAL__) without a preprocessCustomRequire option. Preprocessors (sass, less, stylus) are Node modules; in the browser the caller must supply an in-browser replacement. The guard at compileStyle.ts:226 fires before the preprocessor is invoked.","triggerScenarios":"Calling compileStyle({ preprocessLang: 'scss', ... }) from the browser build of @vue/compiler-sfc without preprocessCustomRequire; attempting in-browser SCSS/Less/Stylus compilation against the global or esm-browser entry.","commonSituations":"A live in-browser SFC playground that ships the browser build; tooling that lets end users author <style lang=\"scss\"> at runtime.","solutions":["Provide preprocessCustomRequire returning an in-browser preprocessor bundle (e.g. an inlined sass.js, less.browser), keyed by the preprocessLang.","Move style preprocessing to the build step and ship only plain CSS to the browser.","Strip the preprocessLang from options when targeting the browser build if preprocessor support is not needed."],"exampleFix":"// before (browser build)\ncompileStyle({ filename: 'x.css', source, preprocessLang: 'scss' })\n\n// after\ncompileStyle({\n  filename: 'x.css',\n  source,\n  preprocessLang: 'scss',\n  preprocessCustomRequire: lang => (lang === 'scss' ? inBrowserSass : undefined),\n})","handlingStrategy":"validation","validationCode":"// Ensure preprocessCustomRequire is present whenever a preprocessor is used in the browser.\nfunction safeCompileStyleBrowser(opts) {\n  if (opts.preprocessLang && !opts.preprocessCustomRequire && isBrowserBuild) {\n    throw new Error('preprocessCustomRequire required for browser style preprocessing')\n  }\n  return compileStyle(opts)\n}","typeGuard":"function hasPreprocessCustomRequire(opts: unknown): boolean {\n  return !!opts && typeof (opts as any).preprocessCustomRequire === 'function'\n}","tryCatchPattern":null,"preventionTips":["Bundle in-browser versions of any preprocessor (sass.js, less.browser) before enabling preprocessLang in the browser build.","Prefer build-time preprocessing; ship plain CSS to the browser.","Strip preprocessLang from options when no in-browser preprocessor is available."],"tags":["vue","compiler-sfc","css-preprocessor","browser-build","configuration"],"backgroundTag":null,"analyzedSha":"a2b40db9a83b36ed9da3a16403cf8f040262d73f","analyzedAt":"2026-08-12T14:21:14.989Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}