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

[wilkinsonjack1993]

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

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

To Reproduce

1. Install deps with pnpm
2. run webapp from root: pnpm run dev:web
3. go to localhost:3000/test - observe that pages directory pages load as expected
4. go to localhost:3000 observe that page load fails with error: Error: Currently React only supports one RSC renderer at a time.
5. 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;
  },

6. 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

• 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]

I assume this wouldn't help:

#32514

[moonman239]

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]

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]

@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.

[nextjs-bot]

This issue has been automatically marked as stale due to two years of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you.

[nextjs-bot]

This issue has been automatically closed due to two years of inactivity. If you’re still experiencing a similar problem or have additional details to share, please open a new issue following our current issue template. Your updated report helps us investigate and address concerns more efficiently. Thank you for your understanding!

[github-actions]

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