From 79c5829813d07371d0f99a43a47c88e2b444fb1d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Fri, 21 Oct 2022 10:41:14 -0400 Subject: [PATCH] Let ReactDOM initialize in RSC (#25503) With the `react-dom/server-rendering-stub` you can import `react-dom` in RSC so that you can call `preload` and `preinit` but if you don't alias it, then requiring it breaks because we React.Component which doesn't exist in the react subset. --- .../__tests__/ReactDOMInReactServer-test.js | 24 +++++++++++++++++++ .../src/ReactFiberClassComponent.new.js | 4 +++- .../src/ReactFiberClassComponent.old.js | 4 +++- packages/react/react.shared-subset.js | 10 ++++++++ scripts/jest/setupHostConfigs.js | 8 +++++++ 5 files changed, 48 insertions(+), 2 deletions(-) create mode 100644 packages/react-dom/src/__tests__/ReactDOMInReactServer-test.js create mode 100644 packages/react/react.shared-subset.js diff --git a/packages/react-dom/src/__tests__/ReactDOMInReactServer-test.js b/packages/react-dom/src/__tests__/ReactDOMInReactServer-test.js new file mode 100644 index 0000000000000..3f62d7f25855a --- /dev/null +++ b/packages/react-dom/src/__tests__/ReactDOMInReactServer-test.js @@ -0,0 +1,24 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @emails react-core + */ + +'use strict'; + +describe('ReactDOMInReactServer', () => { + beforeEach(() => { + jest.resetModules(); + jest.mock('react', () => require('react/react.shared-subset')); + }); + + // @gate experimental && !www + it('can require react-dom', () => { + // In RSC this will be aliased. + require('react'); + require('react-dom'); + }); +}); diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.new.js b/packages/react-reconciler/src/ReactFiberClassComponent.new.js index f04422856e368..67352b1ca1867 100644 --- a/packages/react-reconciler/src/ReactFiberClassComponent.new.js +++ b/packages/react-reconciler/src/ReactFiberClassComponent.new.js @@ -82,7 +82,9 @@ const fakeInternalInstance = {}; // React.Component uses a shared frozen object by default. // We'll use it to determine whether we need to initialize legacy refs. -export const emptyRefsObject: $FlowFixMe = new React.Component().refs; +export const emptyRefsObject: $FlowFixMe = React.Component + ? new React.Component().refs + : {}; let didWarnAboutStateAssignmentForComponent; let didWarnAboutUninitializedState; diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.old.js b/packages/react-reconciler/src/ReactFiberClassComponent.old.js index ffc7b542a6c19..78962f3587ac2 100644 --- a/packages/react-reconciler/src/ReactFiberClassComponent.old.js +++ b/packages/react-reconciler/src/ReactFiberClassComponent.old.js @@ -82,7 +82,9 @@ const fakeInternalInstance = {}; // React.Component uses a shared frozen object by default. // We'll use it to determine whether we need to initialize legacy refs. -export const emptyRefsObject: $FlowFixMe = new React.Component().refs; +export const emptyRefsObject: $FlowFixMe = React.Component + ? new React.Component().refs + : {}; let didWarnAboutStateAssignmentForComponent; let didWarnAboutUninitializedState; diff --git a/packages/react/react.shared-subset.js b/packages/react/react.shared-subset.js new file mode 100644 index 0000000000000..e80a9c1e046cb --- /dev/null +++ b/packages/react/react.shared-subset.js @@ -0,0 +1,10 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow + */ + +export * from './src/ReactSharedSubset'; diff --git a/scripts/jest/setupHostConfigs.js b/scripts/jest/setupHostConfigs.js index b82367f2f493d..9f25e04bcf8f5 100644 --- a/scripts/jest/setupHostConfigs.js +++ b/scripts/jest/setupHostConfigs.js @@ -50,6 +50,14 @@ jest.mock('react', () => { return jest.requireActual(resolvedEntryPoint); }); +jest.mock('react/react.shared-subset', () => { + const resolvedEntryPoint = resolveEntryFork( + require.resolve('react/src/ReactSharedSubset'), + global.__WWW__ + ); + return jest.requireActual(resolvedEntryPoint); +}); + jest.mock('react-reconciler/src/ReactFiberReconciler', () => { return jest.requireActual( __VARIANT__