12

I'm trying to use the mui-v5 with styled-components and typescript. However, even after I added the line to my tsconfig:

"paths": {
  "@mui/styled-engine": [ "./node_modules/@mui/styled-engine-sc" ]
}

I'm getting an error:

Could not find dependency: '@emotion/styled' relative to '/node_modules/@mui/styled-engine/index.js'

when doing: import { ThemeProvider } from "@mui/material/styles";

I made a Code Sandbox to show my setup.

Does anyone know what I'm doing wrong?

MarksCode
  • 8,074
  • 15
  • 64
  • 133
  • Do you mind showing the content of your package.json? I have `"@mui/styled-engine-sc` in my deps and everything is working fine. – Edwin Vargas Mar 23 '22 at 21:42

2 Answers2

16

You need to add @emotion/styled and @emotion/react to dependencies

thug_
  • 893
  • 2
  • 11
  • 31
  • 1
    But I thought the whole point of using styled-components was that I don't need emotion – MarksCode Sep 17 '21 at 12:40
  • Yeah I checked this https://mui.com/guides/styled-engine/ it says that @emotion/react, @emotion/styled, and styled-components are optional peer dependencies of @mui/material, so you need to install them yourself. – thug_ Sep 17 '21 at 12:48
  • 2
    Those instructions are really confusing. If it's optional doesn't that mean you don't need them? – MarksCode Sep 17 '21 at 12:56
  • Check if this codesandbox is what you are looking for https://codesandbox.io/s/styled-components-forked-4f88k?file=/src/demo.js – thug_ Sep 17 '21 at 13:16
  • finally. I've read multi para solutions that didn't fix it. this did, thank you – a.anev Sep 20 '21 at 06:50
  • in my case I added the bellow config to my webpack config file _italic_ resolve: { alias:{ '@mui/styled-engine': '@mui/styled-engine-sc' }, }, _italic_ – cgitosh Nov 18 '21 at 03:47
10

You don't need to add @emotion/styled. The mui installation says you can use emotion OR styled-components

I know the instructions are a bit confusing but I just copy/pasted the package.json portion in mui.com/guides/styled-engine/ and it worked for me

package.json:

{
  "dependencies": {
    "@mui/material": "^5.0.0",
    "styled-components": "^5.3.1",
  },
  "devDependencies": {
    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest",
    "@types/styled-components": "^5.1.14",
  },
  "resolutions": {
    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
  }
}
Kaelyn
  • 171
  • 1
  • 6