{"commit":{"authorName":"Dan Abramov","authoredAt":"2020-04-01T18:31:59+01:00","subject":"Disable module components dynamically for WWW (#18446)","shortRevision":"d8d2b6e89c","authorEmail":"dan.abramov@gmail.com","revision":"d8d2b6e89cdff27a1ac246c6e9e030c2cc8760e3"},"parents":["e2c6702fcaaee35ca08957be7645820192d0daf3"],"files":[{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactComponentLifeCycle-test.js"},{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactCompositeComponent-test.js"},{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactCompositeComponentState-test.js"},{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationElements-test.js"},{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactErrorBoundaries-test.internal.js"},{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactLegacyErrorBoundaries-test.internal.js"},{"status":"M","path":"packages\/react-dom\/src\/__tests__\/refs-test.js"},{"status":"M","path":"packages\/react-dom\/src\/server\/ReactPartialRenderer.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberBeginWork.js"},{"status":"M","path":"packages\/react-reconciler\/src\/__tests__\/ReactHooks-test.internal.js"},{"status":"M","path":"packages\/react-reconciler\/src\/__tests__\/ReactHooksWithNoopRenderer-test.internal.js"},{"status":"M","path":"packages\/react-reconciler\/src\/__tests__\/ReactIncremental-test.internal.js"},{"status":"M","path":"packages\/react-reconciler\/src\/__tests__\/ReactIncrementalErrorHandling-test.internal.js"},{"status":"M","path":"packages\/react-refresh\/src\/__tests__\/ReactFreshIntegration-test.js"},{"status":"M","path":"packages\/shared\/forks\/ReactFeatureFlags.testing.www.js"},{"status":"M","path":"packages\/shared\/forks\/ReactFeatureFlags.www-dynamic.js"},{"status":"M","path":"packages\/shared\/forks\/ReactFeatureFlags.www.js"},{"status":"M","path":"scripts\/jest\/setupTests.www.js"}],"body":"* Make disableModulePatternComponents dynamic for WWW\r\n\r\n* Run both flags and tests and respect the flag in SSR","patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactComponentLifeCycle-test.js b\/packages\/react-dom\/src\/__tests__\/ReactComponentLifeCycle-test.js\nindex 6b51eb6a12..bfe41c540b 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactComponentLifeCycle-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactComponentLifeCycle-test.js\n@@ -983,64 +983,66 @@ describe('ReactComponentLifeCycle', () => {\n });\n });\n \n- it('calls effects on module-pattern component', function() {\n- const log = [];\n+ if (!require('shared\/ReactFeatureFlags').disableModulePatternComponents) {\n+ it('calls effects on module-pattern component', function() {\n+ const log = [];\n \n- function Parent() {\n- return {\n- render() {\n- expect(typeof this.props).toBe('object');\n- log.push('render');\n- return ;\n- },\n- UNSAFE_componentWillMount() {\n- log.push('will mount');\n- },\n- componentDidMount() {\n- log.push('did mount');\n- },\n- componentDidUpdate() {\n- log.push('did update');\n- },\n- getChildContext() {\n- return {x: 2};\n- },\n+ function Parent() {\n+ return {\n+ render() {\n+ expect(typeof this.props).toBe('object');\n+ log.push('render');\n+ return ;\n+ },\n+ UNSAFE_componentWillMount() {\n+ log.push('will mount');\n+ },\n+ componentDidMount() {\n+ log.push('did mount');\n+ },\n+ componentDidUpdate() {\n+ log.push('did update');\n+ },\n+ getChildContext() {\n+ return {x: 2};\n+ },\n+ };\n+ }\n+ Parent.childContextTypes = {\n+ x: PropTypes.number,\n+ };\n+ function Child(props, context) {\n+ expect(context.x).toBe(2);\n+ return

;\n+ }\n+ Child.contextTypes = {\n+ x: PropTypes.number,\n };\n- }\n- Parent.childContextTypes = {\n- x: PropTypes.number,\n- };\n- function Child(props, context) {\n- expect(context.x).toBe(2);\n- return

;\n- }\n- Child.contextTypes = {\n- x: PropTypes.number,\n- };\n-\n- const div = document.createElement('div');\n- expect(() =>\n- ReactDOM.render( c && log.push('ref')} \/>, div),\n- ).toErrorDev(\n- 'Warning: The component appears to be a function component that returns a class instance. ' +\n- 'Change Parent to a class that extends React.Component instead. ' +\n- \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n- '`Parent.prototype = React.Component.prototype`. ' +\n- \"Don't use an arrow function since it cannot be called with `new` by React.\",\n- );\n- ReactDOM.render( c && log.push('ref')} \/>, div);\n-\n- expect(log).toEqual([\n- 'will mount',\n- 'render',\n- 'did mount',\n- 'ref',\n \n- 'render',\n- 'did update',\n- 'ref',\n- ]);\n- });\n+ const div = document.createElement('div');\n+ expect(() =>\n+ ReactDOM.render( c && log.push('ref')} \/>, div),\n+ ).toErrorDev(\n+ 'Warning: The component appears to be a function component that returns a class instance. ' +\n+ 'Change Parent to a class that extends React.Component instead. ' +\n+ \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n+ '`Parent.prototype = React.Component.prototype`. ' +\n+ \"Don't use an arrow function since it cannot be called with `new` by React.\",\n+ );\n+ ReactDOM.render( c && log.push('ref')} \/>, div);\n+\n+ expect(log).toEqual([\n+ 'will mount',\n+ 'render',\n+ 'did mount',\n+ 'ref',\n+\n+ 'render',\n+ 'did update',\n+ 'ref',\n+ ]);\n+ });\n+ }\n \n it('should warn if getDerivedStateFromProps returns undefined', () => {\n class MyComponent extends React.Component {\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactCompositeComponent-test.js b\/packages\/react-dom\/src\/__tests__\/ReactCompositeComponent-test.js\nindex 98396fb6eb..73984da6c4 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactCompositeComponent-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactCompositeComponent-test.js\n@@ -108,26 +108,53 @@ describe('ReactCompositeComponent', () => {\n };\n });\n \n- it('should support module pattern components', () => {\n- function Child({test}) {\n- return {\n- render() {\n- return

{test}<\/div>;\n- },\n- };\n- }\n+ if (require('shared\/ReactFeatureFlags').disableModulePatternComponents) {\n+ it('should not support module pattern components', () => {\n+ function Child({test}) {\n+ return {\n+ render() {\n+ return

{test}<\/div>;\n+ },\n+ };\n+ }\n \n- const el = document.createElement('div');\n- expect(() => ReactDOM.render(, el)).toErrorDev(\n- 'Warning: The component appears to be a function component that returns a class instance. ' +\n- 'Change Child to a class that extends React.Component instead. ' +\n- \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n- '`Child.prototype = React.Component.prototype`. ' +\n- \"Don't use an arrow function since it cannot be called with `new` by React.\",\n- );\n+ const el = document.createElement('div');\n+ expect(() => {\n+ expect(() => ReactDOM.render(, el)).toThrow(\n+ 'Objects are not valid as a React child (found: object with keys {render}).',\n+ );\n+ }).toErrorDev(\n+ 'Warning: The component appears to be a function component that returns a class instance. ' +\n+ 'Change Child to a class that extends React.Component instead. ' +\n+ \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n+ '`Child.prototype = React.Component.prototype`. ' +\n+ \"Don't use an arrow function since it cannot be called with `new` by React.\",\n+ );\n \n- expect(el.textContent).toBe('test');\n- });\n+ expect(el.textContent).toBe('');\n+ });\n+ } else {\n+ it('should support module pattern components', () => {\n+ function Child({test}) {\n+ return {\n+ render() {\n+ return

{test}<\/div>;\n+ },\n+ };\n+ }\n+\n+ const el = document.createElement('div');\n+ expect(() => ReactDOM.render(, el)).toErrorDev(\n+ 'Warning: The component appears to be a function component that returns a class instance. ' +\n+ 'Change Child to a class that extends React.Component instead. ' +\n+ \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n+ '`Child.prototype = React.Component.prototype`. ' +\n+ \"Don't use an arrow function since it cannot be called with `new` by React.\",\n+ );\n+\n+ expect(el.textContent).toBe('test');\n+ });\n+ }\n \n it('should support rendering to different child types over time', () => {\n const instance = ReactTestUtils.renderIntoDocument();\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactCompositeComponentState-test.js b\/packages\/react-dom\/src\/__tests__\/ReactCompositeComponentState-test.js\nindex 70e15b769e..5708d67edb 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactCompositeComponentState-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactCompositeComponentState-test.js\n@@ -459,55 +459,57 @@ describe('ReactCompositeComponent-state', () => {\n ]);\n });\n \n- it('should support stateful module pattern components', () => {\n- function Child() {\n- return {\n- state: {\n- count: 123,\n- },\n- render() {\n- return

{`count:${this.state.count}`}<\/div>;\n- },\n- };\n- }\n+ if (!require('shared\/ReactFeatureFlags').disableModulePatternComponents) {\n+ it('should support stateful module pattern components', () => {\n+ function Child() {\n+ return {\n+ state: {\n+ count: 123,\n+ },\n+ render() {\n+ return

{`count:${this.state.count}`}<\/div>;\n+ },\n+ };\n+ }\n \n- const el = document.createElement('div');\n- expect(() => ReactDOM.render(, el)).toErrorDev(\n- 'Warning: The component appears to be a function component that returns a class instance. ' +\n- 'Change Child to a class that extends React.Component instead. ' +\n- \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n- '`Child.prototype = React.Component.prototype`. ' +\n- \"Don't use an arrow function since it cannot be called with `new` by React.\",\n- );\n+ const el = document.createElement('div');\n+ expect(() => ReactDOM.render(, el)).toErrorDev(\n+ 'Warning: The component appears to be a function component that returns a class instance. ' +\n+ 'Change Child to a class that extends React.Component instead. ' +\n+ \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n+ '`Child.prototype = React.Component.prototype`. ' +\n+ \"Don't use an arrow function since it cannot be called with `new` by React.\",\n+ );\n \n- expect(el.textContent).toBe('count:123');\n- });\n+ expect(el.textContent).toBe('count:123');\n+ });\n \n- it('should support getDerivedStateFromProps for module pattern components', () => {\n- function Child() {\n- return {\n- state: {\n- count: 1,\n- },\n- render() {\n- return

{`count:${this.state.count}`}<\/div>;\n- },\n- };\n- }\n- Child.getDerivedStateFromProps = (props, prevState) => {\n- return {\n- count: prevState.count + props.incrementBy,\n+ it('should support getDerivedStateFromProps for module pattern components', () => {\n+ function Child() {\n+ return {\n+ state: {\n+ count: 1,\n+ },\n+ render() {\n+ return

{`count:${this.state.count}`}<\/div>;\n+ },\n+ };\n+ }\n+ Child.getDerivedStateFromProps = (props, prevState) => {\n+ return {\n+ count: prevState.count + props.incrementBy,\n+ };\n };\n- };\n \n- const el = document.createElement('div');\n- ReactDOM.render(, el);\n- expect(el.textContent).toBe('count:1');\n+ const el = document.createElement('div');\n+ ReactDOM.render(, el);\n+ expect(el.textContent).toBe('count:1');\n \n- ReactDOM.render(, el);\n- expect(el.textContent).toBe('count:3');\n+ ReactDOM.render(, el);\n+ expect(el.textContent).toBe('count:3');\n \n- ReactDOM.render(, el);\n- expect(el.textContent).toBe('count:4');\n- });\n+ ReactDOM.render(, el);\n+ expect(el.textContent).toBe('count:4');\n+ });\n+ }\n });\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationElements-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationElements-test.js\nindex 5d56419a1a..383bcd03e5 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationElements-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationElements-test.js\n@@ -644,16 +644,33 @@ describe('ReactDOMServerIntegration', () => {\n checkFooDiv(await render());\n });\n \n- itRenders('factory components', async render => {\n- const FactoryComponent = () => {\n- return {\n- render: function() {\n- return

foo<\/div>;\n- },\n+ if (require('shared\/ReactFeatureFlags').disableModulePatternComponents) {\n+ itThrowsWhenRendering(\n+ 'factory components',\n+ async render => {\n+ const FactoryComponent = () => {\n+ return {\n+ render: function() {\n+ return

foo<\/div>;\n+ },\n+ };\n+ };\n+ await render(, 1);\n+ },\n+ 'Objects are not valid as a React child (found: object with keys {render})',\n+ );\n+ } else {\n+ itRenders('factory components', async render => {\n+ const FactoryComponent = () => {\n+ return {\n+ render: function() {\n+ return

foo<\/div>;\n+ },\n+ };\n };\n- };\n- checkFooDiv(await render(, 1));\n- });\n+ checkFooDiv(await render(, 1));\n+ });\n+ }\n });\n \n describe('component hierarchies', function() {\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactErrorBoundaries-test.internal.js b\/packages\/react-dom\/src\/__tests__\/ReactErrorBoundaries-test.internal.js\nindex 057a0e4ae8..7f5ff9efb2 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactErrorBoundaries-test.internal.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactErrorBoundaries-test.internal.js\n@@ -782,43 +782,45 @@ describe('ReactErrorBoundaries', () => {\n expect(container.firstChild.textContent).toBe('Caught an error: Hello.');\n });\n \n- it('renders an error state if module-style context provider throws in componentWillMount', () => {\n- function BrokenComponentWillMountWithContext() {\n- return {\n- getChildContext() {\n- return {foo: 42};\n- },\n- render() {\n- return

{this.props.children}<\/div>;\n- },\n- UNSAFE_componentWillMount() {\n- throw new Error('Hello');\n- },\n+ if (!require('shared\/ReactFeatureFlags').disableModulePatternComponents) {\n+ it('renders an error state if module-style context provider throws in componentWillMount', () => {\n+ function BrokenComponentWillMountWithContext() {\n+ return {\n+ getChildContext() {\n+ return {foo: 42};\n+ },\n+ render() {\n+ return

{this.props.children}<\/div>;\n+ },\n+ UNSAFE_componentWillMount() {\n+ throw new Error('Hello');\n+ },\n+ };\n+ }\n+ BrokenComponentWillMountWithContext.childContextTypes = {\n+ foo: PropTypes.number,\n };\n- }\n- BrokenComponentWillMountWithContext.childContextTypes = {\n- foo: PropTypes.number,\n- };\n \n- const container = document.createElement('div');\n- expect(() =>\n- ReactDOM.render(\n- \n- \n- <\/ErrorBoundary>,\n- container,\n- ),\n- ).toErrorDev(\n- 'Warning: The component appears to be a function component that ' +\n- 'returns a class instance. ' +\n- 'Change BrokenComponentWillMountWithContext to a class that extends React.Component instead. ' +\n- \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n- '`BrokenComponentWillMountWithContext.prototype = React.Component.prototype`. ' +\n- \"Don't use an arrow function since it cannot be called with `new` by React.\",\n- );\n+ const container = document.createElement('div');\n+ expect(() =>\n+ ReactDOM.render(\n+ \n+ \n+ <\/ErrorBoundary>,\n+ container,\n+ ),\n+ ).toErrorDev(\n+ 'Warning: The component appears to be a function component that ' +\n+ 'returns a class instance. ' +\n+ 'Change BrokenComponentWillMountWithContext to a class that extends React.Component instead. ' +\n+ \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n+ '`BrokenComponentWillMountWithContext.prototype = React.Component.prototype`. ' +\n+ \"Don't use an arrow function since it cannot be called with `new` by React.\",\n+ );\n \n- expect(container.firstChild.textContent).toBe('Caught an error: Hello.');\n- });\n+ expect(container.firstChild.textContent).toBe('Caught an error: Hello.');\n+ });\n+ }\n \n it('mounts the error message if mounting fails', () => {\n function renderError(error) {\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactLegacyErrorBoundaries-test.internal.js b\/packages\/react-dom\/src\/__tests__\/ReactLegacyErrorBoundaries-test.internal.js\nindex 1dff2312b4..25a7ab2452 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactLegacyErrorBoundaries-test.internal.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactLegacyErrorBoundaries-test.internal.js\n@@ -814,42 +814,44 @@ describe('ReactLegacyErrorBoundaries', () => {\n expect(container.firstChild.textContent).toBe('Caught an error: Hello.');\n });\n \n- it('renders an error state if module-style context provider throws in componentWillMount', () => {\n- function BrokenComponentWillMountWithContext() {\n- return {\n- getChildContext() {\n- return {foo: 42};\n- },\n- render() {\n- return

{this.props.children}<\/div>;\n+ },\n+ UNSAFE_componentWillMount() {\n+ throw new Error('Hello');\n+ },\n+ };\n+ }\n+ BrokenComponentWillMountWithContext.childContextTypes = {\n+ foo: PropTypes.number,\n };\n- }\n- BrokenComponentWillMountWithContext.childContextTypes = {\n- foo: PropTypes.number,\n- };\n \n- const container = document.createElement('div');\n- expect(() =>\n- ReactDOM.render(\n- \n- \n- <\/ErrorBoundary>,\n- container,\n- ),\n- ).toErrorDev(\n- 'Warning: The component appears to be a function component that ' +\n- 'returns a class instance. ' +\n- 'Change BrokenComponentWillMountWithContext to a class that extends React.Component instead. ' +\n- \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n- '`BrokenComponentWillMountWithContext.prototype = React.Component.prototype`. ' +\n- \"Don't use an arrow function since it cannot be called with `new` by React.\",\n- );\n- expect(container.firstChild.textContent).toBe('Caught an error: Hello.');\n- });\n+ const container = document.createElement('div');\n+ expect(() =>\n+ ReactDOM.render(\n+ \n+ \n+ <\/ErrorBoundary>,\n+ container,\n+ ),\n+ ).toErrorDev(\n+ 'Warning: The component appears to be a function component that ' +\n+ 'returns a class instance. ' +\n+ 'Change BrokenComponentWillMountWithContext to a class that extends React.Component instead. ' +\n+ \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n+ '`BrokenComponentWillMountWithContext.prototype = React.Component.prototype`. ' +\n+ \"Don't use an arrow function since it cannot be called with `new` by React.\",\n+ );\n+ expect(container.firstChild.textContent).toBe('Caught an error: Hello.');\n+ });\n+ }\n \n it('mounts the error message if mounting fails', () => {\n function renderError(error) {\ndiff --git a\/packages\/react-dom\/src\/__tests__\/refs-test.js b\/packages\/react-dom\/src\/__tests__\/refs-test.js\nindex 6d4bd943d4..972e454e39 100644\n--- a\/packages\/react-dom\/src\/__tests__\/refs-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/refs-test.js\n@@ -156,29 +156,31 @@ describe('reactiverefs', () => {\n });\n });\n \n-describe('factory components', () => {\n- it('Should correctly get the ref', () => {\n- function Comp() {\n- return {\n- render() {\n- return

;\n- },\n- };\n- }\n+if (!require('shared\/ReactFeatureFlags').disableModulePatternComponents) {\n+ describe('factory components', () => {\n+ it('Should correctly get the ref', () => {\n+ function Comp() {\n+ return {\n+ render() {\n+ return

;\n+ },\n+ };\n+ }\n \n- let inst;\n- expect(\n- () => (inst = ReactTestUtils.renderIntoDocument()),\n- ).toErrorDev(\n- 'Warning: The component appears to be a function component that returns a class instance. ' +\n- 'Change Comp to a class that extends React.Component instead. ' +\n- \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n- '`Comp.prototype = React.Component.prototype`. ' +\n- \"Don't use an arrow function since it cannot be called with `new` by React.\",\n- );\n- expect(inst.refs.elemRef.tagName).toBe('DIV');\n+ let inst;\n+ expect(\n+ () => (inst = ReactTestUtils.renderIntoDocument()),\n+ ).toErrorDev(\n+ 'Warning: The component appears to be a function component that returns a class instance. ' +\n+ 'Change Comp to a class that extends React.Component instead. ' +\n+ \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n+ '`Comp.prototype = React.Component.prototype`. ' +\n+ \"Don't use an arrow function since it cannot be called with `new` by React.\",\n+ );\n+ expect(inst.refs.elemRef.tagName).toBe('DIV');\n+ });\n });\n-});\n+}\n \n \/**\n * Tests that when a ref hops around children, we can track that correctly.\ndiff --git a\/packages\/react-dom\/src\/server\/ReactPartialRenderer.js b\/packages\/react-dom\/src\/server\/ReactPartialRenderer.js\nindex 919d58a589..94b0ca3f96 100644\n--- a\/packages\/react-dom\/src\/server\/ReactPartialRenderer.js\n+++ b\/packages\/react-dom\/src\/server\/ReactPartialRenderer.js\n@@ -20,6 +20,7 @@ import ReactSharedInternals from 'shared\/ReactSharedInternals';\n import {\n warnAboutDeprecatedLifecycles,\n disableLegacyContext,\n+ disableModulePatternComponents,\n enableSuspenseServerRenderer,\n enableFundamentalAPI,\n enableDeprecatedFlareAPI,\n@@ -527,28 +528,38 @@ function resolve(\n inst = Component(element.props, publicContext, updater);\n inst = finishHooks(Component, element.props, inst, publicContext);\n \n- if (inst == null || inst.render == null) {\n+ if (__DEV__) {\n+ \/\/ Support for module components is deprecated and is removed behind a flag.\n+ \/\/ Whether or not it would crash later, we want to show a good message in DEV first.\n+ if (inst != null && inst.render != null) {\n+ const componentName = getComponentName(Component) || 'Unknown';\n+ if (!didWarnAboutModulePatternComponent[componentName]) {\n+ console.error(\n+ 'The <%s \/> component appears to be a function component that returns a class instance. ' +\n+ 'Change %s to a class that extends React.Component instead. ' +\n+ \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n+ \"`%s.prototype = React.Component.prototype`. Don't use an arrow function since it \" +\n+ 'cannot be called with `new` by React.',\n+ componentName,\n+ componentName,\n+ componentName,\n+ );\n+ didWarnAboutModulePatternComponent[componentName] = true;\n+ }\n+ }\n+ }\n+\n+ \/\/ If the flag is on, everything is assumed to be a function component.\n+ \/\/ Otherwise, we also do the unfortunate dynamic checks.\n+ if (\n+ disableModulePatternComponents ||\n+ inst == null ||\n+ inst.render == null\n+ ) {\n child = inst;\n validateRenderResult(child, Component);\n return;\n }\n-\n- if (__DEV__) {\n- const componentName = getComponentName(Component) || 'Unknown';\n- if (!didWarnAboutModulePatternComponent[componentName]) {\n- console.error(\n- 'The <%s \/> component appears to be a function component that returns a class instance. ' +\n- 'Change %s to a class that extends React.Component instead. ' +\n- \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n- \"`%s.prototype = React.Component.prototype`. Don't use an arrow function since it \" +\n- 'cannot be called with `new` by React.',\n- componentName,\n- componentName,\n- componentName,\n- );\n- didWarnAboutModulePatternComponent[componentName] = true;\n- }\n- }\n }\n \n inst.props = element.props;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\nindex 2c6472c60f..97d088d143 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\n@@ -1374,7 +1374,35 @@ function mountIndeterminateComponent(\n \/\/ React DevTools reads this flag.\n workInProgress.effectTag |= PerformedWork;\n \n+ if (__DEV__) {\n+ \/\/ Support for module components is deprecated and is removed behind a flag.\n+ \/\/ Whether or not it would crash later, we want to show a good message in DEV first.\n+ if (\n+ typeof value === 'object' &&\n+ value !== null &&\n+ typeof value.render === 'function' &&\n+ value.$$typeof === undefined\n+ ) {\n+ const componentName = getComponentName(Component) || 'Unknown';\n+ if (!didWarnAboutModulePatternComponent[componentName]) {\n+ console.error(\n+ 'The <%s \/> component appears to be a function component that returns a class instance. ' +\n+ 'Change %s to a class that extends React.Component instead. ' +\n+ \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n+ \"`%s.prototype = React.Component.prototype`. Don't use an arrow function since it \" +\n+ 'cannot be called with `new` by React.',\n+ componentName,\n+ componentName,\n+ componentName,\n+ );\n+ didWarnAboutModulePatternComponent[componentName] = true;\n+ }\n+ }\n+ }\n+\n if (\n+ \/\/ Run these checks in production only if the flag is off.\n+ \/\/ Eventually we'll delete this branch altogether.\n !disableModulePatternComponents &&\n typeof value === 'object' &&\n value !== null &&\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactHooks-test.internal.js b\/packages\/react-reconciler\/src\/__tests__\/ReactHooks-test.internal.js\nindex 9c527fed58..dfd2bb48c8 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactHooks-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactHooks-test.internal.js\n@@ -1237,6 +1237,7 @@ describe('ReactHooks', () => {\n 'Context can only be read while React is rendering',\n );\n });\n+\n it('double-invokes components with Hooks in Strict Mode', () => {\n ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = true;\n \n@@ -1351,32 +1352,35 @@ describe('ReactHooks', () => {\n );\n expect(renderCount).toBe(__DEV__ ? 2 : 1);\n \n- renderCount = 0;\n- expect(() => renderer.update()).toErrorDev(\n- 'Warning: The component appears to be a function component that returns a class instance. ' +\n- 'Change Factory to a class that extends React.Component instead. ' +\n- \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n- '`Factory.prototype = React.Component.prototype`. ' +\n- \"Don't use an arrow function since it cannot be called with `new` by React.\",\n- );\n- expect(renderCount).toBe(1);\n- renderCount = 0;\n- renderer.update();\n- expect(renderCount).toBe(1);\n- renderCount = 0;\n- renderer.update(\n- \n- \n- <\/StrictMode>,\n- );\n- expect(renderCount).toBe(__DEV__ ? 2 : 1); \/\/ Treated like a class\n- renderCount = 0;\n- renderer.update(\n- \n- \n- <\/StrictMode>,\n- );\n- expect(renderCount).toBe(__DEV__ ? 2 : 1); \/\/ Treated like a class\n+ if (!require('shared\/ReactFeatureFlags').disableModulePatternComponents) {\n+ renderCount = 0;\n+ expect(() => renderer.update()).toErrorDev(\n+ 'Warning: The component appears to be a function component that returns a class instance. ' +\n+ 'Change Factory to a class that extends React.Component instead. ' +\n+ \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n+ '`Factory.prototype = React.Component.prototype`. ' +\n+ \"Don't use an arrow function since it cannot be called with `new` by React.\",\n+ );\n+ expect(renderCount).toBe(1);\n+ renderCount = 0;\n+ renderer.update();\n+ expect(renderCount).toBe(1);\n+\n+ renderCount = 0;\n+ renderer.update(\n+ \n+ \n+ <\/StrictMode>,\n+ );\n+ expect(renderCount).toBe(__DEV__ ? 2 : 1); \/\/ Treated like a class\n+ renderCount = 0;\n+ renderer.update(\n+ \n+ \n+ <\/StrictMode>,\n+ );\n+ expect(renderCount).toBe(__DEV__ ? 2 : 1); \/\/ Treated like a class\n+ }\n \n renderCount = 0;\n renderer.update();\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactHooksWithNoopRenderer-test.internal.js b\/packages\/react-reconciler\/src\/__tests__\/ReactHooksWithNoopRenderer-test.internal.js\nindex dec9258996..a04578381d 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactHooksWithNoopRenderer-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactHooksWithNoopRenderer-test.internal.js\n@@ -187,41 +187,43 @@ describe('ReactHooksWithNoopRenderer', () => {\n expect(Scheduler).toFlushAndYield([10]);\n });\n \n- it('throws inside module-style components', () => {\n- function Counter() {\n- return {\n- render() {\n- const [count] = useState(0);\n- return ;\n- },\n- };\n- }\n- ReactNoop.render();\n- expect(() =>\n- expect(Scheduler).toFlushAndThrow(\n- 'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen ' +\n- 'for one of the following reasons:\\n' +\n- '1. You might have mismatching versions of React and the renderer (such as React DOM)\\n' +\n- '2. You might be breaking the Rules of Hooks\\n' +\n- '3. You might have more than one copy of React in the same app\\n' +\n- 'See https:\/\/fb.me\/react-invalid-hook-call for tips about how to debug and fix this problem.',\n- ),\n- ).toErrorDev(\n- 'Warning: The component appears to be a function component that returns a class instance. ' +\n- 'Change Counter to a class that extends React.Component instead. ' +\n- \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n- '`Counter.prototype = React.Component.prototype`. ' +\n- \"Don't use an arrow function since it cannot be called with `new` by React.\",\n- );\n+ if (!require('shared\/ReactFeatureFlags').disableModulePatternComponents) {\n+ it('throws inside module-style components', () => {\n+ function Counter() {\n+ return {\n+ render() {\n+ const [count] = useState(0);\n+ return ;\n+ },\n+ };\n+ }\n+ ReactNoop.render();\n+ expect(() =>\n+ expect(Scheduler).toFlushAndThrow(\n+ 'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen ' +\n+ 'for one of the following reasons:\\n' +\n+ '1. You might have mismatching versions of React and the renderer (such as React DOM)\\n' +\n+ '2. You might be breaking the Rules of Hooks\\n' +\n+ '3. You might have more than one copy of React in the same app\\n' +\n+ 'See https:\/\/fb.me\/react-invalid-hook-call for tips about how to debug and fix this problem.',\n+ ),\n+ ).toErrorDev(\n+ 'Warning: The component appears to be a function component that returns a class instance. ' +\n+ 'Change Counter to a class that extends React.Component instead. ' +\n+ \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n+ '`Counter.prototype = React.Component.prototype`. ' +\n+ \"Don't use an arrow function since it cannot be called with `new` by React.\",\n+ );\n \n- \/\/ Confirm that a subsequent hook works properly.\n- function GoodCounter(props) {\n- const [count] = useState(props.initialCount);\n- return ;\n- }\n- ReactNoop.render();\n- expect(Scheduler).toFlushAndYield([10]);\n- });\n+ \/\/ Confirm that a subsequent hook works properly.\n+ function GoodCounter(props) {\n+ const [count] = useState(props.initialCount);\n+ return ;\n+ }\n+ ReactNoop.render();\n+ expect(Scheduler).toFlushAndYield([10]);\n+ });\n+ }\n \n it('throws when called outside the render phase', () => {\n expect(() => useState(0)).toThrow(\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactIncremental-test.internal.js b\/packages\/react-reconciler\/src\/__tests__\/ReactIncremental-test.internal.js\nindex a5e1a0ace5..6da7c63472 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactIncremental-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactIncremental-test.internal.js\n@@ -2012,48 +2012,50 @@ describe('ReactIncremental', () => {\n ]);\n });\n \n- it('does not leak own context into context provider (factory components)', () => {\n- const ops = [];\n- function Recurse(props, context) {\n- return {\n- getChildContext() {\n- return {n: (context.n || 3) - 1};\n- },\n- render() {\n- ops.push('Recurse ' + JSON.stringify(context));\n- if (context.n === 0) {\n- return null;\n- }\n- return ;\n- },\n+ if (!require('shared\/ReactFeatureFlags').disableModulePatternComponents) {\n+ it('does not leak own context into context provider (factory components)', () => {\n+ const ops = [];\n+ function Recurse(props, context) {\n+ return {\n+ getChildContext() {\n+ return {n: (context.n || 3) - 1};\n+ },\n+ render() {\n+ ops.push('Recurse ' + JSON.stringify(context));\n+ if (context.n === 0) {\n+ return null;\n+ }\n+ return ;\n+ },\n+ };\n+ }\n+ Recurse.contextTypes = {\n+ n: PropTypes.number,\n+ };\n+ Recurse.childContextTypes = {\n+ n: PropTypes.number,\n };\n- }\n- Recurse.contextTypes = {\n- n: PropTypes.number,\n- };\n- Recurse.childContextTypes = {\n- n: PropTypes.number,\n- };\n \n- ReactNoop.render();\n- expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev([\n- 'Warning: The component appears to be a function component that returns a class instance. ' +\n- 'Change Recurse to a class that extends React.Component instead. ' +\n- \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n- '`Recurse.prototype = React.Component.prototype`. ' +\n- \"Don't use an arrow function since it cannot be called with `new` by React.\",\n- 'Legacy context API has been detected within a strict-mode tree.\\n\\n' +\n- 'The old API will be supported in all 16.x releases, but applications ' +\n- 'using it should migrate to the new version.\\n\\n' +\n- 'Please update the following components: Recurse',\n- ]);\n- expect(ops).toEqual([\n- 'Recurse {}',\n- 'Recurse {\"n\":2}',\n- 'Recurse {\"n\":1}',\n- 'Recurse {\"n\":0}',\n- ]);\n- });\n+ ReactNoop.render();\n+ expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev([\n+ 'Warning: The component appears to be a function component that returns a class instance. ' +\n+ 'Change Recurse to a class that extends React.Component instead. ' +\n+ \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n+ '`Recurse.prototype = React.Component.prototype`. ' +\n+ \"Don't use an arrow function since it cannot be called with `new` by React.\",\n+ 'Legacy context API has been detected within a strict-mode tree.\\n\\n' +\n+ 'The old API will be supported in all 16.x releases, but applications ' +\n+ 'using it should migrate to the new version.\\n\\n' +\n+ 'Please update the following components: Recurse',\n+ ]);\n+ expect(ops).toEqual([\n+ 'Recurse {}',\n+ 'Recurse {\"n\":2}',\n+ 'Recurse {\"n\":1}',\n+ 'Recurse {\"n\":0}',\n+ ]);\n+ });\n+ }\n \n it('provides context when reusing work', () => {\n class Intl extends React.Component {\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactIncrementalErrorHandling-test.internal.js b\/packages\/react-reconciler\/src\/__tests__\/ReactIncrementalErrorHandling-test.internal.js\nindex e064861a03..0ed45b631d 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactIncrementalErrorHandling-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactIncrementalErrorHandling-test.internal.js\n@@ -1695,39 +1695,41 @@ describe('ReactIncrementalErrorHandling', () => {\n expect(ReactNoop.getChildren()).toEqual([span('Caught an error: Hello')]);\n });\n \n- it('handles error thrown inside getDerivedStateFromProps of a module-style context provider', () => {\n- function Provider() {\n- return {\n- getChildContext() {\n- return {foo: 'bar'};\n- },\n- render() {\n- return 'Hi';\n- },\n+ if (!require('shared\/ReactFeatureFlags').disableModulePatternComponents) {\n+ it('handles error thrown inside getDerivedStateFromProps of a module-style context provider', () => {\n+ function Provider() {\n+ return {\n+ getChildContext() {\n+ return {foo: 'bar'};\n+ },\n+ render() {\n+ return 'Hi';\n+ },\n+ };\n+ }\n+ Provider.childContextTypes = {\n+ x: () => {},\n+ };\n+ Provider.getDerivedStateFromProps = () => {\n+ throw new Error('Oops!');\n };\n- }\n- Provider.childContextTypes = {\n- x: () => {},\n- };\n- Provider.getDerivedStateFromProps = () => {\n- throw new Error('Oops!');\n- };\n \n- ReactNoop.render();\n- expect(() => {\n- expect(Scheduler).toFlushAndThrow('Oops!');\n- }).toErrorDev([\n- 'Warning: The component appears to be a function component that returns a class instance. ' +\n- 'Change Provider to a class that extends React.Component instead. ' +\n- \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n- '`Provider.prototype = React.Component.prototype`. ' +\n- \"Don't use an arrow function since it cannot be called with `new` by React.\",\n- 'Legacy context API has been detected within a strict-mode tree.\\n\\n' +\n- 'The old API will be supported in all 16.x releases, but ' +\n- 'applications using it should migrate to the new version.\\n\\n' +\n- 'Please update the following components: Provider',\n- ]);\n- });\n+ ReactNoop.render();\n+ expect(() => {\n+ expect(Scheduler).toFlushAndThrow('Oops!');\n+ }).toErrorDev([\n+ 'Warning: The component appears to be a function component that returns a class instance. ' +\n+ 'Change Provider to a class that extends React.Component instead. ' +\n+ \"If you can't use a class try assigning the prototype on the function as a workaround. \" +\n+ '`Provider.prototype = React.Component.prototype`. ' +\n+ \"Don't use an arrow function since it cannot be called with `new` by React.\",\n+ 'Legacy context API has been detected within a strict-mode tree.\\n\\n' +\n+ 'The old API will be supported in all 16.x releases, but ' +\n+ 'applications using it should migrate to the new version.\\n\\n' +\n+ 'Please update the following components: Provider',\n+ ]);\n+ });\n+ }\n \n it('uncaught errors should be discarded if the render is aborted', async () => {\n const root = ReactNoop.createRoot();\ndiff --git a\/packages\/react-refresh\/src\/__tests__\/ReactFreshIntegration-test.js b\/packages\/react-refresh\/src\/__tests__\/ReactFreshIntegration-test.js\nindex a86ca14d98..2f7a8dbd06 100644\n--- a\/packages\/react-refresh\/src\/__tests__\/ReactFreshIntegration-test.js\n+++ b\/packages\/react-refresh\/src\/__tests__\/ReactFreshIntegration-test.js\n@@ -1379,51 +1379,53 @@ describe('ReactFreshIntegration', () => {\n }\n });\n \n- it('remounts deprecated factory components', () => {\n- if (__DEV__) {\n- expect(() => {\n- render(`\n+ if (!require('shared\/ReactFeatureFlags').disableModulePatternComponents) {\n+ it('remounts deprecated factory components', () => {\n+ if (__DEV__) {\n+ expect(() => {\n+ render(`\n+ function Parent() {\n+ return {\n+ render() {\n+ return ;\n+ }\n+ };\n+ };\n+\n+ function Child({prop}) {\n+ return

{prop}1<\/h1>;\n+ };\n+\n+ export default Parent;\n+ `);\n+ }).toErrorDev(\n+ 'The component appears to be a function component ' +\n+ 'that returns a class instance.',\n+ );\n+ const el = container.firstChild;\n+ expect(el.textContent).toBe('A1');\n+ patch(`\n function Parent() {\n return {\n render() {\n- return ;\n+ return ;\n }\n };\n };\n \n function Child({prop}) {\n- return
{prop}1<\/h1>;\n+ return
{prop}2<\/h1>;\n };\n \n export default Parent;\n `);\n- }).toErrorDev(\n- 'The component appears to be a function component ' +\n- 'that returns a class instance.',\n- );\n- const el = container.firstChild;\n- expect(el.textContent).toBe('A1');\n- patch(`\n- function Parent() {\n- return {\n- render() {\n- return ;\n- }\n- };\n- };\n-\n- function Child({prop}) {\n- return
{prop}2<\/h1>;\n- };\n-\n- export default Parent;\n- `);\n- \/\/ Like classes, factory components always remount.\n- expect(container.firstChild).not.toBe(el);\n- const newEl = container.firstChild;\n- expect(newEl.textContent).toBe('B2');\n- }\n- });\n+ \/\/ Like classes, factory components always remount.\n+ expect(container.firstChild).not.toBe(el);\n+ const newEl = container.firstChild;\n+ expect(newEl.textContent).toBe('B2');\n+ }\n+ });\n+ }\n \n describe('with inline requires', () => {\n beforeEach(() => {\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.testing.www.js b\/packages\/shared\/forks\/ReactFeatureFlags.testing.www.js\nindex 20ca0f2951..7a18e2d910 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.testing.www.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.testing.www.js\n@@ -36,7 +36,7 @@ export const disableLegacyContext = EXPERIMENTAL;\n export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;\n export const enableTrustedTypesIntegration = false;\n export const disableTextareaChildren = EXPERIMENTAL;\n-export const disableModulePatternComponents = false;\n+export const disableModulePatternComponents = true;\n export const warnUnstableRenderSubtreeIntoContainer = false;\n export const deferPassiveEffectCleanupDuringUnmount = true;\n export const runAllPassiveEffectDestroysBeforeCreates = true;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.www-dynamic.js b\/packages\/shared\/forks\/ReactFeatureFlags.www-dynamic.js\nindex a4b2d9d128..923372abb7 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.www-dynamic.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.www-dynamic.js\n@@ -14,6 +14,7 @@\n \/\/ with the VARIANT set to `true`, and once set to `false`.\n \n export const warnAboutSpreadingKeyToJSX = VARIANT;\n+export const disableModulePatternComponents = VARIANT;\n \n \/\/ These are already tested in both modes using the build type dimension,\n \/\/ so we don't need to use VARIANT to get extra coverage.\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.www.js b\/packages\/shared\/forks\/ReactFeatureFlags.www.js\nindex 07ced9fce3..b281c14d25 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.www.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.www.js\n@@ -16,6 +16,7 @@ const dynamicFeatureFlags: DynamicFeatureFlags = require('ReactFeatureFlags');\n \n export const {\n debugRenderPhaseSideEffectsForStrictMode,\n+ disableModulePatternComponents,\n disableInputAttributeSyncing,\n enableTrustedTypesIntegration,\n warnAboutShorthandPropertyCollision,\n@@ -65,8 +66,6 @@ export const flushSuspenseFallbacksInTests = true;\n \n export const disableTextareaChildren = EXPERIMENTAL;\n \n-export const disableModulePatternComponents = EXPERIMENTAL;\n-\n export const warnUnstableRenderSubtreeIntoContainer = false;\n \n export const enableLegacyFBSupport = !EXPERIMENTAL;\ndiff --git a\/scripts\/jest\/setupTests.www.js b\/scripts\/jest\/setupTests.www.js\nindex 73a3f87694..16aca49d6f 100644\n--- a\/scripts\/jest\/setupTests.www.js\n+++ b\/scripts\/jest\/setupTests.www.js\n@@ -17,8 +17,6 @@ jest.mock('shared\/ReactFeatureFlags', () => {\n wwwFlags.warnAboutUnmockedScheduler = defaultFlags.warnAboutUnmockedScheduler;\n wwwFlags.disableJavaScriptURLs = defaultFlags.disableJavaScriptURLs;\n wwwFlags.enableDeprecatedFlareAPI = defaultFlags.enableDeprecatedFlareAPI;\n- wwwFlags.disableModulePatternComponents =\n- defaultFlags.disableModulePatternComponents;\n \n return wwwFlags;\n });\n"}

dillon1000/react

Files changed