Use Nextjs with reacjs pro mdb

  1. MDB Home Page
  2. Support Main Page
  3. MDB React
Topic: Use Nextjs with reacjs pro mdb

ins1d30ut asked 3 years ago

Expected behavior Create a nextjs project using npx create-next-app and installing the reactjs mdb pro package through cli and having a working project with the ability to use the MBD Pro features.

Actual behavior localhost just says 'Internal Host Error'

Resources (screenshots, code snippets etc.)

ready - started server on 0.0.0.0:3000, url: http://localhost:3000 info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5 error - ../../#fun/fun-mdb5/node_modules/next/dist/client/dev/amp-dev.js Error: Cannot find module 'C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\@next\react-refresh-utils\loader.js' Require stack: - C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\compiled\webpack\bundle5.js

  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\compiled\webpack\webpack.js

  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\next-server\server\config-utils-worker.js

  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\next-server\server\config-utils.js

  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\next-server\server\config.js

  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\server\next.js

  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\server\lib\start-server.js

  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\cli\next-dev.js

  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\bin\next event - build page: /next/dist/pages/_error wait - compiling... error
  • ../../#fun/fun-mdb5/node_modules/next/dist/client/dev/amp-dev.js Error: Cannot find module 'C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\@next\react-refresh-utils\loader.js' Require stack:

  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\compiled\webpack\bundle5.js

  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\compiled\webpack\webpack.js

  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\next-server\server\config-utils-worker.js

  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\next-server\server\config-utils.js

  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\next-server\server\config.js

  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\server\next.js

  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\server\lib\start-server.js

  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\cli\next-dev.js

  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\bin\next Error: Cannot find module 'C:\Users\kevin\ActiveGitHub#fun\fun-mdb5.next\server\pages-manifest.json' Require stack:

  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\next-server\server\require.js

  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\next-server\server\load-components.js

  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\next-server\server\api-utils.js
  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\next-server\server\next-server.js
  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\server\next.js

  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\server\lib\start-server.js

  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\cli\next-dev.js

  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\bin\next at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15) at Function.mod._resolveFilename (C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\build\webpack\require-hook.js:4:1855) at Function.Module._load (internal/modules/cjs/loader.js:746:27) at Module.require (internal/modules/cjs/loader.js:974:19) at require (internal/modules/cjs/helpers.js:92:18) at getPagePath (C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\next-server\server\require.js:1:735) at requirePage (C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\next-server\server\require.js:1:1397) at loadComponents (C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\next-server\server\load-components.js:1:1289) at DevServer.findPageComponents (C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\next-server\server\next-server.js:77:296) at DevServer.renderErrorToHTML (C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\next-server\server\next-server.js:139:209) { code: 'MODULE_NOT_FOUND', requireStack: [ 'C:\Users\kevin\ActiveGitHub\#fun\fun-mdb5\node_modules\next\dist\next-server\server\require.js', 'C:\Users\kevin\ActiveGitHub\#fun\fun-mdb5\node_modules\next\dist\next-server\server\load-components.js', 'C:\Users\kevin\ActiveGitHub\#fun\fun-mdb5\node_modules\next\dist\next-server\server\api-utils.js', 'C:\Users\kevin\ActiveGitHub\#fun\fun-mdb5\node_modules\next\dist\next-server\server\next-server.js', 'C:\Users\kevin\ActiveGitHub\#fun\fun-mdb5\node_modules\next\dist\server\next.js',

    'C:\Users\kevin\ActiveGitHub\#fun\fun-mdb5\node_modules\next\dist\server\lib\start-server.js', 'C:\Users\kevin\ActiveGitHub\#fun\fun-mdb5\node_modules\next\dist\cli\next-dev.js', 'C:\Users\kevin\ActiveGitHub\#fun\fun-mdb5\node_modules\next\dist\bin\next' ] } Error: Cannot find module 'C:\Users\kevin\ActiveGitHub#fun\fun-mdb5.next\fallback-build-manifest.json' Require stack:

  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\next-server\server\load-components.js
  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\next-server\server\api-utils.js
  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\next-server\server\next-server.js
  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\server\next.js

  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\server\lib\start-server.js

  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\cli\next-dev.js

  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\bin\next at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15) at Function.mod._resolveFilename (C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\build\webpack\require-hook.js:4:1855) at Function.Module._load (internal/modules/cjs/loader.js:746:27) at Module.require (internal/modules/cjs/loader.js:974:19) at require (internal/modules/cjs/helpers.js:92:18) at loadDefaultErrorComponents (C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\next-server\server\load-components.js:1:652) at DevServer.renderErrorToHTML (C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\next-server\server\next-server.js:139:962) at processTicksAndRejections (internal/process/task_queues.js:95:5) at async DevServer.render (C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\next-server\server\next-server.js:75:160) at async Object.fn (C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\next-server\server\next-server.js:58:672) { code: 'MODULE_NOT_FOUND', requireStack: [ 'C:\Users\kevin\ActiveGitHub\#fun\fun-mdb5\node_modules\next\dist\next-server\server\load-components.js', 'C:\Users\kevin\ActiveGitHub\#fun\fun-mdb5\node_modules\next\dist\next-server\server\api-utils.js', 'C:\Users\kevin\ActiveGitHub\#fun\fun-mdb5\node_modules\next\dist\next-server\server\next-server.js', 'C:\Users\kevin\ActiveGitHub\#fun\fun-mdb5\node_modules\next\dist\server\next.js', 'C:\Users\kevin\ActiveGitHub\#fun\fun-mdb5\node_modules\next\dist\server\lib\start-server.js', 'C:\Users\kevin\ActiveGitHub\#fun\fun-mdb5\node_modules\next\dist\cli\next-dev.js', 'C:\Users\kevin\ActiveGitHub\#fun\fun-mdb5\node_modules\next\dist\bin\next' ] } wait - compiling... error - ../../#fun/fun-mdb5/node_modules/next/dist/client/dev/amp-dev.js Error: Cannot find module 'C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\@next\react-refresh-utils\loader.js' Require stack:
  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\compiled\webpack\bundle5.js
  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\compiled\webpack\webpack.js
  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\next-server\server\config-utils-worker.js
  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\next-server\server\config-utils.js
  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\next-server\server\config.js
  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\server\next.js
  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\server\lib\start-server.js
  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\cli\next-dev.js
  • C:\Users\kevin\ActiveGitHub#fun\fun-mdb5\node_modules\next\dist\bin\next

