Pagination fails with TypeError: onChangePage is not a function #6421

todoesverso · 2021-07-07T21:24:53Z

What you were expecting:
For pagination to work

What happened instead:
Pagination didn't work and throws this error:

PaginationActions.js:81 Uncaught TypeError: onChangePage is not a function
    at gotoPage (PaginationActions.js:81)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070)
    at executeDispatch (react-dom.development.js:8243)
    at processDispatchQueueItemsInOrder (react-dom.development.js:8275)
    at processDispatchQueue (react-dom.development.js:8288)
    at dispatchEventsForPlugins (react-dom.development.js:8299)
    at react-dom.development.js:8508
    at batchedEventUpdates$1 (react-dom.development.js:22396)
    at batchedEventUpdates (react-dom.development.js:3745)
    at dispatchEventForPluginEventSystem (react-dom.development.js:8507)
    at attemptToDispatchEvent (react-dom.development.js:6005)
    at dispatchEvent (react-dom.development.js:5924)
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at discreteUpdates$1 (react-dom.development.js:22413)
    at discreteUpdates (react-dom.development.js:3756)
    at dispatchDiscreteEvent (react-dom.development.js:5889)

Steps to reproduce:
Installed latest react-admin v3.16.6 and run tutorial example

Related code:
This is the tutorial just using version 3.16.6
https://codesandbox.io/s/cool-tdd-8x1lk?file=/package.json

Environment

React-admin version: 3.16.6
Last version that did not exhibit the issue (if applicable):
React version:
Browser:
Stack trace (in case of a JS error):

The text was updated successfully, but these errors were encountered:

ZachStecko · 2021-07-07T21:37:55Z

I ran into the same issue right now. It seems onChangePage needs to be changed to onPageChange in PaginationActions.tsx in the package ra-ui-materialui

https://github.com/mui-org/material-ui/pull/23789/files#diff-6a1fe9619b39d554032474e1455cc3970790e712fb9072d29c7aabe86592646a

todoesverso · 2021-07-07T23:25:25Z

Exactly, the problem is that material ui added some breaking changes in a minor release
https://github.com/mui-org/material-ui/releases/tag/v4.12.0

and react-admin requieres ^4.11.4

ZachStecko · 2021-07-07T23:38:39Z

I think I found a workaround for the time being.

Using yarn in my package.json I added this

"resolutions": { "ra-ui-materialui": "3.15.0", "@material-ui/core": "4.11.4" },

and now the pagination is working as intended

wmwart · 2021-07-08T10:25:34Z

For a long time I took it as a rule: third-party package dependencies are not a constant thing, and in all my projects I never use "^" in package versions, which is what I wish for you.
An explicit upgrade is required in the project dependencies.

andrei9669 · 2021-07-09T06:18:56Z

just encountered the same issue

fzaninotto · 2021-07-09T07:07:00Z

This is due to a breaking change released in a minor release on June 6th by material-ui, a library react-admin depends on.

We're asking them to undo this change in mui/material-ui#23789 and publish a new release. Please voice your opinion at mui/material-ui#27192 if you have the same problem.

andras-hegedus · 2021-07-22T19:42:00Z

Using npm, installing @material-ui/core@4.11.4 will solve the issue, react-admin will use the non-breaking version in this case. Just tested and it works for react-admin@3.17.0.

fr-wentianqi · 2021-07-25T16:40:20Z

Using npm, installing @material-ui/core@4.11.4 will solve the issue, react-admin will use the non-breaking version in this case. Just tested and it works for react-admin@3.17.0.

Problem solved by your solution.

7system7 · 2021-07-27T09:30:20Z

Using npm, installing @material-ui/core@4.11.4 will solve the issue, react-admin will use the non-breaking version in this case. Just tested and it works for react-admin@3.17.0.

