[examples] Create nextjs example using styled-components #27088

hboylan · 2021-07-03T14:25:04Z

I have followed (at least) the PR section of the contributing guide.

Fixes #27087

mui-pr-bot · 2021-07-03T14:27:02Z

No bundle size changes (experimental)

Generated by 🚫 dangerJS against 6ae845b

eps1lon

Looks good. Anything left to do?

mnajdova

This is not currently working. The PR is opened to illustrate the problem as stated in #27087 (comment) Will look into it later today.

hboylan · 2021-07-05T14:44:38Z

Just updated _document.tsx to match the official next with-styled-components example, but still no luck. I'm not sure if MUI requires something to be done on the server in addition to the styled-components logic.

mnajdova · 2021-07-05T15:08:23Z

Just updated _document.tsx to match the official next with-styled-components example, but still no luck. I'm not sure if MUI requires something to be done on the server in addition to the styled-components logic.

There shouldn't be anything else required, the create-react-app-with-styled-components-typescript doesn't need anything else. I tried adding webpack5: false in next.config.js, but that didn't help either. On our docs, we use the babel.config.js for configuring the alias.

On an unrelated note, I would maybe update the README.md to:

index ac99c62162..d2230dae29 100644
--- a/examples/nextjs-with-styled-components-typescript/README.md
+++ b/examples/nextjs-with-styled-components-typescript/README.md
@@ -22,7 +22,7 @@ or:

 ## The idea behind the example