Wojciech Staniszewski staff answered 3 years ago

Did you install MDBReact Pro with npm like described here: https://mdbootstrap.com/docs/b5/react/pro/installation/?

ins1d30ut commented 3 years ago

yes. I did...except I ran npx create-next-app instead of creating a react app.

ins1d30ut commented 3 years ago

I am pretty new to using the reactjs framework and realize that nextjs is a reactjs framework. I also realize that the way that nextjs organizes its folders and files is a little different than a normal react app. Is there another way of building my app using CRA and 'transforming' it into a nextjs app?

Wojciech Staniszewski staff commented 3 years ago

Has the problem already occurred before adding MDBReact to the project? Or the error has shown up just after installing MDB?

Amware commented 3 years ago

Once npx with nextjs you have to remove some packages that nextjs doesn't need that MDB uses by default for example it may install react-router-dom which is not needed by next. Also if you are using any Nav components you have to use the next ones then add the classes on the tag to style with MDB.
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: MDB5 1.0.0-beta6
  • Device: laptop
  • Browser: chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes
Tags
nextjs react-pro
Related topics
0
Error: Can't resolve 'react-chartjs-2'
1
Install react-pro 5.0.1
0
Navbar in next.js
0
Error: Element type is invalid: expected a string
0
MDB Pro React 4.8.1 run failure
About author
ins1d30ut
10Support score
2Questions 0Answers
0Snippets likes 0Snippets