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

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:2
  • Comments:17 (17 by maintainers)

github_iconTop GitHub Comments

2reactions
Shinigami92commented, Sep 17, 2021

Can confirm upgrade to 2.5.8 worked, not messages anymore

2reactions
dominikgcommented, 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

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Enable sourcemaps in Vue-Vite - Stack Overflow
I'm using Vite 2.9 and a CSS sourcemap was not being loaded by the browser. (I ...
Read more >
rollup-plugin-sourcemaps | Yarn - Package Manager
Rollup plugin for loading files with existing source maps. Inspired by webpack/source-map-loader. Works with rollup 0.31.2 or later.
Read more >
How to Bundle JavaScript With Rollup — Step-by-Step Tutorial
Learn how to use Rollup as a smaller, more efficient alternative to webpack and Browserify to bundle JavaScript files in this step-by-step tutorial...
Read more >
rollup-plugin-scss - npm
Start using rollup-plugin-scss in your project by running `npm i ... of source map (default: false) sourceMap: true, // Choose files to ...
Read more >
API - ESBuild
This setting is a convention from Webpack that esbuild respects for any imported file, not just files used with inject. #Loader. Supported by:...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found