NextJs 13 - Unable to render components client-side using use client;

[kukicado]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
Platform: win32
Arch: x64
Version: Windows 10 Pro
Binaries:
Node: 16.18.0
npm: N/A
Yarn: N/A
pnpm: N/A
Relevant packages:
next: 13.0.1-canary.0
eslint-config-next: 13.0.0
react: 18.2.0
react-dom: 18.2.0

What browser are you using? (if relevant)

Chrome Version 106.0.5249.119

How are you deploying your application? (if relevant)

npm run dev

Describe the Bug

In trying to use the new app directory way of setting up an application and trying to mix server-renderer components and client-side rendered components often time fails with a cryptic error. To render components client-side, I am just using the "use client"; command at the top of the component. Removing this and rendering the all the components server-side works fine without issue. The reason for using client-side components is to bring in React client side functionality.

Expected Behavior

Component should render client side.

Link to reproduction

https://github.com/kukicado/next13-useclient-issue

To Reproduce

1. Start up server and navigate to localhost:3000
2. Navigate to localhost:3000/123
3. Navigate to localhost:3000/123/567
4. Navigate back to localhost:3000/123

Error displayed:

TypeError: Cannot read properties of undefined (reading 'default')
    at resolveModuleMetaData (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:195:82)
    at serializeModuleReference (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1298:50)
    at resolveModelToJSON (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1660:40)
    at Array.toJSON (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1081:40)
    at stringify (<anonymous>)
    at processModelChunk (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:163:36)
    at retryTask (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1823:50)
    at performWork (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1856:33)
    at AsyncLocalStorage.run (node:async_hooks:330:14)
    at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1934:55)

[philipheinser]

@kukicado do you use async to fetch data in one of the components? this does not work in client components.

[kukicado]

@philipheinser nope. I removed all functionality from the components to try to isolate the issue. The components don't do anything other than return a message. The only difference is that I am including the "use client"; at the top.

[kukicado]

I also recreated the repo on stackblitz (https://stackblitz.com/edit/vercel-next-js-p1gsmj?file=next.config.js,app%2Fpage.tsx,app%2Flayout.tsx,app%2F[post]%2Fpage.tsx,app%2F[post]%2F[comment]%2Fpage.tsx) and am not able to reproduce the issue there. I wonder if this is perhaps Windows related?

[marko-hologram]

I wonder if this is perhaps Windows related?

Just to confirm that it's not just your machine, I've cloned the repo and ran it and got the same issue. Removing "use client"; from both pages makes them work without issues.

I just wanted to check this since I've ran into same issues, but wasn't sure if I was just doing something wrong 😄

Windows 11 21H2 (OS Build 220000.1098)

[lveillard]

Same error on Windows 10, nextjs 13.0.1-canary and a regular nextjs config file:

const shouldAnalyzeBundles = process.env.ANALYZE === true;

let nextConfig = {
  reactStrictMode: true,
  experimental: {
    appDir: true,
    transpilePackages: ['ui'],
  },
  poweredByHeader: false,
};

if (shouldAnalyzeBundles) {
  const withNextBundleAnalyzer =
    // eslint-disable-next-line import/no-extraneous-dependencies, global-require
    require('next-bundle-analyzer')(/* options come there */);
  nextConfig = withNextBundleAnalyzer(nextConfig);
}

module.exports = nextConfig;

It's a monorepo (turborepo)

[shuding]

It seems like a Windows specific bug. I will investigate.

[DrBarnabus]

Can confirm this only seems to happen on Windows, I'm running Windows 11 Pro 22H2 (22621.674) with Next 13.0.2-canary.0 and the same project works fine on Ubuntu 20.04 (either native or on WSL)

So for anyone else having this issue a work around if you are developing on Windows is to use WSL.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.