Material-ui: App crash

[adostal]

When I try open Drawer, application crashed.

<Drawer open={true}>Test</Drawer>

Cannot read property 'call' of undefined
TypeError: Cannot read property 'call' of undefined
    at ProxyComponent.hotComponentRender (node_modules/react-hot-loader/dist/react-hot-loader.development.js:579:0)
    at ProxyComponent.proxiedRender (node_modules/react-hot-loader/dist/react-hot-loader.development.js:587:0)
    at finishClassComponent (node_modules/react-dom/cjs/react-dom.development.js:8389:0)
    at updateClassComponent (node_modules/react-dom/cjs/react-dom.development.js:8357:0)
    at beginWork (node_modules/react-dom/cjs/react-dom.development.js:8982:0)
    at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:11814:0)
    at workLoop (node_modules/react-dom/cjs/react-dom.development.js:11843:0)
    at renderRoot (node_modules/react-dom/cjs/react-dom.development.js:11874:0)
    at performWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:12449:0)
    at performWork (node_modules/react-dom/cjs/react-dom.development.js:12370:0)

    in EventListener (created by Slide)
    in Slide (created by WithTheme(Slide))
    in WithTheme(Slide) (created by Drawer)
    in RootRef (created by Modal)
    in div (created by Modal)
    in Portal (created by Modal)
    in Modal (created by WithStyles(Modal))
    in WithStyles(Modal) (created by Drawer)
    in Drawer (created by WithStyles(Drawer))
    in WithStyles(Drawer) (at HomePageContainer.tsx:29)
    in div (created by Grid)
    in Grid (created by GridWrapper)
    in GridWrapper (created by WithStyles(GridWrapper))
    in WithStyles(GridWrapper) (at HomePageContainer.tsx:28)
    in div (created by Grid)
    in Grid (created by GridWrapper)
    in GridWrapper (created by WithStyles(GridWrapper))
    in WithStyles(GridWrapper) (at HomePageContainer.tsx:27)
    in Container (at index.tsx:5)
    in Component (at app.tsx:29)
    in div (at Content.tsx:12)
    in Component (created by WithStyles(Component))
    in WithStyles(Component) (at PageContainer.tsx:55)
    in Container (created by Connect(Container))
    in Connect(Container) (at app.tsx:28)
    in Component (at withMaterialUi.tsx:95)
    in Component (created by WithStyles(Component))
    in WithStyles(Component) (at withMaterialUi.tsx:94)
    in MuiThemeProvider (created by Component)
    in JssProvider (at withMaterialUi.tsx:91)
    in Component (created by Connect(Component))
    in Connect(Component) (created by InjectIntl(Connect(Component)))
    in InjectIntl(Connect(Component)) (created by PageWithIntl)
    in IntlProvider (at withIntl.tsx:37)
    in PageWithIntl (at withApolloProvider.tsx:52)
    in ApolloProvider (at withApolloProvider.tsx:51)
    in PageWithApollo (created by Connect(PageWithApollo))
    in Connect(PageWithApollo) (created by Connect(Connect(PageWithApollo)))
    in Connect(Connect(PageWithApollo)) (created by WrappedCmp)
    in Provider (created by WrappedCmp)
    in WrappedCmp (created by App)
    in Container (created by App)
    in App
    in AppContainer

Dependencies

  "dependencies": {
    "@material-ui/core": "1.0.0",
    "@material-ui/icons": "1.0.0",
    "accepts": "1.3.5",
    "apollo-boost": "0.1.6",
    "apollo-server-express": "1.3.6",
    "autoprefixer": "8.5.0",
    "body-parser": "1.18.3",
    "dotenv": "5.0.1",
    "express": "4.16.3",
    "glob": "7.1.2",
    "graphql": "0.13.2",
    "graphql-import": "0.5.2",
    "graphql-tag": "2.9.2",
    "graphql-tools": "3.0.1",
    "intl": "1.2.5",
    "isomorphic-fetch": "2.2.1",
    "next": "6.0.3",
    "next-redux-wrapper": "1.3.5",
    "nprogress": "0.2.0",
    "postcss": "6.0.22",
    "react": "16.3.2",
    "react-apollo": "2.1.4",
    "react-dom": "16.3.2",
    "react-intl": "2.4.0",
    "react-redux": "5.0.7",
    "redux": "4.0.0",
    "redux-actions": "2.3.2",
    "redux-form": "7.3.0",
    "redux-thunk": "2.2.0",
    "reselect": "3.0.1"
  },
  "devDependencies": {
    "@types/accepts": "1.3.5",
    "@types/express": "4.11.1",
    "@types/glob": "5.0.35",
    "@types/intl": "1.2.0",
    "@types/isomorphic-fetch": "0.0.34",
    "@types/jest": "22.2.3",
    "@types/next": "2.4.10",
    "@types/next-redux-wrapper": "1.4.1",
    "@types/node": "10.1.0",
    "@types/nprogress": "0.0.29",
    "@types/react": "16.3.14",
    "@types/react-intl": "2.3.8",
    "@types/redux-actions": "2.3.0",
    "@types/redux-form": "7.2.5",
    "@zeit/next-typescript": "1.0.0",
    "apollo-codegen": "0.19.1",
    "babel-plugin-react-intl": "2.4.0",
    "coveralls": "3.0.1",
    "graphql-code-generator": "0.9.1",
    "graphql-codegen-typescript-template": "0.9.1",
    "husky": "0.14.3",
    "jest": "22.4.4",
    "nodemon": "1.17.4",
    "prettier": "1.12.1",
    "pretty-quick": "1.4.1",
    "rimraf": "2.6.2",
    "ts-jest": "22.4.6",
    "ts-node": "6.0.3",
    "tslint": "5.10.0",
    "tslint-config-prettier": "1.12.0",
    "tslint-react": "3.6.0",
    "typescript": "2.8.3"
  }

