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

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 https://github.com/vitejs/vite/commit/015290a169d5ca3806aa0b2eb417426d61df9b7d 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.

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 2
Comments: 17 (17 by maintainers)

Most upvoted comments

Can confirm upgrade to 2.5.8 worked, not messages anymore

Shinigami92 on Sep 17, 2021

@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?

https://github.com/vitejs/vite/blob/3e3c20364d6c065026f7362bbcb7094099705cc9/packages/vite/src/node/plugins/css.ts#L245

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

dominikg on Sep 16, 2021

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

patak-dev on Sep 17, 2021

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?

dominikg on Sep 16, 2021

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

dominikg on Sep 16, 2021

hmm, in that case this line is wrong, as map is a Buffer and not a SourceMap there? https://github.com/vitejs/vite/blob/4b90e0fee981faa9e734402bd482c168e4bbdf9f/packages/vite/src/node/plugins/css.ts#L642

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.

dominikg on Sep 16, 2021

@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.

hex-ci on Sep 16, 2021

@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?

https://github.com/vitejs/vite/blob/3e3c20364d6c065026f7362bbcb7094099705cc9/packages/vite/src/node/plugins/css.ts#L245

hex-ci on Sep 16, 2021