There is a error while setting up ThemeProvider
LowLevelLore opened this issue · comments
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'
import { ThemeProvider } from 'next-themes'
const inter = Inter({ subsets: ['latin'] })
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={inter.className}>
<ThemeProvider >
{children}
</ThemeProvider>
</body>
</html>
)
}
### Error :
⨯ node_modules\next-themes\dist\index.module.js (1:244) @ eval
⨯ TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
at eval (webpack-internal:///(rsc)/./node_modules/next-themes/dist/index.module.js:12:142)
at (rsc)/./node_modules/next-themes/dist/index.module.js (C:\CODING\AIvsOG\client.next\server\vendor-chunks\next-themes.js:20:1)
at webpack_require (C:\CODING\AIvsOG\client.next\server\webpack-runtime.js:33:42)
at eval (webpack-internal:///(rsc)/./src/app/layout.tsx:11:69)
at (rsc)/./src/app/layout.tsx (C:\CODING\AIvsOG\client.next\server\app\page.js:173:1)
at Function.webpack_require (C:\CODING\AIvsOG\client.next\server\webpack-runtime.js:33:42)
at runNextTicks (node:internal/process/task_queues:60:5)
at listOnTimeout (node:internal/timers:540:9)
at process.processTimers (node:internal/timers:514:7)
at async eV (C:\CODING\AIvsOG\client\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:402833)
at async tn (C:\CODING\AIvsOG\client\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:406599)
at async to (C:\CODING\AIvsOG\client\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:407149)
at async tc (C:\CODING\AIvsOG\client\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:36:2057)
at async C:\CODING\AIvsOG\client\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:36:2576 {
digest: '1522751779',
page: '/'
}
null
tailwind.config.ts :
import type { Config } from 'tailwindcss'
const config: Config = {
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
],
darkMode: 'class',
theme: {
extend: {
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic':
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
},
},
},
plugins: [],
}
export default config
Versions :
nextjs : Next.js v14.0.4
next-themes: 10.2.3
how did u fix it? I am having same issue now
Make a different component for all the providers and mark it with 'use client'
And then add that component instead of ThemeProvider + it can include many more different providers.
Yeah thanks. Solved.
Would someone be able to share an example?
I tried creating the custom provider file like below, but the error persists, any hint?
theme-provider.tsx:
'use client'
import { ThemeProvider as NextThemesProvider } from 'next-themes'
import { type ThemeProviderProps } from 'next-themes/dist/types'
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
"use client" at the top should solve it..However, this is mine
"use-client";
import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import type { ThemeProviderProps } from "next-themes/dist/types";
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
return <NextThemesProvider {...props}>{children};
}