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.

Webpack 5 production builds have no styles

See original GitHub issue

Current behavior:

Development build produces styled components like expected, while the production build doesn’t style anything at all, although there are class names added.

I tried both using the css-prop transform preset and the plugin & preset combo like https://emotion.sh/docs/css-prop##babel-preset suggested, but both produce nothing.

The dev build on the other hand is okay with just the preset.

The only Emotion things that I can see in the final build are a

<style data-emotion="css" data-s=""></style>

tag and the css classes, also there are a lot of emotions in the source files, so something did build, its just that that something is probably not appending the style tags into the header ?

To reproduce:

  1. git clone https://github.com/Twiggeh/emotion-no-prod-styles
  2. run cd emotion-no-prod-styles/client/ && yarn install && yarn run build
  3. run cd ../server && yarn install && node ./src/app.js

Expected behavior:

To get styles outputted for when I use the development build.

Environment information:

  • react version: 17.0.1
  • @emotion/react version: 11.1.5

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

4reactions
Andaristcommented, Mar 10, 2021

You can fix this by removing @emotion/styled from your vendors: https://github.com/Twiggeh/emotion-no-prod-styles/blob/9e5c6e2cc7f7708ec0a968cd6ae7de26fbe8df89/client/config/webpack.prod.js#L25

I’m not a webpack expert (although I know a pretty decent amount of things about it) so I’m not 100% sure why this happens - I would kinda still expect your module graph to be split correctly~. Especially when I’ve tried to add @emotion/react to your vendors as well but that didn’t work.

In the webpack docs for entry u might find a golden rule though:

Simple rule: one entry point per HTML page. SPA: one entry point, MPA: multiple entry points.

You break that rule because you expect 2 entry bundles to be injected into a single HTML file (and this breaks stuff). On the other hand - this rule is pretty quickly contradicted in the same doc page when describing what should be done for exactly what you are trying to do: creating a vendors bundle. It describes how you should use dependOn: https://webpack.js.org/configuration/entry-context/#dependencies

You can try this patch to see the issue being fixed:

diff --git a/client/config/webpack.prod.js b/client/config/webpack.prod.js
index df87db8..ac811ba 100644
--- a/client/config/webpack.prod.js
+++ b/client/config/webpack.prod.js
@@ -16,13 +16,17 @@ console.log(mode);
 
 module.exports = {
        entry: {
-               main: path.resolve(__dirname, '../src/index.js'),
+               main: {
+                       import: path.resolve(__dirname, '../src/index.js'),
+                       dependOn: ['vendor']
+               },
                vendor: [
                        'react',
                        'react-dom',
                        'scheduler',
                        'object-assign',
                        '@emotion/styled',
+                       '@emotion/react',
                        'prop-types',
                ],
        },
1reaction
Andaristcommented, Mar 10, 2021

Without dependOn you end up with 2 Emotion runtimes being loaded - there is still an issue there, it just might not manifest itself that easily. I encourage you to use the dependOn solution as it seems the proper one and more future-proof.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Webpack 5 - some styles are missing in production but exist in ...
seems like the build hash of your two main.<hash>.css files are different. Could you check whether it might be a caching problem or...
Read more >
Production | webpack
In this guide, we'll dive into some of the best practices and utilities for building a production site or application.
Read more >
webpack Tutorial: How to Set Up webpack 5 From Scratch
Note: This is a setup for development. For production, you will use MiniCssExtractPlugin instead of style-loader , which will export the CSS as ......
Read more >
A mostly complete guide to webpack 5 (2020)
Common JS modules; AMD modules; CSS import; Images url; ES modules. That is, webpack is able to ingest dependencies from any of these ......
Read more >
Webpack 5 Adoption #23498 - vercel/next.js - GitHub
To reproduce, simply build without the flag for webpack 5, you'll get 178 KB. ... Always check for unix-style path, as webpack sometimes...
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