Search code examples
javascriptreactjsnode.jswebpacknext.js

NextJS: Error: You cannot dot into a client module from a server component. You can only pass the imported name through

My NextJS application is as follows:

app/page.js

'use client';
import React from 'react';

export default function Home() {
   return (<div>Testing</div>);
}

app/layout.js

export const metadata = {
  title: 'Next.js',
  description: 'Generated by Next.js',
}
 
export default function RootLayout({ children }) {
 return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

When I run

next dev

I get the following error:

error - node_modules/next/dist/build/webpack/loaders/next-flight-loader/module-proxy.js (56:14) @ Object.get
error - Error: Cannot access default.then on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.
    at async Promise.all (index 0)
null
error - node_modules/next/dist/build/webpack/loaders/next-flight-loader/module-proxy.js (56:14) @ Object.get
error - Error: Cannot access default.then on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.
    at async Promise.all (index 0)

I can't find any reference to default.then. Is there any way this error can be narrowed down? I haven't been able to find this error on a web search so any information on the error would be greatly appreciated.

Solution

  • You can upgrade your next.js version with 13.4.19 or latest if you are using old versions. Here is Next.js Official docs to upgrade your application