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.
Broken CSS assets emitted / omitted with wmr build
See original GitHub issueI’m seeing some very weird behaviour when using wmr build with CSS assets - in some instances the assets are being incorrectly combined, or left out entirely from dist
Test case
index.html
<!DOCTYPE html>
<html lang="en">
<body>
<script type="module" src="/index.js"></script>
</body>
</html>
index.js
import './a.css';
import './b.css';
a.css and b.css are both completely empty
What appears to matter here is that a.css and b.css have exactly the same source content (the effect is the same if they both contain some actual CSS but their file contents are identical) - see below
Expected
I expect at least one CSS file under dist/assets to be created
Actual
The generated index.[hash].js references /assets/a.[hash].css but no css file is emitted.
Remarks
I’ve seen variants of this where some CSS is emitted but not all of it, and the JS references a missing CSS asset. I’ve not been able to reproduce this reliably without creating a quite complicated dependency graph though. I believe in the project where I’m seeing these errors I may have some duplicated CSS files somewhere.
I suspect this might be happening because rollup is clever and has helpers to deduplicate emitted file names if they have the exact same content - when I enable DEBUG the merging adjacent CSS assets log in optimize-graph-plugin logs assets/a.92dace5d.css, assets/a.92dace5d.css (i.e. the “a” file twice rather than “a” then “b”) - and perhaps WMR isn’t expecting to see multiple of the same file in chunk.referencedFiles
Issue Analytics
- State:
- Created 3 years ago
- Comments:5 (5 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
I guess the empty-files case is a bit extreme and contrived, so perhaps a more concrete example that illustrates the bug, and also the importance of preserving the CSS order:
index.js
a.css
b.css
c.css
(i.e. same as a.css)
It’s still a bit contrived, but perhaps the a.css and b.css imports are buried in the dependency tree and you’re importing c.css last to ensure your CSS overrides definitely take precedence
Currently with this input, WMR doesn’t output any CSS at all since it’s accidentally deleting the asset for
a.css- which is the one everything’s being combined into.But it’d also be important not to simply deduplicate
toMergeby first occurrence - the contents ofc.cssneed to come last to ensure the correct final value oftext-decoration: underline. It might be safe to use the last occurrence of each, but I don’t know if there may be more edge cases I’m missing thereFixed in #385