Skip to content

Commit

Permalink
Add fallback aliases for React (#43203)
Browse files Browse the repository at this point in the history
These aliases are needed by default (removed in
b0f87fb)
because when transpiling external packages specified via `file:./` in
package.json, these external packages might not have `react` in their
dependencies and the package manager might not move or link them into
the current project's node_modules. In these cases, `react` can't be
resolved unless we alias it.

Related discussions can be found in
#42136. This PR fixes the
test case
https://github.com/martpie/next-transpile-modules/blob/2f0b38197cafe7370aa6548d22c8d9bad244710f/src/__tests__/__files__/pages/test-local-typescript-module.tsx.

## 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 build && pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
  • Loading branch information
shuding authored Nov 23, 2022
1 parent 55232c2 commit 0caf800
Showing 1 changed file with 10 additions and 1 deletion.
11 changes: 10 additions & 1 deletion packages/next/build/webpack-config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -867,6 +867,9 @@ export default async function getBaseWebpackConfig(
[COMPILER_NAMES.edgeServer]: ['browser', 'module', 'main'],
}

const reactDir = path.dirname(require.resolve('react/package.json'))
const reactDomDir = path.dirname(require.resolve('react-dom/package.json'))

const resolveConfig = {
// Disable .mjs for node_modules bundling
extensions: isNodeServer
Expand Down Expand Up @@ -936,7 +939,13 @@ export default async function getBaseWebpackConfig(
'next/dist/compiled/react/jsx-dev-runtime',
'react/jsx-runtime$': 'next/dist/compiled/react/jsx-runtime',
}
: undefined),
: {
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`),
Expand Down

0 comments on commit 0caf800

Please sign in to comment.