[docs] Improve styled-components integration #28713
Conversation
| @@ -33,6 +37,39 @@ By default, `@mui/material` has `@mui/styled-engine` as a dependency, but you ca | |||
| } | |||
| ``` | |||
|
|
|||
| ### npm | |||
|
|
|||
| As the package aliases do not work with npm at this moment, you need to update you bundler's config to add this alias. Here is an example of how you can do it, if you use `webpack`: | |||
There was a problem hiding this comment.
It seems like this should work from npm v6.9? https://npm.community/t/release-npm-6-9-0/5911
There was a problem hiding this comment.
It doesn't work. See #27917, we needed to revert the changes for it.
| @@ -1,4 +1,5 @@ | |||
| { | |||
| "extends": "./tsconfig.paths.json", | |||
There was a problem hiding this comment.
Any particular reason to split out the paths to its own file?
There was a problem hiding this comment.
Yes, currently tsconfig paths are not supported:
The following changes are being made to your tsconfig.json file:
- compilerOptions.paths must not be set (aliased imports are not supported)
This is kind of an override to this. See https://stackoverflow.com/questions/57070052/create-react-app-typescript-3-5-path-alias
|
Looks good but haven't been able to test it yet (quite swamped with other tasks at work) :) |
Co-authored-by: Oscar Bolmsten <oscar@bolmsten.se>
Thanks for looking into it. I've tested it myself, but will wait for a confirmation from at least one more person :) |
There was a problem hiding this comment.
Package aliases most likely do work. However, a package alias via dependencies only applies to imports in your source code. Not imports from within node_modules. But we do need to affect imports from within node_modules (@mui/*) so we need Yarn Resolutions.
Added suggestions to make the distinction between Alias and Resolution clearer.
Co-authored-by: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Co-authored-by: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Thanks, I don't know what I kept referring to them as aliases. |
Probably because Webpack calls them "aliases". |
Fixes #28559
styled-engineinstallation section with clear steps when using npmnpm#28559 (comment))