Next.js v14 SSR fails w/ MDB5 9.0.0

  1. MDB Home Page
  2. Support Main Page
  3. MDB React
Topic: Next.js v14 SSR fails w/ MDB5 9.0.0

bnewton pro premium priority asked 2 months ago

Expected behavior Setting up a basic Next.js v14 application as per https://nextjs.org/docs/getting-started/installation and then using a basic MDB component such as MDBContainer in the root page.tsx file (using app router) would be able to bundle using Webpack and render the page.tsx page using SSR successfully when performing:

npm run dev

Actual behavior When performing the steps above, instead webpack throws a compile error. It looks from the error that framer-motion may be incorrectly bundled when it's not actually required (in the case of the MDBContainer component) which prevents SSR from working correctly, as framer-motion requires client-side browser APIs.

Resources (screenshots, code snippets etc.) Webpack error:

TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
    at eval (webpack-internal:///(rsc)/./node_modules/framer-motion/dist/es/context/MotionConfigContext.mjs:11:81)
    at (rsc)/./node_modules/framer-motion/dist/es/context/MotionConfigContext.mjs (\mdbootstrap-nextjs\.next\server\vendor-chunks\framer-motion.js:340:1)
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/framer-motion/dist/es/motion/index.mjs:6:90)
    at (rsc)/./node_modules/framer-motion/dist/es/motion/index.mjs (\mdbootstrap-nextjs\.next\server\vendor-chunks\framer-motion.js:800:1)
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/framer-motion/dist/es/render/dom/motion.mjs:6:75)
    at (rsc)/./node_modules/framer-motion/dist/es/render/dom/motion.mjs (\mdbootstrap-nextjs\.next\server\vendor-chunks\framer-motion.js:1110:1)
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/mdb-react-ui-kit/dist/mdb-react-ui-kit.esm.js:90:71)
    at (rsc)/./node_modules/mdb-react-ui-kit/dist/mdb-react-ui-kit.esm.js (\mdbootstrap-nextjs\.next\server\vendor-chunks\mdb-react-ui-kit.js:30:1)
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./src/app/page.tsx:7:74)
    at (rsc)/./src/app/page.tsx (\mdbootstrap-nextjs\.next\server\app\page.js:151:1)
    at Function.__webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at async e9 (\mdbootstrap-nextjs\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:396530)
    at async tb (\mdbootstrap-nextjs\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:400044)
    at async tS (\mdbootstrap-nextjs\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:400605)
    at async tS (\mdbootstrap-nextjs\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:400736)
    at async tR (\mdbootstrap-nextjs\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:36:2320)
    at async \mdbootstrap-nextjs\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:36:2989 {
  digest: '1617374436'
}
TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
    at eval (webpack-internal:///(rsc)/./node_modules/framer-motion/dist/es/context/MotionConfigContext.mjs:11:81)
    at (rsc)/./node_modules/framer-motion/dist/es/context/MotionConfigContext.mjs (\mdbootstrap-nextjs\.next\server\vendor-chunks\framer-motion.js:340:1)
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/framer-motion/dist/es/motion/index.mjs:6:90)
    at (rsc)/./node_modules/framer-motion/dist/es/motion/index.mjs (\mdbootstrap-nextjs\.next\server\vendor-chunks\framer-motion.js:800:1)
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/framer-motion/dist/es/render/dom/motion.mjs:6:75)
    at (rsc)/./node_modules/framer-motion/dist/es/render/dom/motion.mjs (\mdbootstrap-nextjs\.next\server\vendor-chunks\framer-motion.js:1110:1)
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/mdb-react-ui-kit/dist/mdb-react-ui-kit.esm.js:90:71)
    at (rsc)/./node_modules/mdb-react-ui-kit/dist/mdb-react-ui-kit.esm.js (\mdbootstrap-nextjs\.next\server\vendor-chunks\mdb-react-ui-kit.js:30:1)
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./src/app/page.tsx:7:74)
    at (rsc)/./src/app/page.tsx (\mdbootstrap-nextjs\.next\server\app\page.js:151:1)
    at Function.__webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at runNextTicks (node:internal/process/task_queues:65:5)
    at listOnTimeout (node:internal/timers:555:9)
    at process.processTimers (node:internal/timers:529:7)
    at async e9 (\mdbootstrap-nextjs\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:396530)
    at async tb (\mdbootstrap-nextjs\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:400044)
    at async tS (\mdbootstrap-nextjs\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:400605)
    at async tS (\mdbootstrap-nextjs\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:400736)
    at async tR (\mdbootstrap-nextjs\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:36:2320)
    at async \mdbootstrap-nextjs\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:36:2989 {
  digest: '1253649669'
}
 ⨯ TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at eval (./src/app/page.tsx:7:74)
    at (rsc)/./src/app/page.tsx (\mdbootstrap-nextjs\.next\server\app\page.js:151:1)
    at Function.__webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at async Promise.all (index 0)
