treetips / typescript-nextjs-redux-toolkit-material-ui-example

TypeScript v3.8, Next.js v9, Redux Toolkit, Material-UI v4, react-hooks, SSR live demo
https://typescript-nextjs-redux-toolkit-material-ui-example.now.sh/
81 stars 28 forks source link

Update libs? #7

Open crazy4groovy opened 3 years ago

crazy4groovy commented 3 years ago

Hi - this is very cool, thanks. Can you update it with the latest libs?

  "dependencies": {
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/styles": "^4.10.0",
    "@reduxjs/toolkit": "^1.4.0",
    "compression": "^1.7.4",
    "express": "^4.17.1",
    "material-table": "^1.69.1",
    "next": "^9.5.5",
    "next-redux-wrapper": "^6.0.2",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-redux": "^7.2.1",
    "redux": "^4.0.5"
  },
  "devDependencies": {
    "@babel/plugin-proposal-decorators": "^7.12.1",
    "@types/next-redux-wrapper": "^3.0.0",
    "@types/node": "^14.11.8",
    "@types/react": "^16.9.52",
    "@types/react-dom": "^16.9.8",
    "@types/react-jss": "^10.0.0",
    "@types/react-redux": "^7.1.9",
    "@types/redux": "^3.6.0",
    "@types/styled-jsx": "^2.2.8",
    "@typescript-eslint/eslint-plugin": "^4.4.1",
    "@typescript-eslint/parser": "^4.4.1",
    "dotenv-webpack": "^3.0.0",
    "eslint": "^7.11.0",
    "eslint-config-prettier": "^6.12.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.21.4",
    "prettier": "^2.1.2",
    "typescript": "^4.0.3"
  }
/!\ You are using legacy implementaion. Please update your code: use createWrapper() and wrapper.withRedux().
TypeError: Cannot read property 'getState' of undefined
    at Function.getInitialProps (B:\dev\sites\typescript-nextjs-redux-toolkit-material-ui-example\.next\server\pages\_document.js:1020:31)
treetips commented 3 years ago

@crazy4groovy Thank you for contacting me šŸ˜„

Actually, I've been trying to support next-redux-wrapper v6 for some time now, but I've failed many times. The other boilerplate git repositories have been out of date for a long time, and there's nothing in the official examples that I can refer to.

Cannot read property 'getState' of undefined has been resolved, but I have not been able to resolve the following SSR issues.

Warning: Prop `className` did not match. Server: "MuiPaper-root makeStyles-root-177 makeStyles-root-178 MuiPaper-elevation6 MuiPaper-rounded" Client: "MuiPaper-root makeStyles-root-177 makeStyles-root-179 MuiPaper-elevation6 MuiPaper-rounded"

I haven't figured out how to solve it, and I can't motivate myself to continue... šŸ˜«

There is a feature branch with the above problems, so please try to fix them yourself if you can. feature/migrate-to-next-redux-wrapper6

However, Next.js is reluctant to SSR and Redux , and in the future, it should be aggressive on Next.js + SWR static sites, so you might want to avoid betting on the combination of Next.js + SSR + Redux.

codejeet commented 3 years ago

Related project, action/reducer based state mangement with nextjs: https://github.com/fleur-js/fleur