Sadly, it is not working for me. The error is still present. :(

IvanMilivojevic · 2021-07-29T11:58:34Z

If you are using npm, you can install the material-ui version which works with react-admin with:

npm install @material-ui/core@4.11.4

This will add next dependency to package.json file:

"@material-ui/core": "^4.11.4"

This can help right away if your project already installed previous dependencies because this one will be just installed directly via terminal and overwrite previous (presuming materialui/core 4.12.x which fails).
However, this is not good for next time when you install project. Then it will look into package.json for required dependencies and if you still have ^ sign in front of version, it will still install latest minor version which is again 4.12.x. and still errors will be present. So, in case to be secure and not repeat process, best is to put ~ instead of ^, which will only install latest 4.11.x patch version, and will never install failing 4.12. In case you want to start installing from scratch, after assuring your package.lock file has "@material-ui/core": "~4.11.4", you can remove node_modules and package-lock.json and run npm install.

Also you can add the same way material-ui/system package. Even if it looks like it's not important for react-admin to work properly again, it also is in version 4.12. and has some changes and potential warning message. So for failsafe add this also:

"@material-ui/system": "~4.11.3"

I hope this can help to remove all potential breaking errors.

davidsondefaria · 2021-07-29T13:17:19Z

If you use yarn, the solution is pretty much the same as @andras-hegedus said, but has a little trick.
In package.json use resolutions.

dependencies: {
    "@material-ui/core": "4.11.3",
    "react-admin": "3.16.6", //but can be 3.17
    ...
},
"resolutions": {
    "react-admin/@material-ui/core": "4.11.3"
  },

SuperbaseUser · 2021-07-29T17:29:25Z

If you use yarn, the solution is pretty much the same as @andras-hegedus said, but has a little trick.
In package.json use resolutions.
dependencies: {
    "@material-ui/core": "4.11.3",
    "react-admin": "3.16.6", //but can be 3.17
    ...
},
"resolutions": {
    "react-admin/@material-ui/core": "4.11.3"
  },

I removed node_modules and run "yarn install"

7system7 · 2021-07-29T19:46:56Z

If you use yarn, the solution is pretty much the same as @andras-hegedus said, but has a little trick.
In package.json use resolutions.
dependencies: {
    "@material-ui/core": "4.11.3",
    "react-admin": "3.16.6", //but can be 3.17
    ...
},
"resolutions": {
    "react-admin/@material-ui/core": "4.11.3"
  },

Lol, it is workin'! 👍 🥇

But moreover, you have to fix the versions, like that below, if you use the @material-ui/lab, ra-ui-materialui or the @material-ui/pickers:

 dependencies: {
    "@material-ui/core": "4.11.2",
    "@material-ui/lab": "4.0.0-alpha.57",
    "@material-ui/pickers": "3.2.10",
    "ra-ui-materialui": "^3.16.5",
    "react-admin": "^3.16.5",
    ...
}
"resolutions": {
    ...
    "react-admin/@material-ui/core": "4.11.2"
},

because this warning:

 WARN  Compiled with 1 warnings                 9:51:36 PM

 warn  in ./node_modules/@material-ui/lab/esm/PaginationItem/PaginationItem.js          9:51:36 PM

export 'alpha' (imported as 'alpha') was not found in '@material-ui/core/styles' (possible exports: MuiThemeProvider, ServerStyleSheets, StylesProvider, ThemeProvider, createGenerateClassName, createMuiTheme, createStyles, darken, decomposeColor, duration, easing, emphasize, fade, getContrastRatio, getLuminance, hexToRgb, hslToRgb, jssPreset, lighten, makeStyles, recomposeColor, responsiveFontSizes, rgbToHex, styled, unstable_createMuiStrictModeTheme, useTheme, withStyles, withTheme)

fzaninotto · 2021-07-30T10:15:33Z

Material-ui just released 4.12.3, which should fix this issue.

https://github.com/mui-org/material-ui/releases/tag/v4.12.3

I'm closing the GitHub issue, please only comment here if you're still having the problem after upgrading to mui > 4.12.3

davidhenley · 2021-07-30T14:55:52Z

@fzaninotto So is react-admin upgrading to this or do we just need to install mui manually now?

fzaninotto · 2021-07-30T16:02:41Z

react-admin only has a peerDependency on material-ui. We don't specify the version you need. That's what caused the problem in the first place, as people started to install mui v4.12.0 when it was released a couple weeks ago.

so we don't need to re-release react-admin for the problem to be fixed.

davidhenley · 2021-07-30T19:14:42Z

Thanks @fzaninotto

abdusco · 2021-08-04T05:37:15Z

... react-admin only has a peerDependency on material-ui. ...

@fzaninotto that doesn't seem to be the case?

react-admin/packages/react-admin/package.json

Lines 36 to 38 in a21f80e

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

Stalex89 · 2021-08-19T07:48:09Z

The tip by @davidsondefaria worked for me (I'm using yarn), this is the set of package versions that removed the errors for me:

"dependencies": {
    "@material-ui/core": "~4.11.3",
    "@material-ui/icons": "~4.11.2",
    "@material-ui/system": "~4.11.3",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "prop-types": "^15.7.2",
    "ra-data-json-server": "^3.17.2",
    "react": "^17.0.2",
    "react-admin": "^3.17.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "resolutions": {
    "react-admin/@material-ui/core": "4.11.3",
    "@material-ui/system": "4.11.3"
  },

fzaninotto · 2021-08-19T11:55:31Z

@abdusco the ^ at the beginning of the dependency means: any minor version compatible with this one. So When installing a new project, npm or yarn will pick up the latest release (4.12.3). If you have already installed a bad version, you'll have to remove your yarn.lock and node_modules and relaunch installation, or add a resolutions key in your package.json.

Again, the fix isn't in the react-admin code, it's in the mui code. we have nothing to do on our side.

abdusco · 2021-08-19T14:33:23Z

@fzaninotto True. But if it had peerDependency on @material-ui packages, I could have easily switched to an older version and waited for a fix to come out. But having a hard dependency on @material-ui complicates things, because if react-admin wants a version in range (say) ^1.1.1 , npm/yarn must use a version from >=1.1.1 until <1.2.0. So I have to resort to using resolutions (which npm doesn't offer).

So I agree with you that it's not a problem on react-admins side, but it should only have a peerDependency on @material-ui, what you thought was the case.

fzaninotto mentioned this issue Jul 8, 2021

[Table] Add deprecation for renamed TablePagination props mui/material-ui#23789

Merged

fzaninotto added the bug label Jul 9, 2021

This was referenced Jul 20, 2021

Material UI 4.12.1 warnings #6451

Closed

Next button not working in Pagination #6442

Closed

ryanmstokes mentioned this issue Jul 21, 2021

Failed Prop Type and deprecation warnings when trying to run R-A with Typescript #6454

Closed

fzaninotto mentioned this issue Jul 28, 2021

Pagination resets to page 1 #6474

Closed

fzaninotto closed this as completed Jul 30, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Pagination fails with TypeError: onChangePage is not a function #6421

Pagination fails with TypeError: onChangePage is not a function #6421

todoesverso commented Jul 7, 2021

ZachStecko commented Jul 7, 2021 •

edited

Loading

todoesverso commented Jul 7, 2021

ZachStecko commented Jul 7, 2021

wmwart commented Jul 8, 2021

andrei9669 commented Jul 9, 2021

fzaninotto commented Jul 9, 2021 •

edited

Loading

andras-hegedus commented Jul 22, 2021

fr-wentianqi commented Jul 25, 2021

7system7 commented Jul 27, 2021

IvanMilivojevic commented Jul 29, 2021

davidsondefaria commented Jul 29, 2021

SuperbaseUser commented Jul 29, 2021

7system7 commented Jul 29, 2021 •

edited

Loading

fzaninotto commented Jul 30, 2021

davidhenley commented Jul 30, 2021

fzaninotto commented Jul 30, 2021

davidhenley commented Jul 30, 2021

abdusco commented Aug 4, 2021 •

edited

Loading

Stalex89 commented Aug 19, 2021 •

edited

Loading

fzaninotto commented Aug 19, 2021

abdusco commented Aug 19, 2021

Pagination fails with *TypeError: onChangePage is not a function* #6421

Pagination fails with *TypeError: onChangePage is not a function* #6421

Comments

todoesverso commented Jul 7, 2021

ZachStecko commented Jul 7, 2021 • edited Loading

todoesverso commented Jul 7, 2021

ZachStecko commented Jul 7, 2021

wmwart commented Jul 8, 2021

andrei9669 commented Jul 9, 2021

fzaninotto commented Jul 9, 2021 • edited Loading

andras-hegedus commented Jul 22, 2021

fr-wentianqi commented Jul 25, 2021

7system7 commented Jul 27, 2021

IvanMilivojevic commented Jul 29, 2021

davidsondefaria commented Jul 29, 2021

SuperbaseUser commented Jul 29, 2021

7system7 commented Jul 29, 2021 • edited Loading

fzaninotto commented Jul 30, 2021

davidhenley commented Jul 30, 2021

fzaninotto commented Jul 30, 2021

davidhenley commented Jul 30, 2021

abdusco commented Aug 4, 2021 • edited Loading

Stalex89 commented Aug 19, 2021 • edited Loading

fzaninotto commented Aug 19, 2021

abdusco commented Aug 19, 2021

Pagination fails with TypeError: onChangePage is not a function #6421

Pagination fails with TypeError: onChangePage is not a function #6421

ZachStecko commented Jul 7, 2021 •

edited

Loading

fzaninotto commented Jul 9, 2021 •

edited

Loading

7system7 commented Jul 29, 2021 •

edited

Loading

abdusco commented Aug 4, 2021 •

edited

Loading

Stalex89 commented Aug 19, 2021 •

edited

Loading