digest: "2610724371"
 ⨯ TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at eval (./src/app/page.tsx:7:74)
    at (rsc)/./src/app/page.tsx (\mdbootstrap-nextjs\.next\server\app\page.js:151:1)
    at Function.__webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at async Promise.all (index 0)
digest: "2610724371"
 ⨯ TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at eval (./src/app/page.tsx:7:74)
    at (rsc)/./src/app/page.tsx (\mdbootstrap-nextjs\.next\server\app\page.js:151:1)
    at Function.__webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at async Promise.all (index 0)
digest: "2610724371"
 ⨯ TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at eval (./src/app/page.tsx:7:74)
    at (rsc)/./src/app/page.tsx (\mdbootstrap-nextjs\.next\server\app\page.js:151:1)
    at Function.__webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at async Promise.all (index 0)
digest: "2610724371"
 ⨯ TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at eval (./src/app/page.tsx:7:74)
    at (rsc)/./src/app/page.tsx (\mdbootstrap-nextjs\.next\server\app\page.js:151:1)
    at Function.__webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
digest: "1617374436"
 ⨯ TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at eval (./src/app/page.tsx:7:74)
    at (rsc)/./src/app/page.tsx (\mdbootstrap-nextjs\.next\server\app\page.js:151:1)
    at Function.__webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
digest: "1253649669"
 ⨯ TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
    at eval (webpack-internal:///(rsc)/./node_modules/framer-motion/dist/es/context/MotionConfigContext.mjs:11:81)
    at (rsc)/./node_modules/framer-motion/dist/es/context/MotionConfigContext.mjs (\mdbootstrap-nextjs\.next\server\vendor-chunks\framer-motion.js:340:1)
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/framer-motion/dist/es/motion/index.mjs:6:90)
    at (rsc)/./node_modules/framer-motion/dist/es/motion/index.mjs (\mdbootstrap-nextjs\.next\server\vendor-chunks\framer-motion.js:800:1)
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/framer-motion/dist/es/render/dom/motion.mjs:6:75)
    at (rsc)/./node_modules/framer-motion/dist/es/render/dom/motion.mjs (\mdbootstrap-nextjs\.next\server\vendor-chunks\framer-motion.js:1110:1)
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/mdb-react-ui-kit/dist/mdb-react-ui-kit.esm.js:90:71)
    at (rsc)/./node_modules/mdb-react-ui-kit/dist/mdb-react-ui-kit.esm.js (\mdbootstrap-nextjs\.next\server\vendor-chunks\mdb-react-ui-kit.js:30:1)
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./src/app/page.tsx:7:74)
    at (rsc)/./src/app/page.tsx (\mdbootstrap-nextjs\.next\server\app\page.js:151:1)
    at Function.__webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at async e9 (\mdbootstrap-nextjs\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:396530)
    at async tb (\mdbootstrap-nextjs\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:400044)
    at async tS (\mdbootstrap-nextjs\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:400605)
    at async tS (\mdbootstrap-nextjs\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:400736)
    at async tR (\mdbootstrap-nextjs\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:36:2320)
    at async \mdbootstrap-nextjs\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:36:2989 {
  digest: '1617374436',
  page: '/'
}
 ⨯ TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
    at eval (webpack-internal:///(rsc)/./node_modules/framer-motion/dist/es/context/MotionConfigContext.mjs:11:81)
    at (rsc)/./node_modules/framer-motion/dist/es/context/MotionConfigContext.mjs (\mdbootstrap-nextjs\.next\server\vendor-chunks\framer-motion.js:340:1)
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/framer-motion/dist/es/motion/index.mjs:6:90)
    at (rsc)/./node_modules/framer-motion/dist/es/motion/index.mjs (\mdbootstrap-nextjs\.next\server\vendor-chunks\framer-motion.js:800:1)
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/framer-motion/dist/es/render/dom/motion.mjs:6:75)
    at (rsc)/./node_modules/framer-motion/dist/es/render/dom/motion.mjs (\mdbootstrap-nextjs\.next\server\vendor-chunks\framer-motion.js:1110:1)
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/mdb-react-ui-kit/dist/mdb-react-ui-kit.esm.js:90:71)
    at (rsc)/./node_modules/mdb-react-ui-kit/dist/mdb-react-ui-kit.esm.js (\mdbootstrap-nextjs\.next\server\vendor-chunks\mdb-react-ui-kit.js:30:1)
    at __webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./src/app/page.tsx:7:74)
    at (rsc)/./src/app/page.tsx (\mdbootstrap-nextjs\.next\server\app\page.js:151:1)
    at Function.__webpack_require__ (\mdbootstrap-nextjs\.next\server\webpack-runtime.js:33:42)
    at runNextTicks (node:internal/process/task_queues:65:5)
    at listOnTimeout (node:internal/timers:555:9)
    at process.processTimers (node:internal/timers:529:7)
    at async e9 (\mdbootstrap-nextjs\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:396530)
    at async tb (\mdbootstrap-nextjs\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:400044)
    at async tS (\mdbootstrap-nextjs\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:400605)
    at async tS (\mdbootstrap-nextjs\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:400736)
    at async tR (\mdbootstrap-nextjs\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:36:2320)
    at async \mdbootstrap-nextjs\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:36:2989 {
  digest: '1253649669',
  page: '/'
}

