Topic: How to implement MDB React Pro in Next JS?

Two Aow priority asked 1 year ago

Expected behavior Implement MDB React Pro in a NextJs App. I used these instructions. 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.) MDB React Pro on NextJS MDB React Pro on React

Krzysztof Wilk staff commented 1 year ago


You should import styles in the _app.js file if you didn't do that.

The error points you used class instead of `className in one of your components. Could you check this out, correct and tell me if the issue still occurs?

Two Aow priority commented 1 year 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 1 year ago


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 :(

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



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