Subscribe on changes!

Importing a node module with a CSS entry point no longer works

avatar
May 13th 2020

Describe the bug

Importing a package like modern-normalize now no longer works without suffixing ?import manually

Suffixing ?import treats the module as external in production builds.

image image image

System Info

  • vite version: 0.14.3
  • Operating System: Arch Linux
  • Node version: 14.2.0
avatar
May 13th 2020

Using a relative import pointing to node_modules does work correctly.

avatar
May 13th 2020

it seems counterintuitive having to do that though 🙂

avatar
May 13th 2020

Agreed, same thing for importing css through @import in the style section, just started looking through the code for the resolver to see what changed.

avatar
May 13th 2020

Originally we treated direct imports to .css as a request to js code that inserts the css, and .css?raw returns the actual css. However this requires us to be able to differentiate between .css requests that are from JS vs. ones made by <link rel="...">. Previously we checked the request's referer header to do that, which works in Chrome and FF, but breaks in Safari because Safari uses the page url instead of the script url as the referer for native ES module imports...

So the new approach rewrites js imports to css to .css?import, but it now misses resolved bare modules and @import inside css.

There are definitely ways to fix it, just explaining the change here.

avatar
May 13th 2020

understandable, though a little disappointed that safari is doing something different than the two major browsers 😃

avatar
Jun 1st 2020

Looks like this is broken again, running 0.19.3, tested it as far back as 0.18.0

avatar
Jun 1st 2020

import normalize.css is also broken(https://github.com/necolas/normalize.css/), error msg: The server responded with a non-JavaScript MIME type of "text/css". Both import normalize.css?raw and import normalize.css?import work well.

avatar
Jun 1st 2020

Fixed in 6e06fcf - added a test for it to avoid regressions...