//package.json

{
  "name": "mdbootstrap-nextjs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^6.6.0",
    "mdb-react-ui-kit": "^9.0.0",
    "next": "14.2.15",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.15",
    "typescript": "^5"
  }
}

// layout.tsx

import type { Metadata } from "next";
import 'mdb-react-ui-kit/dist/css/mdb.min.css'
import "@fortawesome/fontawesome-free/css/all.min.css"
import { Roboto } from "next/font/google";

const roboto = Roboto({ weight: "400", subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={roboto.className}
        >
        {children}
      </body>
    </html>
  );
}

// page.tsx

import { MDBContainer } from "mdb-react-ui-kit";

export default function App() {
  return (
    <MDBContainer>Test</MDBContainer>
  )
}

//next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
}

export default nextConfig;

Mateusz Lazaru staff answered 2 months ago

To resolve the createContext) is not a function problem you'll beed to add the use client directive in the component, where you're using MDBContainer/

bnewton pro premium priority answered 2 months ago

Thanks, Mateusz Lazaru.

However, I don't think this is an adequate answer given that simple components like the MDBContainer have no direct dependencies on client-side APIs they should be able to be rendered on the server side using feature's like Next.js' Server-Side Rendering (SSR).

Based on the webpack error, it appears that 'framer-motion' is possibly being imported globally whenever a module from 'mdb-react-ui-kit' is imported, which in turn is calling createContext which is dependent on client-side APIs.

Are there plans to fix this issue so that MDB react components that don't depend on client-side APIs can be rendered on the server?

Thanks.

Regards, Ben

Mateusz Lazaru staff commented 2 months ago

Yes, we are going to fix this, you are right about the error. At the moment, you don't need to add the “use client” flag if you have imported a server component from a source file. The source files can be found here: https://github.com/mdbootstrap/mdb-react-ui-kit/tree/master/app/src/free
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: Pro
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 9.0.0
  • Device: Desktop
  • Browser: Edge
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes
Tags
nextjs ssr react mdbreact
Related topics
0
React Server Side Rendering Errors
0
Next.js Window is not defined
0
Unable to use with Next.js
1
Issues with plugins and MDB React 5
1
BUG: pass dynamic data to MDBSelect component
About author
bnewton
Pro User Premium support
0Support score
1Questions 1Answers
0Snippets likes 0Snippets