Sourcemap is likely to be incorrect: a plugin (undefined) was used to transform files...

[bompus]

Describe the bug

Something changed between 2.5.6 and 2.5.7 in regards to how <style> blocks are processed.

I have a feeling that 015290a is the cause because not much else changed in regards to CSS between 2.5.6 and 2.5.7 releases.

I've provided a very minimal repo to reproduce the issue.

Reproduction

https://github.com/bompus/vite-sourcemap-issue

$ npm run build

✓ 10 modules transformed.
rendering chunks (1)...Sourcemap is likely to be incorrect: a plugin (undefined) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help

$ npm install vite@2.5.6
$ npm run build
no warnings / errors

$ npm install vite@2.5.7
$ npm run build
same warning / error appears as above

Edit the App.vue file to change <style lang="scss"> to <style> and the warning still appears, but this time it says a plugin (vite:css) was used instead of a plugin (undefined) was used.

System Info

System:
    OS: Linux 5.11 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (6) x64 AMD Ryzen 9 3950X 16-Core Processor
    Memory: 2.82 GB / 7.74 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 16.9.1 - /usr/local/n/bin/node
    npm: 7.23.0 - /usr/local/n/bin/npm
  npmPackages:
    @vitejs/plugin-vue: 1.6.2 => 1.6.2
    vite: 2.5.7 => 2.5.7

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[hex-ci]

I also encountered this problem. It seems to be related to the vite-plugin-vue2 plugin, and may also be related to the PR #4880. I have submitted an issue in the vite-plugin-vue2 project: underfin/vite-plugin-vue2#132

[hex-ci]

I took a look at the provided code repositories, and this problem seems to not only affect vue 2.

[hex-ci]

@patak-js @Shinigami92 I just made an attempt. I modified this line of code to map: map?.toJSON() ?? { mappings: '' } to resolve the warning, but I am not sure whether the final sourcemap generated is correct, but It seems that the problem can be solved, what do you think?

vite/packages/vite/src/node/plugins/css.ts

Line 245 in 3e3c203

map

[Shinigami92]

I'm not sure if this is related, but in a plugin of mine I set it by default to null https://github.com/Shinigami92/vite-plugin-ts-nameof/blob/f9301b8e4787f6345630101b49e10870d118bbc5/src/index.ts#L17

But this just suppress the warning. It's kinda a "the author disabled it intentionally" 🤔

[hex-ci]

@Shinigami92 The problem now is that if you don't use any external plugins, this warning will be reported, which will make people think that there is a problem with Vite itself.

[dominikg]

@patak-js @Shinigami92 I just made an attempt. I modified this line of code to map: map?.toJSON() ?? { mappings: '' } to resolve the warning, but I am not sure whether the final sourcemap generated is correct, but It seems that the problem can be solved, what do you think?

vite/packages/vite/src/node/plugins/css.ts

Line 245 in 3e3c203

map

i'm not sure {mappings:''} is a valid sourcemap. at least svelte's sourcemap processing trips up on it. also the rollup api allows returning a SourceMap as object instead of json string, so i think it's best not to transform it to a string bc the very next step would be that it's parsed again.

Maybe the vue plugins could be updated to handle null? The vite docs mention that null is a possibe return for map: https://vitejs.dev/guide/api-plugin.html#transforming-custom-file-types

and rollup api specify map as optional too: https://rollupjs.org/guide/en/#transform

[hex-ci]

@patak-js @Shinigami92 I just made an attempt. I modified this line of code to map: map?.toJSON() ?? { mappings: '' } to resolve the warning, but I am not sure whether the final sourcemap generated is correct, but It seems that the problem can be solved, what do you think?

vite/packages/vite/src/node/plugins/css.ts

Line 245 in 3e3c203

map

i'm not sure {mappings:''} is a valid sourcemap. at least svelte's sourcemap processing trips up on it. also the rollup api allows returning a SourceMap as object instead of json string, so i think it's best not to transform it to a string bc the very next step would be that it's parsed again.

Maybe the vue plugins could be updated to handle null? The vite docs mention that null is a possibe return for map: https://vitejs.dev/guide/api-plugin.html#transforming-custom-file-types

and rollup api specify map as optional too: https://rollupjs.org/guide/en/#transform

You mean the code can be changed to map: map?.toJSON() ?? null ?

[dominikg]

no, I mean not calling .toJSON()

[hex-ci]

no, I mean not calling .toJSON()

I saw that the toJSON() method does not generate a json string, but a sourcemap object. I checked the sourcemap generated by other codes of vite:css, which is the sourcemap object generated by this toJSON().

[dominikg]

hmm, in that case this line is wrong, as map is a Buffer and not a SourceMap there?

vite/packages/vite/src/node/plugins/css.ts

Line 642 in 4b90e0f

map = preprocessResult.map as SourceMap

as the subsequent calls to postcss plugins may expect map to be a buffer still, your solution might actually work, sorry for jumping conclusions from the typings and function name.

We should update the typings though and make sure that it is a SourceMap where it's typed as such.

[hex-ci]

hmm, in that case this line is wrong, as map is a Buffer and not a SourceMap there?

vite/packages/vite/src/node/plugins/css.ts

Line 642 in 4b90e0f

map = preprocessResult.map as SourceMap

as the subsequent calls to postcss plugins may expect map to be a buffer still, your solution might actually work, sorry for jumping conclusions from the typings and function name.

We should update the typings though and make sure that it is a SourceMap where it's typed as such.

Thanks. But I found a problem. The toJSON() method is not in the SourceMap type definition, so I don't know the correct solution to fix this problem.

Have you ever generated an example project with incorrect sourcemap, such as the "svelte" project you mentioned, let me try it.

[dominikg]

don't have an example for svelte rn, but i'm debugging it directly in vite with packages/vite/playground/css
Its actually not a Buffer but a SourceMapGenerator and as you said it's toJSON() creates a SourceMap object (who names these things?).
I'll try to come up with a testcase and a fix

[hex-ci]

hmm, in that case this line is wrong, as map is a Buffer and not a SourceMap there?

vite/packages/vite/src/node/plugins/css.ts

Line 642 in 4b90e0f

map = preprocessResult.map as SourceMap

as the subsequent calls to postcss plugins may expect map to be a buffer still, your solution might actually work, sorry for jumping conclusions from the typings and function name.

We should update the typings though and make sure that it is a SourceMap where it's typed as such.

I checked the code again. The map property in the postcssResult object is of the SourceMapGenerator type, not the SourceMap type. I feel that there is a problem here.

[hex-ci]

don't have an example for svelte rn, but i'm debugging it directly in vite with packages/vite/playground/css
Its actually not a Buffer but a SourceMapGenerator and as you said it's toJSON() creates a SourceMap object (who names these things?).
I'll try to come up with a testcase and a fix

Great! I also found out just now that it is of the SourceMapGenerator type! I look forward to you fixing this problem! Thank you!

[dominikg]

added a PR that works with SourceMapGenerator, unfortunately there are a lot more steps needed to get css sourcemaps working. So i'd be fine with rolling back the initial commit too until we have a plan and implement css sourcemaps.
I doubt this would fit into the 2.6 beta timeframe, maybe something for 2.7?

[patak-dev]

Closing with vite@2.5.8, @dominikg Anthony included your revert in https://github.com/vitejs/vite/commits/2.5.x

[Shinigami92]

Can confirm upgrade to 2.5.8 worked, not messages anymore