{"record":{"id":"77a0d55414f2177e","repo":"parcel-bundler/parcel","slug":"dynamic-diagnostic-from-vue-style-compiler-errors","errorCode":null,"errorMessage":"[dynamic diagnostic from Vue style compiler errors]","messagePattern":"\\[dynamic diagnostic from Vue style compiler errors\\]","errorType":"exception","errorClass":"ThrowableDiagnostic","httpStatus":null,"severity":"error","filePath":"packages/transformers/vue/src/VueTransformer.js","lineNumber":383,"sourceCode":"              throw new ThrowableDiagnostic({\n                diagnostic: {\n                  message: md`Unknown style language: \"${style.lang}\"`,\n                  origin: '@parcel/transformer-vue',\n                },\n              });\n          }\n          let styleComp = await compiler.compileStyleAsync({\n            filename: asset.filePath,\n            source: style.content,\n            modules: style.module,\n            preprocessLang: style.lang || 'css',\n            scoped: style.scoped,\n            inMap: style.src ? undefined : style.map,\n            isProd: options.mode === 'production',\n            id,\n          });\n          if (styleComp.errors.length) {\n            throw new ThrowableDiagnostic({\n              diagnostic: styleComp.errors.map(err => {\n                return createDiagnostic(err, asset.filePath);\n              }),\n            });\n          }\n          let styleAsset = {\n            type: 'css',\n            content: styleComp.code,\n            sideEffects: true,\n            ...(!style.src &&\n              asset.env.sourceMap && {\n                map: createMap(style.map, options.projectRoot),\n              }),\n            uniqueKey: asset.id + '-style' + i,\n          };\n          if (styleComp.modules) {\n            if (typeof style.module === 'boolean') style.module = '$style';\n            cssModules[style.module] = {","sourceCodeStart":365,"sourceCodeEnd":401,"githubUrl":"https://github.com/parcel-bundler/parcel/blob/59484858a1a0bcbb71f74088956bb437a2db6505/packages/transformers/vue/src/VueTransformer.js#L365-L401","documentation":"Thrown by @parcel/transformer-vue after compiler.compileStyleAsync returns a non-empty errors array. compileStyleAsync runs the CSS preprocessor (sass/less/stylus) and Vue's scoped style rewriting; failures mean the style source is invalid for the chosen preprocessor or scoped transformation.","triggerScenarios":"compileStyleAsync is called per <style> block with source content, modules flag, preprocessLang, scoped flag, inMap, isProd, id. Errors land in styleComp.errors — typically Sass/Less/Stylus syntax errors or @import resolution failures.","commonSituations":"Sass @import of a file that doesn't exist, a mixin/include typo, deprecated Sass syntax (e.g. @import vs @use after Dart Sass upgrade), or invalid CSS the scoped-rewriter can't process.","solutions":["Read the surfaced style compiler error and fix the cited line in the <style> block.","Ensure all @import/@use paths resolve relative to the SFC.","Update deprecated preprocessor syntax to match your installed Sass/Less/Stylus version.","Reproduce in isolation by extracting the style into a .scss/.less file and compiling directly."],"exampleFix":"// before\n<style lang=\"scss\" scoped>@import './missing';</style>\n// after\n<style lang=\"scss\" scoped>@import './real-file';</style>","handlingStrategy":"try-catch","validationCode":"import { compileStyleAsync } from '@vue/compiler-sfc';\nconst { errors } = await compileStyleAsync({ filename, source: style.content, preprocessLang: style.lang || 'css', scoped: style.scoped, id: 'test' });\nif (errors.length) throw new Error('Style compile errors: ' + errors.map(e => e.message).join('; '));","typeGuard":null,"tryCatchPattern":"try {\n  await compileStyleFor(style);\n} catch (e) {\n  if (e?.diagnostics?.some(d => /style|sass|scss|less|stylus/i.test(d.message))) {\n    /* show the failing style block */\n  }\n  throw e;\n}","preventionTips":["Resolve every @import/@use path before relying on the style compiler.","Keep preprocessor syntax compatible with the installed Sass/Less/Stylus version.","Extract tricky styles to standalone files and compile them directly to debug."],"tags":["vue","style","compiler","parcel-transformer"],"backgroundTag":null,"analyzedSha":"59484858a1a0bcbb71f74088956bb437a2db6505","analyzedAt":"2026-08-13T04:06:35.925Z","schemaVersion":2},"datasetVersion":"2026-08-13T04:17:16.726Z"}