Link to the code that reproduces this issue or a replay of the bug

wilkinsonjack1993 commented 1 year ago

Link to the code that reproduces this issue or a replay of the bug

https://github.com/wilkinsonjack1993/next-js-webpack-bug

To Reproduce

Install deps with pnpm
run webapp from root: pnpm run dev:web
go to localhost:3000/test - observe that pages directory pages load as expected
go to localhost:3000 observe that page load fails with error: Error: Currently React only supports one RSC renderer at a time.

Go to next.config.js and remove the following:

webpack: (config, options) => {
if (options.isServer) {
  config.externals = [
    "react",
    "next-i18next",
    "react-dom",
    ...config.externals,
  ];
}

config.resolve.alias["react"] = path.resolve(
  __dirname,
  ".",
  "node_modules",
  "react"
);

config.resolve.alias["next-i18next"] = path.resolve(
  __dirname,
  ".",
  "node_modules",
  "next-i18next"
);

config.resolve.alias["react-dom"] = path.resolve(
  __dirname,
  ".",
  "node_modules",
  "react-dom"
);

return config;
},

Run the dev server again and see that the app directory page now loads correctly

Current vs. Expected behavior

Expected: App directory page loads correctly Actual: Error: Currently React only supports one RSC renderer at a time.

Verify canary release

[X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

"node": v16.15.1
"react": "^18.2.0",
"react-dom": "^18.2.0",
"next": "13.4.19",
"pnpm": 8.6.6

Which area(s) are affected? (Select all that apply)

App Router

Additional context

We have this configuration to get around the issue described here.

We use are using transpilePackages but that also has the same issue as the old next-transpile-modules package when it comes to resolving peer dependencies in packages.

moonman239 commented 1 year ago

I assume this wouldn't help:

https://github.com/vercel/next.js/issues/32514

moonman239 commented 1 year ago

FWIW I browsed through your code and the dependency in pages/_app.tx and didn't see the "getServerSideProps" function I'd expect if you were using server-side rendering.

moonman239 commented 1 year ago

I think I found the problem.

So, in your /pages/test.tsx you have this line:

await serverSideTranslations(locale, ["common", "footer"]))

You're not supposed to use server-side components in the /pages directory.

wilkinsonjack1993 commented 1 year ago

@moonman239 - Thank you for taking a look at this. The issue is not with the translations, but with how adding that bit of the webpack configuration stops RSC working in the app folder. I can't work out why the root page (in the app directory) throws the error: Error: Currently React only supports one RSC renderer at a time. .

You're not supposed to use server-side components in the /pages directory.

While you can't use RSC in the pages directory, that is not what we are doing in pages.tsx . We are doing serverside rendering which is doable in the pages folder.

vercel / next.js