react-admin: Pagination fails with *TypeError: onChangePage is not a function*

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

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

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

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.

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 https://github.com/mui-org/material-ui/pull/23789 and publish a new release. Please voice your opinion at https://github.com/mui-org/material-ui/issues/27192 if you have the same problem.

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

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

https://github.com/marmelab/react-admin/blob/a21f80eca963b2f32a4649fbe5a93d3dd254e5a6/packages/react-admin/package.json#L36-L38

@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.

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

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.

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

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.