-The project uses [Next.js](https://github.com/zeit/next.js), which is a framework for server-rendered React apps. It includes `@material-ui/core` and its peer dependencies, including `emotion`, the default style engine in Material-UI v5. If you prefer, you can [use styled-components instead](https://next.material-ui.com/guides/interoperability/#styled-components).
+The project uses [Next.js](https://github.com/zeit/next.js), which is a framework for server-rendered React apps. It includes `@material-ui/core` and its peer dependencies, including `styled-components`, which is used instead of the default style engine in Material-UI v5.

 ## The link component

hboylan · 2021-07-05T15:25:12Z

@mnajdova I made the recommended change to the README.

The CRA example you referenced is entirely client-side rendered, but NextJS relies on server-side rendering. This makes me think the ServerStyleSheets referenced in the v4 docs will be required.
https://material-ui.com/guides/server-rendering/#handling-the-request

hboylan · 2021-07-05T15:30:53Z

This fixes the original error Error: Cannot find module '@emotion/styled'.

Now, the example renders when the app initially starts. It has proper styling, but warns:

Warning: Expected server HTML to contain a matching <div> in <div>.

Then, if the app reloads for any reason, the styles are missing with the slightly different warning:

Warning: Did not expect server HTML to contain a <style> in <div>.

🤔

mnajdova · 2021-07-05T15:36:46Z

This fixes the original error Error: Cannot find module '@emotion/styled'.

If I need to guess, it would be the changes in .babelrc that fixed the issue.

Now, the example renders when the app initially starts. It has proper styling, but warns:

Warning: Expected server HTML to contain a matching
in
.
Then, if the app reloads for any reason, the styles are missing with the slightly different warning:

Warning: Did not expect server HTML to contain a <style> in
.
🤔

How about we remove the dependency on @material-ui/styles, and any code associated with it? Ideally, we wouldn't like to bundle JSS by default in the examples.

hboylan · 2021-07-05T15:41:10Z

~~According to the docs, it's necessary to import ServerStyleSheets from @material-ui/styles to support SSR.~~

The ServerStyleSheets component is no longer exported from @material-ui/core/styles. You should import it directly from @material-ui/styles.

https://next.material-ui.com/guides/migration-v4/#material-ui-core-styles

Edit: Looks like the babel changes fixed it like you said and @material-ui/styles isn't necessary. 👍🏻

I was able to resolve the issue where styles go missing on reload by removing StyledEngineProvider, but the initial warning still persists.

Warning: Expected server HTML to contain a matching <div> in <div>.

mnajdova · 2021-07-05T15:46:52Z

According to the docs, it's necessary to import ServerStyleSheets from @material-ui/styles to support SSR.

The ServerStyleSheets component is no longer exported from @material-ui/core/styles. You should import it directly from @material-ui/styles.

https://next.material-ui.com/guides/migration-v4/#material-ui-core-styles

I see the confusion, we should update the docs to state that this is only required if JSS is used.

hboylan · 2021-07-05T16:25:13Z

The warning appears related to babel-plugin-styled-components, but I can't seem to squash the issue.

By adding a unique identifier to every styled component, this plugin avoids checksum mismatches due to different class generation on the client and on the server. If you do not use this plugin and try to server-side render styled-components React will complain with an HTML attribute mismatch warning during rehydration.

https://styled-components.com/docs/tooling#serverside-rendering

mnajdova · 2021-07-05T16:44:06Z

@hboylan I've just tried again the example, and I am still seeing

Server Error
Error: Cannot find module '@emotion/styled'
Require stack:
- C:\Users\mnajd\Desktop\examples tests\2021-07-05\nextjs-with-styled-components-typescript\node_modules\@material-ui\styled-engine\node\index.js

It may be related to the latest changes in .babelrc

hboylan · 2021-07-05T17:15:59Z

Hmm. I get that error again after removing the root node_modules. I had initially installed the root dependencies to run yarn lint && yarn prettier without realizing the example project would pick them up. 😞

hboylan · 2021-07-05T17:28:00Z

As far as I can tell, @material-ui/styled-engine is not being replaced by @material-ui/styled-engine-sc because the final stack item references it.

Full stack

Error: Cannot find module '@emotion/styled'
Require stack:
- /Users/hugh/Development/node/material-ui/examples/nextjs-with-styled-components-typescript/node_modules/@material-ui/styled-engine/node/index.js
- /Users/hugh/Development/node/material-ui/examples/nextjs-with-styled-components-typescript/node_modules/@material-ui/system/index.js
- /Users/hugh/Development/node/material-ui/examples/nextjs-with-styled-components-typescript/node_modules/@material-ui/core/node/styles/adaptV4Theme.js
- /Users/hugh/Development/node/material-ui/examples/nextjs-with-styled-components-typescript/node_modules/@material-ui/core/node/styles/index.js
- /Users/hugh/Development/node/material-ui/examples/nextjs-with-styled-components-typescript/.next/server/pages/_document.js
- /Users/hugh/Development/node/material-ui/examples/nextjs-with-styled-components-typescript/node_modules/next/dist/next-server/server/require.js
- /Users/hugh/Development/node/material-ui/examples/nextjs-with-styled-components-typescript/node_modules/next/dist/next-server/server/load-components.js
- /Users/hugh/Development/node/material-ui/examples/nextjs-with-styled-components-typescript/node_modules/next/dist/next-server/server/api-utils.js
- /Users/hugh/Development/node/material-ui/examples/nextjs-with-styled-components-typescript/node_modules/next/dist/next-server/server/next-server.js
- /Users/hugh/Development/node/material-ui/examples/nextjs-with-styled-components-typescript/node_modules/next/dist/server/next.js
- /Users/hugh/Development/node/material-ui/examples/nextjs-with-styled-components-typescript/node_modules/next/dist/server/lib/start-server.js
- /Users/hugh/Development/node/material-ui/examples/nextjs-with-styled-components-typescript/node_modules/next/dist/cli/next-dev.js
- /Users/hugh/Development/node/material-ui/examples/nextjs-with-styled-components-typescript/node_modules/next/dist/bin/next

mnajdova · 2021-07-19T14:16:54Z

@hboylan are there other things to be addressed? I've reverted the changes outside of the example.

I could not spot any issues in the production build (I've tested with both JS enabled and disabled).

In addition, is the .eslintrc necessary in the new example? Can we omit it? Looks like yarn lint is currently failing :\

hboylan · 2021-07-19T16:27:59Z

@mnajdova New Next.js projects are initialized with .eslintrc, but I initially left it out of the example because it doesn't play well inside the MUI repo for some reason. You had added it, but I don't think it's necessary for an example project.

Otherwise, I just want to be sure the SSR warning is resolved. Right now I'm seeing it again. Is anyone else able to reproduce?

pull latest changes
rm -rf .next
yarn dev
Warning: Prop `className` did not match.

mnajdova · 2021-07-19T16:43:39Z

@mnajdova New Next.js projects are initialized with .eslintrc, but I initially left it out of the example because it doesn't play well inside the MUI repo for some reason. You had added it, but I don't think it's necessary for an example project.

Ah right, sorry my bad, let's remove it then, it was there just because I started from a new project 👍 Good catch!

Otherwise, I just want to be sure the SSR warning is resolved. Right now I'm seeing it again. Is anyone else able to reproduce

Is it happening in dev mode only? I tested prod build there weren't any issues. Is it related to Material-UI? Can we reproduce it with styled-components only project?

hboylan · 2021-07-19T16:56:04Z

Removed the eslint config.

yarn build && yarn start works just fine, but yarn dev logs the warning on page refresh. I believe it's an SSR-only issue.

mnajdova · 2021-07-19T16:59:54Z

yarn build && yarn start works just fine, but yarn dev logs the warning on page refresh. I believe it's an SSR-only issue.

Did you test if disabled JavaScript works in dev and prod? I would say if it works we can merge, as it seems like it is only a warning (I know it's not ideal, but we can solve it later if there is an actual bug that something is not working).

mnajdova · 2021-07-19T17:07:27Z

@hboylan I've tested again - with disabled JavaScript, both dev and prod are working fine, which would mean SSR is working. I think we can ignore the warning in dev mode for now.

hboylan · 2021-07-19T17:08:13Z

That works for me. It's just odd to me that it's a sporadic warning.

mnajdova

Thanks @hboylan a lot for initiating this effort :)

mnajdova · 2021-07-19T17:09:38Z

That works for me. It's just odd to me that it's a sporadic warning.

We can always improve in the future. We are now at least unlocking developers who cannot get started with configuring nextjs with styled-components and Material-UI :)

eps1lon · 2021-07-20T06:56:49Z

I think we can ignore the warning in dev mode for now.

That is a blocking issue since it means concurrent rendering is also likely broken.

mnajdova · 2021-07-20T14:43:27Z

That is a blocking issue since it means concurrent rendering is also likely broken.

@eps1lon ok, I agree, I spent one more hour on this and got back to vercel/next.js#7322. I remember we had the same issue on our docs, it's still there if we run it with styled-components. Also, comments from the author like this - vercel/next.js#7322 (comment) doesn't look like the issue will be resolved soon.

We can keep the PR open, or close it, or merge it with link to the issue in the readme that will explain why the warning is there. I hope that if we merge, it's more likely that someone from the community will fix it. In contrast, it we don't merge the example, we are likely going to receive an issue about this again.

Let me know what you think. Again, the warning is not showing in production.

eps1lon · 2021-07-22T07:32:55Z

@eps1lon ok, I agree, I spent one more hour on this and got back to vercel/next.js#7322.

I would encourage opening a new issue with the latest dependencies in styled-components. The issue linked is based off of older versions. The comments after closing are unhelpful and I would ignore them as well if I were a maintainer of styled-components.

Let me know what you think. Again, the warning is not showing in production.

It's a dev-only warning. Obviously it doesn't show in production.

We should have an issue open about StrictMode incompatibility of styled-components.

mnajdova · 2021-07-22T09:08:35Z

I found this babel config that should fix the issue of styled-components and nextjs.

{
  "env": {
    "development": {
      "presets": ["next/babel"],
      "plugins": [
        [
          "babel-plugin-styled-components",
          { "ssr": true, "displayName": true, "preprocess": false }
        ]
      ]
    },
    "production": {
      "plugins": [
        [
          "babel-plugin-styled-components",
          { "ssr": true, "displayName": true, "preprocess": false }
        ]
      ],
      "presets": ["next/babel"]
    },
    "test": {
      "presets": ["next/babel"]
    }
  },
  "plugins": [
    [
      "babel-plugin-styled-components",
      { "ssr": true, "displayName": true, "preprocess": false }
    ]
  ]
}

However, I think I understand why it is not working in our example - styled-components/babel-plugin-styled-components#230 The import to the styled utility is not coming from styled-components so it is ignored by the plugin. We've got similar issue for emotion too - #26366

I will look into this next week. See if we can re-use the existing plugins or need new ones. Would be great if these plugins supported whitelist imports that the plugin could consider.

eps1lon

I will look into this next week. See if we can re-use the existing plugins or need new ones. Would be great if these plugins supported whitelist imports that the plugin could consider.

Thanks for looking into it. Merging problematic code isn't a problem. But we do need to understand the problem and have a plan. Otherwise we're just piling on technical debt.

mnajdova · 2021-07-22T09:35:06Z

Thanks for looking into it. Merging problematic code isn't a problem. But we do need to understand the problem and have a plan. Otherwise we're just piling on technical debt.

Agree, lesson learned for me :) At least we know what is the issue right now and can plan fix for it

oliviertassinari · 2021-07-22T22:32:57Z

Should we link this new example in https://next.material-ui.com/getting-started/example-projects/#official-examples?

I'm curious. Did we consider this solution?

diff --git a/next.config.js b/next.config.js
deleted file mode 100644
index bd89a75..0000000
--- a/next.config.js
+++ /dev/null
@@ -1,12 +0,0 @@
-const withTM = require('next-transpile-modules')(['@material-ui/core', '@material-ui/system']); // pass the modules you would like to see transpiled
-
-module.exports = withTM({
-  reactStrictMode: true,
-  webpack: (config) => {
-    config.resolve.alias = {
-      ...config.resolve.alias,
-      '@material-ui/styled-engine': '@material-ui/styled-engine-sc',
-    };
-    return config;
-  },
-});
diff --git a/package.json b/package.json
index 38148b0..7943d0a 100644
--- a/package.json
+++ b/package.json
@@ -10,9 +10,8 @@
   },
   "dependencies": {
     "@material-ui/core": "next",
-    "@material-ui/styled-engine-sc": "next",
+    "@material-ui/styled-engine": "npm:@material-ui/styled-engine-sc@next",
     "next": "latest",
-    "next-transpile-modules": "latest",
     "react": "latest",
     "react-dom": "latest",
     "react-is": "latest",
diff --git a/tsconfig.json b/tsconfig.json
index 442fc43..750d409 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,9 +13,6 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "paths": {
-      "@material-ui/styled-engine": ["./node_modules/@material-ui/styled-engine-sc"] // this mapping is relative to "baseUrl"
-    }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]

