Fix alias paths for bundling (#40800)

In the server layer, we used to alias `react` to the resolved path e.g. `/next.js/node_modules/.pnpm/react@0.0.0-experimental-e6a062bd2-20220913/node_modules/react`, but it turns out that webpack's enhanced resolver can't handle it correctly together with conditions, and the final resolved path is `/next.js/node_modules/.pnpm/react@0.0.0-experimental-e6a062bd2-20220913/node_modules/react/index.js`. If we change the alias to `react: 'react-exp'` then it correctly resolves to `/next.js/node_modules/.pnpm/react@0.0.0-experimental-e6a062bd2-20220913/node_modules/react/react.shared-subset.js`.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)

packages/next/build/webpack-config.ts

@@ -826,14 +826,6 @@ export default async function getBaseWebpackConfig(
     [COMPILER_NAMES.edgeServer]: ['browser', 'module', 'main'],
   }
 
-  const reactAliases = {
-    react: reactDir,
-    'react-dom$': reactDomDir,
-    'react-dom/server$': `${reactDomDir}/server`,
-    'react-dom/server.browser$': `${reactDomDir}/server.browser`,
-    'react-dom/client$': `${reactDomDir}/client`,
-  }
-
   const resolveConfig = {
     // Disable .mjs for node_modules bundling
     extensions: isNodeServer
@@ -846,7 +838,11 @@ export default async function getBaseWebpackConfig(
     alias: {
       next: NEXT_PROJECT_ROOT,
 
-      ...reactAliases,
+      react: reactDir,
+      'react-dom$': reactDomDir,
+      'react-dom/server$': `${reactDomDir}/server`,
+      'react-dom/server.browser$': `${reactDomDir}/server.browser`,
+      'react-dom/client$': `${reactDomDir}/client`,
 
       'styled-jsx/style$': require.resolve(`styled-jsx/style`),
       'styled-jsx$': require.resolve(`styled-jsx`),
@@ -1009,11 +1005,15 @@ export default async function getBaseWebpackConfig(
             // we need to provide that alias to webpack's resolver.
             alias: process.env.__NEXT_REACT_CHANNEL
               ? {
-                  ...reactAliases,
-                  'react/package.json': `${reactDir}/package.json`,
-                  'react/jsx-runtime': `${reactDir}/jsx-runtime`,
-                  'react/jsx-dev-runtime': `${reactDir}/jsx-dev-runtime`,
-                  'react-dom/package.json': `${reactDomDir}/package.json`,
+                  react: `react-${process.env.__NEXT_REACT_CHANNEL}`,
+                  'react/package.json': `react-${process.env.__NEXT_REACT_CHANNEL}/package.json`,
+                  'react/jsx-runtime': `react-${process.env.__NEXT_REACT_CHANNEL}/jsx-runtime`,
+                  'react/jsx-dev-runtime': `react-${process.env.__NEXT_REACT_CHANNEL}/jsx-dev-runtime`,
+                  'react-dom': `react-dom-${process.env.__NEXT_REACT_CHANNEL}`,
+                  'react-dom/package.json': `react-dom-${process.env.__NEXT_REACT_CHANNEL}/package.json`,
+                  'react-dom/server': `react-dom-${process.env.__NEXT_REACT_CHANNEL}/server`,
+                  'react-dom/server.browser': `react-dom-${process.env.__NEXT_REACT_CHANNEL}/server.browser`,
+                  'react-dom/client': `react-dom-${process.env.__NEXT_REACT_CHANNEL}/client`,
                 }
               : false,
             conditionNames: ['react-server'],