[styled-engine-sc] Unable to use styled-engine-sc on next.js/yarn application

giorgiPapava commented 2 years ago

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 ```

michaldudak commented 2 years ago

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.

mnajdova commented 2 years ago

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",

div-cowboy commented 1 year ago

Has this been addressed? Still experiencing it

mui / material-ui