razzle
razzle copied to clipboard
jaredpalmer
Material UI styles don't get included in build
🐛 Bug report
Current Behavior
When I run razzle in development mode (yarn start) all styles load in and the site looks as expected. However, when i create a build (yarn run build) and then run that build (yarn run prod:start) the styles from Material UI do not load and the site looks broken.
Expected behavior
All styles, included those from included libraries (e.g. material ui) get included in bundled css files.
Additional context
Development Mode:
Build Mode:
Your environment
| Software | Version(s) |
|---|---|
| Razzle | 3.3.13 |
| Razzle Plugins | |
| Node | 15.14.0 |
| Browser | Google Chrome |
| npm/Yarn | yarn |
| Operating System | Mac OSX 11.5.1 |
| TypeScript | Yes |
| React | 16.13.1 |
package.json
{
"name": "razzle-examples-with-typescript",
"version": "1.0.0",
"license": "MIT",
"scripts": {
"start:tsc": "tsc -b -w --preserveWatchOutput",
"start": "yarn start:tsc & razzle start",
"build": "tsc -b && razzle build",
"test": "razzle test --env=jsdom",
"start:prod": "NODE_ENV=production node build/server.js"
},
"dependencies": {
"@mui/icons-material": "^5.0.4",
"@mui/material": "^5.0.4",
"@mui/styled-engine-sc": "^5.0.3",
"@types/axios": "^0.14.0",
"@types/react-redux": "^7.1.16",
"@types/styled-components": "^5.1.9",
"axios": "^0.21.1",
"babel-plugin-styled-components": "^1.12.0",
"express": "^4.17.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-icons": "^4.2.0",
"react-redux": "^7.2.2",
"react-router-dom": "^5.1.2",
"redux-axios-middleware": "^4.0.1",
"redux-devtools-extension": "^2.13.9",
"styled-components": "^5.3.3"
},
"devDependencies": {
"@testing-library/jest-dom": "^5.5.0",
"@testing-library/react": "^10.0.3",
"@testing-library/user-event": "^10.1.0",
"@types/express": "^4.17.6",
"@types/jest": "^25.2.1",
"@types/node": "^13.13.2",
"@types/react": "^16.9.34",
"@types/react-dom": "^16.9.6",
"@types/react-router-dom": "^5.1.4",
"@types/redux-mock-store": "^1.0.2",
"@types/webpack-env": "^1.15.2",
"axios-mock-adapter": "^1.19.0",
"razzle": "^3.3.13",
"redux-mock-store": "^1.5.4",
"typescript": "^3.8.3"
}
}
There is no .env file currently - no need for it as yet.
The app uses styled components (which all seem to load fine, it's just the Mui styles which don't seem to)
Below is my server.tsx file:
import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import App from './App';
const assets = require(process.env.RAZZLE_ASSETS_MANIFEST!);
function getFullPageHTML(html: string) {
return `
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charSet='utf-8' />
<title>The Student Room</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
${
assets.client.css
? `<link rel="stylesheet" href="${assets.client.css}">`
: ''
}
${
process.env.NODE_ENV === 'production'
? `<script src="${assets.client.js}" defer></script>`
: `<script src="${assets.client.js}" defer crossorigin></script>`
}
</head>
<body>
<div id="root">${html}</div>
</body>
</html>
`;
}
function renderPage(req: express.Request, res: express.Response) {
const context = {};
const markup = renderToString(
<StaticRouter context={context} location={req.url}>
<App />
</StaticRouter>
);
res.send(getFullPageHTML(markup));
}
const server = express()
.disable('x-powered-by')
.use(express.static(process.env.RAZZLE_PUBLIC_DIR!))
.get('/*', renderPage);
export default server;
https://github.com/jaredpalmer/razzle/tree/master/examples/with-material-ui
import { ServerStyleSheets, ThemeProvider } from '@material-ui/styles';
ServerStyleSheets is no longer part of this package - so this example doesn't work