Material-ui: TypeError: Cannot read property 'attach' of undefined at attach

[aravinda-arkaje]

Can someone help me out with this issue! When I npm start these arrises.
I have tried with changing the material_ui versions also.

[proSingularity]

Experiencing this as well. My package.json specified multiple dependencies as latest, so it broke after an npm install.

It works however, if I install dependencies with my previous package-lock.json via npm ci.

Seemingly an issue when jumping from

    "@material-ui/core": {
      "version": "4.8.0",

to

   "@material-ui/core": {
      "version": "4.8.1",

Edit: Can confirm now that the error got fixed by editing package.json to use 4.8.0

        "@material-ui/core": "4.8.0",

Then remove node_modules and run npm install again.

Side note: I ran into caching issues with next.js. So be sure to delete build folders like .next before running your app again after you fixed the version to 4.8.0.

[yoyooyooo]

same issue. everything is ok yesterday. then today this issue come. I'm sure my code have no problem. I think the cause of this issue is about dependencies because when i add yesterday's yarn.lock back.everything is ok .

[brightlkms]

hi if you didn't fix the issue, you should try rendering components without Box component. I replaced my Box components with div tag and things got resolved.

[un3solka]

Add "jss": "10.0.0" to dependencies. It is a temporary fix.

[un3solka]

same issue. everything is ok yesterday. then today this issue come. I'm sure my code have no problem. I think the cause of this issue is about dependencies because when i add yesterday's yarn.lock back.everything is ok .

jss was updater few hours ago

[troydaniels]

Add "jss": "10.0.0" to dependencies. It is a temporary fix.

Thanks @un3solka
Can confirm this temp fix works for me, whereas the others in this thread unfortunately did not

[kishanio]

Grrr removing Box works though it breaks my styles.

[egroj01]

Grrr eliminando Box funciona aunque rompe mis estilos.

Si lo hice y funciono !!! Lo bueno es que ya le habia dado estilo a los Box asi que no se rompio nada....

[dinumihnea]

Downgrade to an older specific version (4.7.2 in my case, _without ^_) and install using an older version of package.lock.json (version before the upgrade) worked for me, as a temporary fix.

[egroj01]

hola si no solucionó el problema, debe intentar renderizar componentes sin el componente Box. Reemplacé mis componentes Box con div tag y las cosas se resolvieron.

Funciono para mi !

[kishanio]

Grrr eliminando Box funciona aunque rompe mis estilos.

Si lo hice y funciono !!! Lo bueno es que ya le habia dado estilo a los Box asi que no se rompio nada....

la caja viene con algunos estilos y prefijos predeterminados que se rompieron

[oliviertassinari]

Please provide a full reproduction test case. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template _may_ be a good starting point. Thank you!

[heshamnaim]

Above workarounds didn't work for me. I went into makeStyles.js:138 and changed it from

dynamicSheet.update(props).attach();

to

dynamicSheet.update(props)
dynamicSheet.attach()

That fixed it for me. Seems the initial call to update is returning undefined.

[Janpot]

@oliviertassinari there you go https://codesandbox.io/s/snowy-sunset-q3fgg
Basically breaks on the next.js example + Box component

Just skimmed this, but it looks like JSS docs seem to do

dynamicSheet.attach().update(props);

instead

[alfonmga]

For those using yarn the only solution that worked for me is to add a resolutions field to my package.json targeting jss 10.0.0 version.

It should look like this:

// package.json

{

  "dependencies": {
    "@material-ui/core": "^4.8.1",

  },
  "resolutions": {
    "jss": "10.0.0"
  }
}

[hdutra]

For those using yarn the only solution that worked for me is to add a resolutions field to my package.json targeting jss 10.0.0 version.

It should look like this:

// package.json

{

  "dependencies": {
    "@material-ui/core": "^4.8.1",

  },
  "resolutions": {
    "jss": "10.0.0"
  }
}

Thank you soo much! You save my day!

[Janpot]

cross reference: https://github.com/cssinjs/jss/issues/1249

[emilpriver]

For those using yarn the only solution that worked for me is to add a resolutions field to my package.json targeting jss 10.0.0 version.

It should look like this:

// package.json

{

  "dependencies": {
    "@material-ui/core": "^4.8.1",

  },
  "resolutions": {
    "jss": "10.0.0"
  }
}

THANK YOU <3

[KASOGIT]

I'm using lerna and all the workaround listed above aren’t working for me :/ Should i fix the @material-ui/styles's package version too ?

[Cvijo]

the same issue for me too, I tired with "@material-ui/core": "^4.8.0" delete node_moduels ... npm install and the same error after npm run dev
Cannot read property 'attach' of undefined

[Bessonov]

Temporary fix with pnpm:

cat <<EOF >> pnpmfile.js
module.exports = {
  hooks: {
    readPackage
  }
}

function readPackage(pkg) {
  if (pkg.dependencies && pkg.dependencies.jss) {
    pkg.dependencies.jss = '10.0.0'
  }
  return pkg
}
EOF

Then remove node_modules and install again.

[matthewkwong2]

@oliviertassinari there you go https://codesandbox.io/s/snowy-sunset-q3fgg
Basically breaks on the next.js example + Box component

Just skimmed this, but it looks like JSS docs seem to do

dynamicSheet.attach().update(props);

instead

Above workarounds didn't work for me. I went into makeStyles.js:138 and changed it from

dynamicSheet.update(props).attach();

to

dynamicSheet.update(props)
dynamicSheet.attach()

That fixed it for me. Seems the initial call to update is returning undefined.

Perhaps create a pull request for hotfix?

Basically what happened is the new version of jss (v10.0.1) which has been released not long ago has somehow broken material-ui. Just downgrade jss to 10.0.0 for tempory fix.

Or:

For those using yarn the only solution that worked for me is to add a resolutions field to my package.json targeting jss 10.0.0 version.

It should look like this:

// package.json

{

  "dependencies": {
    "@material-ui/core": "^4.8.1",

  },
  "resolutions": {
    "jss": "10.0.0"
  }
}

Then run yarn install

[comsky]

Facing the same issue when I upgrade my yarn version 1.17.0 to 1.21.1.
There was no error with 1.17.0 version.

package.json:
"@material-ui/core": "^4.4.0"
"@material-ui/styles": "^4.3.3"

[whhotw]

I meet the same issues but i solved.

"@material-ui/core": "4.1.0",
"@material-ui/styles": "4.4.1",

[davalapar]

appending the following solved it for me, but i've got no idea what's specifically causing this :confused:

  "resolutions": {
    "jss": "10.0.0"
  }

edit: ah yeah probably this:

https://github.com/cssinjs/jss/issues/1249#issuecomment-569451973:
this is a breaking change:
https://github.com/cssinjs/jss/pull/1242/files#diff-29aac1ba5d08e188c14800bc889c5474L186
sheet.update used to return this, now it returns undefined

hence [email protected] is breaking it but [email protected] isn't

[popuguytheparrot]

I tried use resulotions, but got warning:
warning Resolution field "[email protected]" is incompatible with requested version "[email protected]"
and yarn.lock dont change jss version

[Favna]

Adding resolutions worked for us, as an extra security we also set material-ui/core to 4.8.0.

---

@popuguytheparrot ensure your package.json is your source of truth: rm -rf node_modules yarn.lock && yarn cache clean && yarn. This removes node_modules and yarn.lock then clears the yarn cache and reinstalls from package.json. (note: will not work as a copypaste on Windows Powershell/CMD, this is a bash command). The warnings will still come, but warnings are just that, warnings. Not errors.

[mceIdo]

@davalapar thanks for the reference - just submitted a PR https://github.com/mui-org/material-ui/pull/19042

[popuguytheparrot]

@Favna what about of these packages?
"@material-ui/core": "",
"@material-ui/icons": "",
"@material-ui/lab": "",
"@material-ui/styles": "",
"@material-ui/system": "",

[Favna]

@popuguytheparrot Just core matters, not the rest.

[aruprakshit]

I got exactly same error.. I have

    "@material-ui/core": "^4.8.1",
    "@material-ui/icons": "^4.5.1",

[matthewkwong2]

@popuguytheparrot This warning is expected. Just run yarn install and you will be fine.

[popuguytheparrot]

@matthewkwong2 same result

[minhna]

npm install [email protected] temporary fixed, at least for me.

[oliviertassinari]

Released under v4.8.2.

[Olaide-EO]

hi if you didn't fix the issue, you should try rendering components without Box component. I replaced my Box components with div tag and things got resolved.

This worked for me.