material-ui
material-ui copied to clipboard
Published
20 hours ago โข
mui
mui
[styled-engine-sc] Unable to use styled-engine-sc on next.js/yarn application
Duplicates
- [X] I have searched the existing issues
Latest version
- [X] I have tested the latest version
Current behavior ๐ฏ
I have production application on next.js, MUI and styled components. I had issue of styles flickering on first load. As I found out it was due to MUI using emotion internally and I was using styled-components to override styles. So, I switched to styled-engine-sc Module not found: Can't resolve '@mui/styled-engine' when trying to run dev server. I had 2 possible solutions: to remove yarn.lock file and go and reinstall yarn or manually install @mui/styled-engine-sc. Neither of those options are okay to me. Deleting yarn.lock file only temporarily solves the issue, after I add new library or remove node_modules and reinstall packages it does not seem to work.
The problem comes from node_modules/@mui not containing styled-engine-sc folder inside.
Expected behavior ๐ค
It's expected to use styled-engine-sc without any problems
Steps to reproduce ๐น
I can't give you my repo since it's production application but you can try cloning this repo. The first time you do yarn everything works fine, but after you delete node_modules and run yarn the application breaks.
Context ๐ฆ
next.config.js
/* eslint-disable no-param-reassign */
/* eslint-disable @typescript-eslint/no-var-requires */
const withTM = require('next-transpile-modules')(['@mui/material', '@mui/system', '@mui/lab']);
const { i18n } = require('./next-i18next.config');
module.exports = withTM({
i18n,
reactStrictMode: true,
compiler: {
styledComponents: true,
},
env: {
STRAPI_API_URL: process.env.STRAPI_API_URL,
API_BASE_URL: process.env.API_BASE_URL,
BEESENDER_EN_KEY: process.env.BEESENDER_EN_KEY,
REVALIDATE_SECRET: process.env.REVALIDATE_SECRET,
GOOGLE_RE_CAPTCHA: process.env.GOOGLE_RE_CAPTCHA,
GTM_ID: process.env.GTM_ID,
BEESENDER_GE_KEY: process.env.BEESENDER_GE_KEY,
GOOGLE_RE_CAPTCHA_LOCAL: process.env.GOOGLE_RE_CAPTCHA_LOCAL,
},
webpack: (config) => {
config.resolve.alias = {
...config.resolve.alias,
'@mui/styled-engine': '@mui/styled-engine-sc',
};
return config;
},
});
package.json
{
"private": true,
"scripts": {
"dev": "yarn type-generate && next dev",
"build": "yarn type-generate && next build",
"start": "next start -p 1919",
"start2": "next start",
"type-check": "tsc --noEmit",
"lint": "eslint --ext .js,.jsx,.ts,.tsx .",
"format": "prettier --write \"**/*.{js,jsx,json,md,ts,tsx}\"",
"check-all": "yarn lint && yarn type-check",
"prepare": "husky install",
"type-generate": "graphql-codegen --config codegen.js",
"tg": "yarn type-generate",
"ca": "yarn check-all"
},
"resolutions": {
"@mui/styled-engine": "npm:@mui/styled-engine-sc@latest",
"@types/react": "17.0.2",
"@types/react-dom": "17.0.2"
},
"dependencies": {
"@apollo/client": "^3.5.5",
"@mui/icons-material": "^5.8.3",
"@mui/lab": "^5.0.0-alpha.85",
"@mui/material": "^5.8.3",
"@mui/styled-engine": "npm:@mui/styled-engine-sc@latest",
"@mui/styled-engine-sc": "latest",
"@mui/styles": "^5.8.3",
"@mui/system": "^5.8.3",
"@next/env": "^12.0.9",
"@react-google-maps/api": "^2.7.0",
"@react-spring/parallax": "^9.3.1",
"@types/qs": "^6.9.7",
"@types/react-animate-on-scroll": "^2.1.5",
"@types/react-datepicker": "^4.3.4",
"@types/react-google-recaptcha": "^2.1.5",
"@types/react-gtm-module": "^2.0.1",
"@types/react-html-parser": "^2.0.2",
"axios": "^0.24.0",
"babel-plugin-styled-components": "^2.0.1",
"bezier-easing": "^2.1.0",
"chart.js": "^3.7.1",
"clsx": "^1.1.1",
"date-fns": "^2.27.0",
"disable-scroll": "^0.6.0",
"editorjs-blocks-react-renderer": "^1.2.4",
"firebase": "^9.0.2",
"formik": "^2.2.9",
"graphql": "^16.0.1",
"gsap": "^3.9.1",
"lodash": "^4.17.21",
"next": "^12.1.6",
"next-i18next": "^11.0.0",
"next-transpile-modules": "^9.0.0",
"object-to-formdata": "^4.4.2",
"qs": "^6.10.3",
"rc-slider": "^10.0.0-alpha.5",
"react": "^17.0.2",
"react-animate-on-scroll": "^2.1.5",
"react-autosuggest": "^10.1.0",
"react-chartjs-2": "^4.0.1",
"react-datepicker": "^4.7.0",
"react-device-detect": "^2.2.2",
"react-dom": "^17.0.2",
"react-google-recaptcha": "^2.1.0",
"react-gtm-module": "^2.0.11",
"react-hotjar": "^5.0.0",
"react-html-parser": "^2.0.2",
"react-intersection-observer": "^8.33.1",
"react-otp-input": "^2.4.0",
"react-query": "^3.34.7",
"react-scroll": "^1.8.4",
"react-select": "^5.2.2",
"react-spring": "^9.3.2",
"react-toastify": "^8.1.0",
"sharp": "^0.29.3",
"simplebar-react": "^2.3.6",
"styled-components": "^5.3.3",
"swiper": "^7.3.1",
"yup": "^0.32.11",
"zustand": "^3.7.1"
},
"devDependencies": {
"@graphql-codegen/cli": "2.3.0",
"@graphql-codegen/introspection": "2.1.0",
"@graphql-codegen/typescript": "2.4.1",
"@graphql-codegen/typescript-operations": "2.2.1",
"@graphql-codegen/typescript-react-apollo": "3.2.2",
"@next/eslint-plugin-next": "^12.0.8",
"@types/firebase": "^3.2.1",
"@types/graphql": "^14.5.0",
"@types/lodash": "^4.14.178",
"@types/node": "^12.12.21",
"@types/react": "^17.0.2",
"@types/react-autosuggest": "^10.1.5",
"@types/react-dom": "^17.0.1",
"@types/react-scroll": "^1.8.3",
"@types/styled-components": "^5.1.25",
"@typescript-eslint/eslint-plugin": "^4.31.2",
"@typescript-eslint/parser": "^4.31.2",
"eslint": "^7.32.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-import-resolver-typescript": "^2.5.0",
"eslint-plugin-import": "^2.24.2",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.27.1",
"eslint-plugin-react-hooks": "^4.2.0",
"husky": "^7.0.2",
"lint-staged": ">=10",
"prettier": "^2.5.0",
"typescript": "^4.4.3"
},
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx}": [
"yarn tg",
"prettier --write",
"eslint --fix",
"bash -c tsc --noEmit"
]
}
}
_document.tsx
import Document, {
Html, Head, Main, NextScript, DocumentContext,
} from 'next/document';
import { ServerStyleSheet } from 'styled-components';
export default class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () => originalRenderPage({
// eslint-disable-next-line react/jsx-props-no-spreading
enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
};
} finally {
sheet.seal();
}
}
render() {
return (
<Html>
<Head>
<meta charSet="utf-8" />
{/* <meta name="title" content="แ แแแแแแ - แขแแแฅแแ แแ, แ แแแแแแแก แกแแกแฎแ" /> */}
{/* <meta name="description" content="แแแแแฎแแแ แจแแแแแ แแแ แแแ แขแแแฅแแ แแ แแ แ แแแแแแแก แกแแกแฎแ." /> */}
{/* <meta property="og:title" content="แ แแแแแแ - แขแแแฅแแ แแ, แ แแแแแแแก แกแแกแฎแ" /> */}
{/* <meta */}
{/* property="og:description" */}
{/* content="แแแแแฎแแแ แจแแแแแ แแแ แแแ แขแแแฅแแ แแ แแ แ แแแแแแแก แกแแกแฎแ." */}
{/* /> */}
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Rebank.ge" />
<meta name="facebook-domain-verification" content="60h46y8sn6ozrmnwp5ku4he72d5a6i" />
<link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
<link rel="manifest" href="/favicon/site.webmanifest" />
<link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+Georgian:wght@100;200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+Georgian:wght@100;200;300;400;500;600;700;800;900&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
Your environment ๐
`npx @mui/envinfo`
System:
OS: macOS 12.4
Binaries:
Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
Yarn: 1.22.18 - ~/.nvm/versions/node/v16.14.2/bin/yarn
npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
Browsers:
Chrome: 102.0.5005.61
Edge: Not Found
Firefox: 101.0.1
Safari: 15.5
npmPackages:
@emotion/react: 11.9.3
@mui/icons-material: ^5.8.3 => 5.8.3
@mui/lab: ^5.0.0-alpha.85 => 5.0.0-alpha.85
@mui/material: ^5.8.3 => 5.8.3
@mui/styled-engine-sc: latest => 5.8.0
@mui/styles: ^5.8.3 => 5.8.3
@mui/system: ^5.8.3 => 5.8.3
@mui/utils: 5.8.0
@mui/x-date-pickers: 5.0.0-alpha.1
@types/react: ^17.0.2 => 17.0.45
react: ^17.0.2 => 17.0.2
react-dom: ^17.0.2 => 17.0.2
styled-components: ^5.3.3 => 5.3.5
typescript: ^4.4.3 => 4.7.3
I was able to reproduce the error locally. @mnajdova would you mind taking a look. It may be easier for you to spot if there's a config error.
Before spending some much time on this, please we aware that currently there are problems with using @mui/styled-engine-sc with next.js, see https://github.com/mui/material-ui/issues/29742
I could fix the problem locally by removing @mui/styled-engine in the package.json. This is the diff:
index f698e0f..ec8384a 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,6 @@
},
"dependencies": {
"@mui/material": "^5.2.8",
- "@mui/styled-engine": "npm:@mui/styled-engine-sc@^5.1.0",
"@mui/styled-engine-sc": "^5.1.0",
"next": "12.0.7",
"react": "17.0.2",