It seems to work, package alias are supported by npm since 6.9.0. I also can't trigger the warnings in dev mode.

The same question would go for https://github.com/mui-org/material-ui/tree/next/examples/create-react-app-with-styled-components and https://next.material-ui.com/guides/styled-engine/#how-to-switch-to-styled-components.

mnajdova · 2021-07-23T15:36:39Z

@oliviertassinari I am getting this error when trying to run yarn dev when the propose changes are applied:

yarn run v1.22.5
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
error - ./node_modules/@material-ui/system/node_modules/@material-ui/styled-engine/GlobalStyles/GlobalStyles.js:3:0
Module not found: Can't resolve '@emotion/react'
null

Posting some more investigation. Looks like babel-plugin-styled-components has an option for setting more top level imports, like:

 [
      "babel-plugin-styled-components",
      { 
        "ssr": true, "displayName": true,
        "preprocess": false,
        "topLevelImportPaths": ["@material-ui/styled-engine", "@material-ui/styled-engine-sc", "@material-ui/core/styles"] }
    ]

But this didn't solve the issue, probably because the code itself lives in node_modules/@material-ui/core :\

oliviertassinari · 2021-07-25T18:44:59Z

@mnajdova Oh yeah, I tested it with npm but not yarn. For npm + yarn support, we need an extra:

     "react-dom": "latest",
     "react-is": "latest",
     "styled-components": "latest"
   },