[adostal]

I found problem.
'react-event-listener'

When I downgrade to "0.5.3", application is correct.

[oliviertassinari]

How can I reproduce the problem?

[adostal]

It's very hard :)
I have open repository: https://github.com/ApiTreeCZ/alda (dev branch)

When I remove dependency: "react-event-listener", clear package-lock.json and run: npm i && npm run dev

In app is left menu in top corner (open Drawer)

[adostal]

A create branch with this issue: https://github.com/ApiTreeCZ/alda/tree/issue-11528

For reproduce:

npm i && npm run dev

In browser: localhost:8080

I add test Drawer:
https://github.com/ApiTreeCZ/alda/blob/issue-11528/client/modules/homePage/containers/HomePageContainer.tsx#L29

When I set open={false}, application is allright.

[oliviertassinari]

I'm not sure what to think about it. The error seems to be coming from react-hot-loader.

[oliviertassinari]

It's working fine with [email protected] but don't with [email protected]

[oliviertassinari]

So, the issue was introduced with one of:

• https://github.com/oliviertassinari/react-event-listener/pull/73/files
• https://github.com/oliviertassinari/react-event-listener/pull/76/files
• ~https://github.com/oliviertassinari/react-event-listener/pull/74/files (unlikely)~

cc @TrySound

[TrySound]

@oliviertassinari Well... next.js just replaces babel helpers (47) with own (42) and they behave differently. inherits helper from 42 just resets prototype after methods assigning.

[TrySound]

Here's the structure. How do you think runtime helpers should be resolved? But they are resolved to 42
-react-event-listener
-@babel
-- runtime (47)
-next
--node_modules
----@babel
-----runtime (42)

[oliviertassinari]

I have released [email protected] following @TrySound advice. Can anyone confirm the problem is fixed?

[TrySound]

@oliviertassinari This won't fix next js behaviour. They just forces us to stick with babel runtime 42. Why they do this?

[adostal]

I try versiom 0.5.7 but no success :(

[oliviertassinari]

@TrySound That's not good.
In the meantime. I have updated react-event-listener to follow the exact same approach than Material-UI: https://github.com/oliviertassinari/react-event-listener/pull/78.
I can confirm that [email protected] fixes the reproduction repository provided here.

[tashburn]

@oliviertassinari Thanks for providing a version that fixes this issue. How can I use it now with next and @material-ui/core?

If you install my sample repo that demonstrates this problem, and yarn install, you get the latest versions of each package at the present time. react-event-listener is not a direct dependency listed in package.json, and the packages that use react-event-listener use older versions of it --

├─ @material-ui/[email protected]
│  ├─ react-event-listener@^0.5.1

├─ [email protected]
│  ├─ react-event-listener@^0.5.1

├─ [email protected]

I'm assuming the critical dependency for this issue is from @material-ui/[email protected].

Will I have to wait for the next version of @material-ui/core, etc. to get 0.5.8 of react-event-listener?

[TrySound]

@tashburn yarn remove @material-ui/core && yarn add @material-ui/core worked for me.

[tashburn]

@TrySound That works. Thank you.

[dupski]

Just a note to say this is still broken for me with material-ui/[email protected]. I have to manually specify "react-event-listener": "0.5.5" in my package.json to fix

[papaponmx]

Please check this issue, the next version is supposed to resolve it. #12407

[okwolf]

Confirmed fixed in 0.20.2.

[AdrienLemaire]

Sounds related to my issue with @babel/runtime conflicting versions from @material-ui/core 1.5.1 (7.0.0-rc.1) and react-event-listener 0.6.2 (7.0.0-beta.42).
https://github.com/mui-org/material-ui/issues/12587

[eyalap]

@Fandekasp see if you have other @material-ui packages that contradict, I had an older @material-ui/icons which caused the contradiction with @material-ui/core 1.51.
With @material-ui/icons 2.0.3 it works

[AdrienLemaire]

@eyalap I only have one instance of material-ui

$ find node_modules -name '*material-ui' 
node_modules/material-ui
node_modules/@material-ui

But the packages inside indeed have different versions:

$ for dir in node_modules/@material-ui/*; do echo $dir; cat $dir/package.json|grep version; done                                                               
node_modules/@material-ui/core
  "version": "1.5.1",
node_modules/@material-ui/icons
  "version": "2.0.3",

But these versions match yours.
As described in https://github.com/mui-org/material-ui/issues/12587#issuecomment-414217894, the problem seems to be that material-ui is searching for files in the wrong babel/runtime directory. No idea why, how to fix this issue, and building a full reproduction test case might take a lot of time, so I won't be able to do it soon.