search

peerigon / extract-loader

webpack loader to extract HTML and CSS from the bundle
The Unlicense
317 stars 73 forks source link

Extract loader doesn't work with css-loader 5.x #99

Open edariedl opened 3 years ago

edariedl commented 3 years ago

Issue was originally raised in css loader from someone else https://github.com/webpack-contrib/css-loader/issues/1215. It was closed as a problem in extract-loader. I have encountered the same problem today.

css loader changed the way css with sourcemaps are handled and they have added this method https://github.com/webpack-contrib/css-loader/blob/master/src/runtime/cssWithMappingToString.js

When we importe css file from some node module for (me it was tippy.js via @import 'tippy.js/dist/tippy.css';), following errors is raised

ERROR in ./assets/stylesheets/web.scss
Module build failed (from ./node_modules/extract-loader/lib/extractLoader.js):
TypeError: Cannot read property 'sources' of undefined
    at cssWithMappingToString (/node_modules/css-loader/dist/runtime/cssWithMappingToString.js:25:33)
    at /node_modules/css-loader/dist/runtime/api.js:14:21
    at Array.map (<anonymous>)
    at Array.toString (/node_modules/css-loader/dist/runtime/api.js:13:17)
    at extractExports (/node_modules/extract-loader/lib/extractLoader.js:182:269)
    at /node_modules/extract-loader/lib/extractLoader.js:171:45
    at Generator.next (<anonymous>)
    at step (/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
    at /node_modules/babel-runtime/helpers/asyncToGenerator.js:28:13

I tried to dig a bit deeper and it looks like css-loader gets this array to process from extract-loader

[
  null,
  '__EXTRACT_LOADER_PLACEHOLDER__92066672257124958810185066705107',
  ''
]

which causes an error in the method mentioned above.

thecreazy commented 3 years ago

same problem !

eliseumds commented 3 years ago

Anyone's got a fix?

xenobytezero commented 3 years ago

Also hit this issue today. Spent half a day trying to tweak extract-loader, half trying to move to Snowpack. Neither was a success.

I'm using it as part of a sass-loader -> css-loader -> extract-loader -> lit-scss-loader chain, and is the core of my workflow so really want this to work again.

My Webpack internals logic is lacking so I was just kind of flailing, would be happy to try and help fix this though.

Eventually my workaround was to change the @import to a @use when loading a node_modules CSS file. Everything worked fine after that this might not work for everyone.