[v12.1.0] Using React 18 prevents starting without experimental in config (TypeError: Cannot set properties of undefined (setting 'reactRoot'))

[bennettdams]

Verify canary release

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

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
Binaries:
  Node: 16.13.0
  npm: 8.1.0
  Yarn: 1.22.5
  pnpm: N/A
Relevant packages:
  next: 12.1.0
  react: 18.0.0-rc.0
  react-dom: 18.0.0-rc.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Starting with v12.1.0, you can't use React 18 when you don't use the experimental field in the next.config.js

That's because this recent change sets reactRoot on the user's config without checking if the key already exists:

next.js/packages/next/server/config.ts

Lines 679 to 682 in 787186a

	const hasReactRoot = shouldUseReactRoot()
	if (hasReactRoot) {
	userConfig.experimental.reactRoot = true
	}

Expected Behavior

• React 18 should be usable without using the experimental field in the next.config.js
  or
• the docs for React 18 should mention that it is mandatory to set the field

To Reproduce

1. Install via Create Next App
   npx create-next-app@latest --ts --use-npm .
2. Install React 18
   npm install next@latest react@rc react-dom@rc
3. Start the app
   npm run dev

[clianor]

I fixed this by modifying next.config.js as follows:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    reactRoot: true
  }
}

module.exports = nextConfig

[bennettdams]

@clianor Yep, that works. I created a PR that fixes this, which already got merged, so in the next release that shouldn't be needed anymore.

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