+  "resolutions": {
+    "@material-ui/styled-engine": "npm:@material-ui/styled-engine-sc@next"
+  },
   "devDependencies": {

to make it work.

agboolaidris · 2021-09-22T18:32:46Z

I am getting this error in MUI 5

warning prop classname did not match. server material ui

docs: create nextjs example using styled-components

9d0c1f1

hboylan mentioned this pull request Jul 3, 2021

[examples] Add example to alias styled-components with Next.js #27087

Closed

2 tasks

github-actions bot mentioned this pull request Jul 3, 2021

Update snapshots for pr/27088 eps1lon/mui-scripts-incubator#2697

Closed

eps1lon added 4 commits July 5, 2021 11:45

format

ae74330

the examples must be considered roots

72e0add

Disable linting

bd4e038

fix lint issues

d6421f5

eps1lon changed the title ~~docs: create nextjs example using styled-components~~ [examples] create nextjs example using styled-components Jul 5, 2021

eps1lon added the docs Improvements or additions to the documentation label Jul 5, 2021

eps1lon approved these changes Jul 5, 2021

View reviewed changes

use same structure as the other demos

b796f3e

mnajdova requested changes Jul 5, 2021

View reviewed changes

refactor: use official nextjs example with-styled-components

7f77926

fix: use ServerStyleSheets to render mui styles on server

9997c69

fix: remove StyledEngineProvider from _app

c4f8d83

refactor: remove @material-ui/styles

f2738aa

refactor: update variable name

bac6a23

refactor: copy .babelrc from nextjs with-styled-components example

75c1cb0

mnajdova added 2 commits July 19, 2021 16:13

prettier & revert non example changes

c9c0137

revert demo changes

2245f49

refactor: remove eslint config

6ae845b

mnajdova approved these changes Jul 19, 2021

View reviewed changes

eps1lon approved these changes Jul 22, 2021

View reviewed changes

mnajdova merged commit 6cf14fd into mui:next Jul 22, 2021

oliviertassinari changed the title ~~[examples] create nextjs example using styled-components~~ [examples] Create nextjs example using styled-components Jul 22, 2021

oliviertassinari mentioned this pull request Jul 29, 2021

Next.js + Material UI v5 styled-component example is still showing className mismatch error #27512

Open

mnajdova mentioned this pull request Aug 3, 2021

[examples] Fix nextjs with styled-components example #27583

Merged

This was referenced Aug 20, 2021

create-react-app-with-styled-components fails with Can't resolve '@emotion/react' #27846

Closed

Revert "[examples] Update create-react-app examples with styled-components to use package aliases" #27917

Merged

This comment has been minimized.

Sign in to view

suejinkim20 mentioned this pull request Nov 16, 2021

Content layouts RENCI/nc-enviroscan-client#3

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[examples] Create nextjs example using styled-components #27088

[examples] Create nextjs example using styled-components #27088

hboylan commented Jul 3, 2021

mui-pr-bot commented Jul 3, 2021 •

edited

Loading

eps1lon left a comment

mnajdova left a comment

hboylan commented Jul 5, 2021

mnajdova commented Jul 5, 2021

hboylan commented Jul 5, 2021

hboylan commented Jul 5, 2021

mnajdova commented Jul 5, 2021

hboylan commented Jul 5, 2021 •

edited

Loading

mnajdova commented Jul 5, 2021

hboylan commented Jul 5, 2021 •

edited

Loading

mnajdova commented Jul 5, 2021

hboylan commented Jul 5, 2021

hboylan commented Jul 5, 2021

mnajdova commented Jul 19, 2021

hboylan commented Jul 19, 2021

mnajdova commented Jul 19, 2021

hboylan commented Jul 19, 2021

mnajdova commented Jul 19, 2021

mnajdova commented Jul 19, 2021

hboylan commented Jul 19, 2021

mnajdova left a comment

mnajdova commented Jul 19, 2021

eps1lon commented Jul 20, 2021

mnajdova commented Jul 20, 2021

eps1lon commented Jul 22, 2021 •

edited

Loading

mnajdova commented Jul 22, 2021

eps1lon left a comment

mnajdova commented Jul 22, 2021

oliviertassinari commented Jul 22, 2021 •

edited

Loading

mnajdova commented Jul 23, 2021

oliviertassinari commented Jul 25, 2021 •

edited

Loading

agboolaidris commented Sep 22, 2021

This comment has been minimized.

[examples] Create nextjs example using styled-components #27088

[examples] Create nextjs example using styled-components #27088

Conversation

hboylan commented Jul 3, 2021

mui-pr-bot commented Jul 3, 2021 • edited Loading

eps1lon left a comment

Choose a reason for hiding this comment

mnajdova left a comment

Choose a reason for hiding this comment

hboylan commented Jul 5, 2021

mnajdova commented Jul 5, 2021

hboylan commented Jul 5, 2021

hboylan commented Jul 5, 2021

mnajdova commented Jul 5, 2021

hboylan commented Jul 5, 2021 • edited Loading

mnajdova commented Jul 5, 2021

hboylan commented Jul 5, 2021 • edited Loading

mnajdova commented Jul 5, 2021

hboylan commented Jul 5, 2021

hboylan commented Jul 5, 2021

mnajdova commented Jul 19, 2021

hboylan commented Jul 19, 2021

mnajdova commented Jul 19, 2021

hboylan commented Jul 19, 2021

mnajdova commented Jul 19, 2021

mnajdova commented Jul 19, 2021

hboylan commented Jul 19, 2021

mnajdova left a comment

Choose a reason for hiding this comment

mnajdova commented Jul 19, 2021

eps1lon commented Jul 20, 2021

mnajdova commented Jul 20, 2021

eps1lon commented Jul 22, 2021 • edited Loading

mnajdova commented Jul 22, 2021

eps1lon left a comment

Choose a reason for hiding this comment

mnajdova commented Jul 22, 2021

oliviertassinari commented Jul 22, 2021 • edited Loading

mnajdova commented Jul 23, 2021

oliviertassinari commented Jul 25, 2021 • edited Loading

agboolaidris commented Sep 22, 2021

This comment has been minimized.

mui-pr-bot commented Jul 3, 2021 •

edited

Loading

hboylan commented Jul 5, 2021 •

edited

Loading

hboylan commented Jul 5, 2021 •

edited

Loading

eps1lon commented Jul 22, 2021 •

edited

Loading

oliviertassinari commented Jul 22, 2021 •

edited

Loading

oliviertassinari commented Jul 25, 2021 •

edited

Loading