Topic: Next.js v14 SSR fails w/ MDB5 9.0.0
bnewton free asked 1 month 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;
bnewton free answered 1 month 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 1 month 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
Mateusz Lazaru staff answered 1 month 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
/
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB React
- MDB Version: MDB5 9.0.0
- Device: Desktop
- Browser: Edge
- OS: Windows
- Provided sample code: No
- Provided link: Yes