Topic: How to implement MDB React Pro in Next JS?
Expected behavior Implement MDB React Pro in a NextJs App. I used these instructions. https://mdbootstrap.com/docs/b5/react/pro/installation/ Actual behavior No errors, but none of the MDB components or styles work. How do I implement MDB React Pro in Next JS? Here is the only warning, but could be the root of the problem>
next-dev.js?3515:20 Warning: Invalid DOM property `class`. Did you mean `className`?
at h3
at div
at eval (webpack-internal:///./node_modules/mdb-react-ui-kit/dist/mdb-react-ui-kit.esm.js:136:1154)
at div
at eval (webpack-internal:///./node_modules/mdb-react-ui-kit/dist/mdb-react-ui-kit.esm.js:136:16434)
at div
at eval (webpack-internal:///./node_modules/mdb-react-ui-kit/dist/mdb-react-ui-kit.esm.js:136:710)
at main
at Home
at MyApp (webpack-internal:///./pages/_app.js:11:27)
at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:20742)
at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:23635)
at Container (webpack-internal:///./node_modules/next/dist/client/index.js:70:9)
at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:215:26)
at Root (webpack-internal:///./node_modules/next/dist/client/index.js:406:27)
Resources (screenshots, code snippets etc.)
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Opened
Specification of the issue
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 4.2.0
- Device: Macbook Pro
- Browser: Chrome
- OS: Monterey
- Provided sample code: No
- Provided link: Yes
Krzysztof Wilk staff commented 2 years ago
Hi!
You should import styles in the
_app.jsfile if you didn't do that.The error points you used
classinstead of`classNamein one of your components. Could you check this out, correct and tell me if the issue still occurs?Two Aow priority commented 2 years ago
Thank you so much. That did the trick.
I misread the docs and added the import to index.js
As to the class vs className, I normally use className but in the mdb docs it uses class. I was unsure if that affected the underlying components. However changing it to className fixed the error and I am good now.
A great upgrade would be adding that info to the installation docs.
The last thing that does not appear to affect anything so far is this error. Any guesses?
TypeError: Failed to fetch at webpack_require.hmrM (http://localhost:3001/_next/static/chunks/webpack.js?ts=1663062415882:1186:20)
Krzysztof Wilk staff commented 2 years ago
Hi!
The installation docs for the Next.js with our package will be released soon :)
According to the error - could you create a simple repository with this issue? It's hard to check that without a code :(