question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Vite version 2.9.2 and beyond don't honor external package CSS/Sass module inclusion in output bundle

See original GitHub issue

Describe the bug

This bug is evident in any version of Vite after v2.9.1.

When you have an external npm module (in this case, @reintroducing/my-package) that loads its own Sass file as a CSS module, using that file in dev mode works perfectly fine and you can see the CSS associated with the external module reflected in your dev server. But if you build and preview that code, you will see that the CSS for the external module is there but the class is not applied to the element and there is no mention of the module name in the output JS bundle.

Steps to Reproduce Working Version

  1. Clone repo and npm i.
  2. Run npm run dev. Observe the Test button and its blue background.
  3. Inspect the blue button and in dev tools verify that it has the class Button-module-root as expected.
  4. Stop the dev server and run npm run preview. Observe the Test button and its blue background.
  5. Inspect the blue button and in dev tools verify that it has the class Button-module-root as expected.
  6. In the generated dist, open assets/index[hash].js and search for Button-module-root to verify it is there.
  7. In the generated dist, open assets/index[hash].css and search for Button-module-root to verify it is there.

Steps to Reproduce Non-Working Version

  1. Upgrade Vite to any version after 2.9.1 (2.9.2+, although 2.9.2 is when this bug starts showing up).
  2. Run npm i.
  3. Run npm run dev. Observe the Test button and its blue background.
  4. Inspect the blue button and in dev tools verify that it has the class Button-module-root as expected.
  5. Stop the dev server and run npm run preview. Observe the Test button and the missing blue background.
  6. Inspect the button and in dev tools verify that it no longer has the class Button-module-root as expected.
  7. In the generated dist, open assets/index[hash].js and search for Button-module-root to verify it is no longer there.
  8. In the generated dist, open assets/index[hash].css and search for Button-module-root to verify it is there.

The code for the external Button is super simple and can be found here.

Reproduction

https://github.com/reintroducing/vite-bug

System Info

System:
    OS: macOS 12.3.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 80.34 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
  Browsers:
    Chrome: 102.0.5005.61
    Firefox: 97.0.1
    Safari: 15.4
  npmPackages:
    @vitejs/plugin-react: ^1.3.0 => 1.3.2
    vite: 2.9.1 => 2.9.1

Used Package Manager

npm

Logs

No response

Validations

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
reintroducingcommented, Jun 4, 2022

@sapphi-red got it, so this is a known issue and not one with my code then. hopefully it can get sorted in the next alpha release. appreciate the quick responses to this issue. for the time being i’ll downgrade to vite 2.9.1 and eagerly await the 3.0.0 release (which will hopefully fix all the bugs 😃

0reactions
sapphi-redcommented, Jul 3, 2022

related: #6179

Read more comments on GitHub >

github_iconTop Results From Across the Web

vite: importing css/sass into component should not also ...
The styles are correctly injected into the js code when building the app but the component_styles.sass is additionally bundled into a styles.css ...
Read more >
vite-plugin-sass-dts - npm
A plugin that automatically creates a type file when using the css module type-safely.. Latest version: 1.2.9, last published: 3 days ago.
Read more >
Is Vite the Killer of Webpack? - Better Programming
Bundlers take multiple JavaScript files and combine them into a single file that can run in the browser. This JS bundle contains all...
Read more >
rollup-plugin-react-scoped-css - npm package - Snyk
Learn more about rollup-plugin-react-scoped-css: package health score, popularity, security, maintenance, versions and more.
Read more >
vite-ruby for JS/CSS asset management in Rails
Webpacker had always been a pain, I started using it to have something to manage and build NPM packages, but was still mid-stream...
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