TypeError: Cannot read property 'attach' of undefined at attach #19005

aravinda-arkaje · 2019-12-28T09:04:43Z

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

mkraenz · 2019-12-28T09:09:31Z

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.

…l-ui#19005

yoyooyooo · 2019-12-28T10:02:45Z

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 · 2019-12-28T10:44:10Z

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 · 2019-12-28T11:29:01Z

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

un3solka · 2019-12-28T11:29:50Z

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 · 2019-12-28T11:39:35Z

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 · 2019-12-28T12:26:25Z

Grrr removing Box works though it breaks my styles.

code-castle-01 · 2019-12-28T14:50:22Z

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 · 2019-12-28T14:51:39Z

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.

code-castle-01 · 2019-12-28T15:13:37Z

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 · 2019-12-28T16:31:33Z

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 · 2019-12-28T17:58:45Z

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 · 2019-12-28T19:11:09Z

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 · 2019-12-28T19:11:31Z

@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 · 2019-12-28T20:05:25Z

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"
  }
}

hiagopdutra · 2019-12-28T20:17:53Z

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 · 2019-12-28T21:22:56Z

cross reference: cssinjs/jss#1249

emilpriver · 2019-12-28T23:42:13Z

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

[email protected] breaks mui, so downgrading for now cssinjs/jss#1249 mui/material-ui#19005

KASOGIT · 2019-12-29T17:52:23Z

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 · 2019-12-29T19:48:01Z

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 · 2019-12-29T23:48:04Z

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.

mwskwong · 2019-12-30T01:15:37Z

@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 · 2019-12-30T01:23:20Z

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"

whck6 · 2019-12-30T03:36:16Z

I meet the same issues but i solved.

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

davalapar · 2019-12-30T08:12:58Z

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

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

edit: ah yeah probably this:

cssinjs/jss#1249 (comment):
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 · 2019-12-30T08:23:05Z

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 · 2019-12-30T08:44:12Z

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 · 2019-12-30T08:58:59Z

@davalapar thanks for the reference - just submitted a PR #19042

popuguytheparrot · 2019-12-30T09:02:24Z

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

favna · 2019-12-30T09:05:12Z

@popuguytheparrot Just core matters, not the rest.

aruprakshit · 2019-12-30T09:10:08Z

I got exactly same error.. I have

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

mwskwong · 2019-12-30T09:17:45Z

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

popuguytheparrot · 2019-12-30T10:12:21Z

@matthewkwong2 same result

minhna · 2019-12-30T10:15:12Z

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

oliviertassinari · 2019-12-30T10:59:22Z

Released under v4.8.2.

Olaide-EO · 2019-12-30T12:08:52Z

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.

mkraenz added a commit to mkraenz/fursorger-fe that referenced this issue Dec 28, 2019

FIX #1 material-ui/core broken in patch release 4.8.1 See mui/materia…

7857a90

…l-ui#19005

doorisopen mentioned this issue Dec 28, 2019

Cannot read property 'attach' of undefined at attach DevExpress/devextreme-reactive#2619

Closed

oliviertassinari added the status: waiting for author Issue with insufficient information label Dec 28, 2019

oliviertassinari removed the status: waiting for author Issue with insufficient information label Dec 28, 2019

adrid mentioned this issue Dec 28, 2019

Production build error - p.update(...) is undefined - makeStyles/sidebar.js marmelab/react-admin#4225

Closed

AumitLeon mentioned this issue Dec 29, 2019

Refactor api calls AumitLeon/ArchMLP#32

Merged

eps1lon added the external dependency Blocked by external dependency, we can’t do anything about it label Dec 29, 2019

nl0 added a commit to quiltdata/quilt that referenced this issue Dec 29, 2019

temporarily downgrade jss due to breakage

82e8864

[email protected] breaks mui, so downgrading for now cssinjs/jss#1249 mui/material-ui#19005

nl0 mentioned this issue Dec 29, 2019

temporarily downgrade jss due to breakage quiltdata/quilt#1476

Merged

nl0 added a commit to quiltdata/quilt that referenced this issue Dec 29, 2019

temporarily downgrade jss due to breakage (#1476)

cc48ffd

[email protected] breaks mui, so downgrading for now cssinjs/jss#1249 mui/material-ui#19005

mceIdo mentioned this issue Dec 30, 2019

[styles] Fix jss StyleSheet attach() call #19042

Merged

1 task

oliviertassinari closed this as completed in #19042 Dec 30, 2019

TypeError: Cannot read property 'attach' of undefined at attach #19005

TypeError: Cannot read property 'attach' of undefined at attach #19005

Comments

aravinda-arkaje commented Dec 28, 2019

mkraenz commented Dec 28, 2019 • edited Loading

yoyooyooo commented Dec 28, 2019

brightlkms commented Dec 28, 2019

un3solka commented Dec 28, 2019

un3solka commented Dec 28, 2019

troydaniels commented Dec 28, 2019

kishanio commented Dec 28, 2019

code-castle-01 commented Dec 28, 2019 • edited Loading

dinumihnea commented Dec 28, 2019

code-castle-01 commented Dec 28, 2019

kishanio commented Dec 28, 2019

oliviertassinari commented Dec 28, 2019

heshamnaim commented Dec 28, 2019

Janpot commented Dec 28, 2019 • edited Loading

alfonmga commented Dec 28, 2019 • edited Loading

hiagopdutra commented Dec 28, 2019

Janpot commented Dec 28, 2019

emilpriver commented Dec 28, 2019

KASOGIT commented Dec 29, 2019 • edited Loading

Cvijo commented Dec 29, 2019

Bessonov commented Dec 29, 2019

mwskwong commented Dec 30, 2019 • edited Loading

comsky commented Dec 30, 2019 • edited Loading

whck6 commented Dec 30, 2019

davalapar commented Dec 30, 2019 • edited Loading

popuguytheparrot commented Dec 30, 2019 • edited Loading

favna commented Dec 30, 2019

mceIdo commented Dec 30, 2019

popuguytheparrot commented Dec 30, 2019

favna commented Dec 30, 2019

aruprakshit commented Dec 30, 2019

mwskwong commented Dec 30, 2019 • edited Loading

popuguytheparrot commented Dec 30, 2019

minhna commented Dec 30, 2019

oliviertassinari commented Dec 30, 2019

Olaide-EO commented Dec 30, 2019

mkraenz commented Dec 28, 2019 •

edited

Loading

code-castle-01 commented Dec 28, 2019 •

edited

Loading

Janpot commented Dec 28, 2019 •

edited

Loading

alfonmga commented Dec 28, 2019 •

edited

Loading

KASOGIT commented Dec 29, 2019 •

edited

Loading

mwskwong commented Dec 30, 2019 •

edited

Loading

comsky commented Dec 30, 2019 •

edited

Loading

davalapar commented Dec 30, 2019 •

edited

Loading

popuguytheparrot commented Dec 30, 2019 •

edited

Loading

mwskwong commented Dec 30, 2019 •

edited

Loading