Subscribe on changes!

Error generating CSS sourcemap when using SCSS

avatar
Jan 2nd 2024

Vue version

3.4.3

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-3fervz?file=package.json

Steps to reproduce

Open the minimal repo, and execute npm run build to see the error.

What is expected?

The project should build and create a dist folder, containg a js file, a css file, and their sourcemaps.

What is actually happening?

The following error appear:

[ERROR] "version" is a required argument. [plugin vue]

System Info

No response

Any additional comments?

I've tracked this issue down to its source:

https://github.com/vuejs/core/blob/8498fcb8d8328016a913181dda8756cfda33e1eb/packages/compiler-sfc/src/style/preprocessors.ts#L43-L45

During execution, result.map is, for some reason, not a JSON object, but a Buffer representing the JSON string. And because toJSON method is actually defined on a Buffer, this part of the code calls toJSON method on the Buffer object, resulting in the wrong format later on.

A quick fix I found would be replacing that part by the following:

!(result.map instanceof Buffer) && result.map.toJSON 
   ? result.map.toJSON() 
   : JSON.parse(result.map.toString()), 

I've made a PR based on this observation, but I'm not totally sure if this is the right way to fix it.