[docs] Add example for using styled-components as styled-engine

[mnajdova]

This PR adds example project of how developers may swap the styled engine from emotion to styled-components

[mui-pr-bot]

Details of bundle changes

Generated by 🚫 dangerJS against f314d6f

[mnajdova]

I've tested the project by copying and running it, works as expected. However if we try to run it directly in the examples folder, we get this errors (the same is happening with the create-react-app example):

D:\workspace\material-ui\examples\create-react-app-with-styled-components-engine>yarn start
yarn run v1.22.4
$ react-app-rewired start

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "eslint": "^6.6.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of eslint was detected higher up in the tree:

  D:\workspace\material-ui\node_modules\eslint (version: 7.10.0)

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

  5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
     This may help because npm has known issues with package hoisting which may get resolved in future versions.

  6. Check if D:\workspace\material-ui\node_modules\eslint is outside your project directory.
     For example, you might have accidentally installed something in your home folder.

  7. Try running npm ls eslint in your project folder.
     This will tell you which other package (apart from the expected react-scripts) installed eslint.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[mnajdova]

This is the part that does the aliasing

[mnajdova]

While working on the examples project, should we update the create-react-app example project to include the emotion peerDependencies?

[oliviertassinari]

While working on the examples project, should we update the create-react-app example project to include the emotion peerDependencies?

What about we duplicate each demo with a -next suffix that does that and relies on v5 instead of v4? This way, developers looking at the examples folder can find both how to get started with v5 and v4.

[mnajdova]

What about we duplicate each demo with a -next suffix that does that and relies on v5 instead of v4? This way, developers looking at the examples folder can find both how to get started with v5 and v4.

Not sure if is necessary to add the next suffix, as we would anyway update the example on the next branch, once that one is merged on master, that should be the only example we provide in my opinion..

[oliviertassinari]

Not sure if is necessary to add the next suffix, as we would anyway update the example on the next branch, once that one is merged on master, that should be the only example we provide in my opinion..

@mnajdova I guess it comes down to: How often does a developer that wants to use a stable version land on the examples using the GitHub source UI (could only find v5) vs https://material-ui.com/getting-started/example-projects/. It seems to be the latter.

So, sounds good without the next prefix and only v5.

[mnajdova]

While working on the examples project, should we update the create-react-app example project to include the emotion peerDependencies?

Done

[oliviertassinari]

Related to #22805. This is the warnings I get when running yarn with the new example:

Maybe we should make emotion an optional peer dependency?

[mnajdova]

Related to #22805. This is the warnings I get when running yarn with the new example:

Maybe we should make emotion an optional peer dependency?

@oliviertassinari on which example do you get this warning?

Let me take a look if there are some implications of adding them as optional peer dependencies. I will open a separate PR for this.

[oliviertassinari]

on which example do you get this warning?

I get this warning with this very new example we are adding (styled-components). I think that it's one more element to take into account in the tradeoff around how we handle npm.

[mnajdova]

I get this warning with this very new example we are adding (styled-components).

Ah I see now, I wonder why we didn't saw this initially. It makes sense to have them as optional peer dependencies 👍 Let me test this and open a PR

[oliviertassinari]

Ah I see now, I wonder why we didn't saw this initially. It makes sense to have them as optional peer dependencies 👍 Let me test this and open a PR

Cool. From my perspective, it's one more element to take into account for the peer dependency / dependency tradeoff. As long as we keep that in mind and are aware of it, it would already be a great thing. Should we act on it? No strong point of view, maybe yes?

[mnajdova]

Cool. From my perspective, it's one more element to take into account for the peer dependency / dependency tradeoff. As long as we keep that in mind and are aware of it, it would already be a great thing. Should we act on it? No strong point of view, maybe yes?

Alright, merging this one and let's continue the discussion on the peer dependencies here #22808