Update error messages (#28652)

## Overview

The error messages that say:

> ReactDOM.hydrate is no longer supported in React 18

Don't make sense in the React 19 release. Instead, they should say:

> ReactDOM.hydrate was removed in React 19.

For legacy mode, they should say:

> ReactDOM.hydrate has not been supported since React 18.
This commit is contained in:
Ricky
2024-03-26 17:25:53 -04:00
committed by GitHub
parent f24cf4a1af
commit dbfbfb3312
21 changed files with 124 additions and 65 deletions
@@ -2159,7 +2159,7 @@ describe('InspectedElement', () => {
const container = document.createElement('div');
container.innerHTML = '<div></div>';
withErrorsOrWarningsIgnored(
['ReactDOM.hydrate is no longer supported in React 18'],
['ReactDOM.hydrate has not been supported since React 18'],
() => {
ReactDOM.hydrate(<Example />, container);
},
+2 -2
View File
@@ -151,7 +151,7 @@ export function getLegacyRenderImplementation(): RenderImplementation {
function render(elements) {
withErrorsOrWarningsIgnored(
['ReactDOM.render is no longer supported in React 18'],
['ReactDOM.render has not been supported since React 18'],
() => {
ReactDOM.render(elements, container);
},
@@ -340,7 +340,7 @@ export function legacyRender(elements, container) {
const ReactDOM = require('react-dom');
withErrorsOrWarningsIgnored(
['ReactDOM.render is no longer supported in React 18'],
['ReactDOM.render has not been supported since React 18'],
() => {
ReactDOM.render(elements, container);
},
+1 -1
View File
@@ -30,7 +30,7 @@ ignoreErrors([
'Warning: Legacy context API',
'Warning: Unsafe lifecycle methods',
'Warning: %s is deprecated in StrictMode.', // findDOMNode
'Warning: ReactDOM.render is no longer supported in React 18',
'Warning: ReactDOM.render was removed in React 19',
]);
ignoreWarnings(['Warning: componentWillReceiveProps has been renamed']);
ignoreLogs([]);
@@ -93,7 +93,11 @@ describe('ReactDOMConsoleErrorReporting', () => {
],
]);
expect(console.error.mock.calls).toEqual([
[expect.stringContaining('ReactDOM.render is no longer supported')],
[
expect.stringContaining(
'ReactDOM.render has not been supported since React 18',
),
],
[
// Reported because we're in a browser click event:
expect.objectContaining({
@@ -136,7 +140,11 @@ describe('ReactDOMConsoleErrorReporting', () => {
expect(windowOnError.mock.calls).toEqual([]);
if (__DEV__) {
expect(console.error.mock.calls).toEqual([
[expect.stringContaining('ReactDOM.render is no longer supported')],
[
expect.stringContaining(
'ReactDOM.render has not been supported since React 18',
),
],
]);
}
@@ -157,7 +165,11 @@ describe('ReactDOMConsoleErrorReporting', () => {
if (__DEV__) {
expect(console.error.mock.calls).toEqual([
[expect.stringContaining('ReactDOM.render is no longer supported')],
[
expect.stringContaining(
'ReactDOM.render has not been supported since React 18',
),
],
[
// Formatting
expect.stringContaining('%o'),
@@ -196,7 +208,11 @@ describe('ReactDOMConsoleErrorReporting', () => {
expect(windowOnError.mock.calls).toEqual([]);
if (__DEV__) {
expect(console.error.mock.calls).toEqual([
[expect.stringContaining('ReactDOM.render is no longer supported')],
[
expect.stringContaining(
'ReactDOM.render has not been supported since React 18',
),
],
]);
}
});
@@ -221,7 +237,11 @@ describe('ReactDOMConsoleErrorReporting', () => {
if (__DEV__) {
expect(windowOnError.mock.calls).toEqual([]);
expect(console.error.mock.calls).toEqual([
[expect.stringContaining('ReactDOM.render is no longer supported')],
[
expect.stringContaining(
'ReactDOM.render has not been supported since React 18',
),
],
[
// Formatting
expect.stringContaining('%o'),
@@ -260,7 +280,11 @@ describe('ReactDOMConsoleErrorReporting', () => {
expect(windowOnError.mock.calls).toEqual([]);
if (__DEV__) {
expect(console.error.mock.calls).toEqual([
[expect.stringContaining('ReactDOM.render is no longer supported')],
[
expect.stringContaining(
'ReactDOM.render has not been supported since React 18',
),
],
]);
}
});
@@ -283,7 +307,11 @@ describe('ReactDOMConsoleErrorReporting', () => {
if (__DEV__) {
expect(windowOnError.mock.calls).toEqual([]);
expect(console.error.mock.calls).toEqual([
[expect.stringContaining('ReactDOM.render is no longer supported')],
[
expect.stringContaining(
'ReactDOM.render has not been supported since React 18',
),
],
[
// Formatting
expect.stringContaining('%o'),
@@ -322,7 +350,11 @@ describe('ReactDOMConsoleErrorReporting', () => {
expect(windowOnError.mock.calls).toEqual([]);
if (__DEV__) {
expect(console.error.mock.calls).toEqual([
[expect.stringContaining('ReactDOM.render is no longer supported')],
[
expect.stringContaining(
'ReactDOM.render has not been supported since React 18',
),
],
]);
}
});
@@ -350,7 +382,11 @@ describe('ReactDOMConsoleErrorReporting', () => {
if (__DEV__) {
expect(windowOnError.mock.calls).toEqual([]);
expect(console.error.mock.calls).toEqual([
[expect.stringContaining('ReactDOM.render is no longer supported')],
[
expect.stringContaining(
'ReactDOM.render has not been supported since React 18',
),
],
[
// Formatting
expect.stringContaining('%o'),
@@ -389,7 +425,11 @@ describe('ReactDOMConsoleErrorReporting', () => {
expect(windowOnError.mock.calls).toEqual([]);
if (__DEV__) {
expect(console.error.mock.calls).toEqual([
[expect.stringContaining('ReactDOM.render is no longer supported')],
[
expect.stringContaining(
'ReactDOM.render has not been supported since React 18',
),
],
]);
}
});
@@ -413,7 +453,11 @@ describe('ReactDOMConsoleErrorReporting', () => {
if (__DEV__) {
expect(windowOnError.mock.calls).toEqual([]);
expect(console.error.mock.calls).toEqual([
[expect.stringContaining('ReactDOM.render is no longer supported')],
[
expect.stringContaining(
'ReactDOM.render has not been supported since React 18',
),
],
[
// Formatting
expect.stringContaining('%o'),
@@ -452,7 +496,11 @@ describe('ReactDOMConsoleErrorReporting', () => {
expect(windowOnError.mock.calls).toEqual([]);
if (__DEV__) {
expect(console.error.mock.calls).toEqual([
[expect.stringContaining('ReactDOM.render is no longer supported')],
[
expect.stringContaining(
'ReactDOM.render has not been supported since React 18',
),
],
]);
}
});
@@ -480,7 +528,11 @@ describe('ReactDOMConsoleErrorReporting', () => {
if (__DEV__) {
expect(windowOnError.mock.calls).toEqual([]);
expect(console.error.mock.calls).toEqual([
[expect.stringContaining('ReactDOM.render is no longer supported')],
[
expect.stringContaining(
'ReactDOM.render has not been supported since React 18',
),
],
[
// Formatting
expect.stringContaining('%o'),
@@ -519,7 +571,11 @@ describe('ReactDOMConsoleErrorReporting', () => {
expect(windowOnError.mock.calls).toEqual([]);
if (__DEV__) {
expect(console.error.mock.calls).toEqual([
[expect.stringContaining('ReactDOM.render is no longer supported')],
[
expect.stringContaining(
'ReactDOM.render has not been supported since React 18',
),
],
]);
}
});
@@ -1193,10 +1193,10 @@ describe('ReactDOMLegacyFiber', () => {
if (__DEV__) {
expect(console.error).toHaveBeenCalledTimes(2);
expect(console.error.mock.calls[0][0]).toMatch(
'ReactDOM.render is no longer supported in React 18',
'ReactDOM.render has not been supported since React 18',
);
expect(console.error.mock.calls[1][0]).toMatch(
'ReactDOM.render is no longer supported in React 18',
'ReactDOM.render has not been supported since React 18',
);
}
});
@@ -919,8 +919,8 @@ describe('ReactErrorBoundaries', () => {
...gate(flags =>
flags.disableLegacyContext
? [
'Warning: BrokenComponentWillMountWithContext uses the legacy childContextTypes API which is no longer supported. Use React.createContext() instead.',
'Warning: BrokenComponentWillMountWithContext uses the legacy childContextTypes API which is no longer supported. Use React.createContext() instead.',
'Warning: BrokenComponentWillMountWithContext uses the legacy childContextTypes API which was removed in React 19. Use React.createContext() instead.',
'Warning: BrokenComponentWillMountWithContext uses the legacy childContextTypes API which was removed in React 19. Use React.createContext() instead.',
]
: [],
),
@@ -97,11 +97,11 @@ describe('ReactLegacyContextDisabled', () => {
);
});
}).toErrorDev([
'LegacyProvider uses the legacy childContextTypes API which is no longer supported. ' +
'LegacyProvider uses the legacy childContextTypes API which was removed in React 19. ' +
'Use React.createContext() instead.',
'LegacyClsConsumer uses the legacy contextTypes API which is no longer supported. ' +
'LegacyClsConsumer uses the legacy contextTypes API which was removed in React 19. ' +
'Use React.createContext() with static contextType instead.',
'LegacyFnConsumer uses the legacy contextTypes API which is no longer supported. ' +
'LegacyFnConsumer uses the legacy contextTypes API which was removed in React 19. ' +
'Use React.createContext() with React.useContext() instead.',
]);
expect(container.textContent).toBe('{}undefinedundefined');
@@ -137,11 +137,11 @@ describe('ReactLegacyContextDisabled', () => {
container,
);
}).toErrorDev([
'LegacyProvider uses the legacy childContextTypes API which is no longer supported. ' +
'LegacyProvider uses the legacy childContextTypes API which was removed in React 19. ' +
'Use React.createContext() instead.',
'LegacyClsConsumer uses the legacy contextTypes API which is no longer supported. ' +
'LegacyClsConsumer uses the legacy contextTypes API which was removed in React 19. ' +
'Use React.createContext() with static contextType instead.',
'LegacyFnConsumer uses the legacy contextTypes API which is no longer supported. ' +
'LegacyFnConsumer uses the legacy contextTypes API which was removed in React 19. ' +
'Use React.createContext() with React.useContext() instead.',
]);
expect(text).toBe('<span>{}<!-- -->undefined<!-- -->undefined</span>');
@@ -684,7 +684,7 @@ describe('ReactLegacyErrorBoundaries', () => {
if (__DEV__) {
expect(console.error).toHaveBeenCalledTimes(2);
expect(console.error.mock.calls[0][0]).toContain(
'ReactDOM.render is no longer supported',
'ReactDOM.render has not been supported since React 18',
);
expect(console.error.mock.calls[1][2]).toContain(
'The above error occurred in the <BrokenRender> component:',
@@ -869,8 +869,8 @@ describe('ReactLegacyErrorBoundaries', () => {
...gate(flags =>
flags.disableLegacyContext
? [
'Warning: BrokenComponentWillMountWithContext uses the legacy childContextTypes API which is no longer supported. Use React.createContext() instead.',
'Warning: BrokenComponentWillMountWithContext uses the legacy childContextTypes API which is no longer supported. Use React.createContext() instead.',
'Warning: BrokenComponentWillMountWithContext uses the legacy childContextTypes API which was removed in React 19. Use React.createContext() instead.',
'Warning: BrokenComponentWillMountWithContext uses the legacy childContextTypes API which was removed in React 19. Use React.createContext() instead.',
]
: [],
),
@@ -22,7 +22,7 @@ describe('ReactDOMRoot', () => {
if (__DEV__) {
expect(console.error).toHaveBeenCalledTimes(1);
expect(console.error.mock.calls[0][0]).toContain(
'ReactDOM.render is no longer supported',
'ReactDOM.render has not been supported since React 18',
);
}
});
@@ -37,7 +37,7 @@ describe('ReactDOMRoot', () => {
if (__DEV__) {
expect(console.error).toHaveBeenCalledTimes(1);
expect(console.error.mock.calls[0][0]).toContain(
'ReactDOM.hydrate is no longer supported',
'ReactDOM.hydrate has not been supported since React 18',
);
}
});
@@ -54,7 +54,7 @@ describe('renderSubtreeIntoContainer', () => {
renderSubtreeIntoContainer(this, <Component />, portal);
}.bind(this),
).toErrorDev(
'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported',
'ReactDOM.unstable_renderSubtreeIntoContainer() has not been supported since React 18',
);
}
}
@@ -107,7 +107,7 @@ describe('renderSubtreeIntoContainer', () => {
expect(() => {
renderSubtreeIntoContainer(this, <Component />, portal);
}).toErrorDev(
'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported',
'ReactDOM.unstable_renderSubtreeIntoContainer() has not been supported since React 18',
);
}
@@ -115,7 +115,7 @@ describe('renderSubtreeIntoContainer', () => {
expect(() => {
renderSubtreeIntoContainer(this, <Component />, portal);
}).toErrorDev(
'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported',
'ReactDOM.unstable_renderSubtreeIntoContainer() has not been supported since React 18',
);
}
}
@@ -172,7 +172,7 @@ describe('renderSubtreeIntoContainer', () => {
expect(() => {
renderSubtreeIntoContainer(this, <Component />, portal);
}).toErrorDev(
'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported',
'ReactDOM.unstable_renderSubtreeIntoContainer() has not been supported since React 18',
);
}
@@ -180,7 +180,7 @@ describe('renderSubtreeIntoContainer', () => {
expect(() => {
renderSubtreeIntoContainer(this, <Component />, portal);
}).toErrorDev(
'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported',
'ReactDOM.unstable_renderSubtreeIntoContainer() has not been supported since React 18',
);
}
}
@@ -211,7 +211,7 @@ describe('renderSubtreeIntoContainer', () => {
expect(() => {
renderSubtreeIntoContainer(this, <div>hello</div>, portal);
}).toErrorDev(
'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported',
'ReactDOM.unstable_renderSubtreeIntoContainer() has not been supported since React 18',
);
}
}
@@ -250,7 +250,7 @@ describe('renderSubtreeIntoContainer', () => {
expect(() => {
renderSubtreeIntoContainer(this, <Child />, portal);
}).toErrorDev(
'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported',
'ReactDOM.unstable_renderSubtreeIntoContainer() has not been supported since React 18',
);
}
}
@@ -290,7 +290,7 @@ describe('renderSubtreeIntoContainer', () => {
expect(() => {
renderSubtreeIntoContainer(this, <Middle />, portal1);
}).toErrorDev(
'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported',
'ReactDOM.unstable_renderSubtreeIntoContainer() has not been supported since React 18',
);
}
static childContextTypes = {
@@ -306,7 +306,7 @@ describe('renderSubtreeIntoContainer', () => {
expect(() => {
renderSubtreeIntoContainer(this, <Child />, portal2);
}).toErrorDev(
'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported',
'ReactDOM.unstable_renderSubtreeIntoContainer() has not been supported since React 18',
);
}
}
+8 -8
View File
@@ -268,14 +268,14 @@ export function hydrate(
if (disableLegacyMode) {
if (__DEV__) {
console.error(
'ReactDOM.hydrate is no longer supported in React 18. Use hydrateRoot instead',
'ReactDOM.hydrate was removed in React 19. Use hydrateRoot instead',
);
}
throw new Error('ReactDOM: Unsupported Legacy Mode API.');
}
if (__DEV__) {
console.error(
'ReactDOM.hydrate is no longer supported in React 18. Use hydrateRoot ' +
'ReactDOM.hydrate has not been supported since React 18. Use hydrateRoot ' +
'instead. Until you switch to the new API, your app will behave as ' +
"if it's running React 17. Learn " +
'more: https://react.dev/link/switch-to-createroot',
@@ -316,14 +316,14 @@ export function render(
if (disableLegacyMode) {
if (__DEV__) {
console.error(
'ReactDOM.render is no longer supported in React 18. Use createRoot instead.',
'ReactDOM.render was removed in React 19. Use createRoot instead.',
);
}
throw new Error('ReactDOM: Unsupported Legacy Mode API.');
}
if (__DEV__) {
console.error(
'ReactDOM.render is no longer supported in React 18. Use createRoot ' +
'ReactDOM.render has not been supported since React 18. Use createRoot ' +
'instead. Until you switch to the new API, your app will behave as ' +
"if it's running React 17. Learn " +
'more: https://react.dev/link/switch-to-createroot',
@@ -364,15 +364,15 @@ export function unstable_renderSubtreeIntoContainer(
if (disableLegacyMode) {
if (__DEV__) {
console.error(
'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported in React 18. Consider using a portal instead.',
'ReactDOM.unstable_renderSubtreeIntoContainer() was removed in React 19. Consider using a portal instead.',
);
}
throw new Error('ReactDOM: Unsupported Legacy Mode API.');
}
if (__DEV__) {
console.error(
'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported ' +
'in React 18. Consider using a portal instead. Until you switch to ' +
'ReactDOM.unstable_renderSubtreeIntoContainer() has not been supported ' +
'since React 18. Consider using a portal instead. Until you switch to ' +
"the createRoot API, your app will behave as if it's running React " +
'17. Learn more: https://react.dev/link/switch-to-createroot',
);
@@ -399,7 +399,7 @@ export function unmountComponentAtNode(container: Container): boolean {
if (disableLegacyMode) {
if (__DEV__) {
console.error(
'unmountComponentAtNode is no longer supported in React 18. Use root.unmount() instead.',
'unmountComponentAtNode was removed in React 19. Use root.unmount() instead.',
);
}
throw new Error('ReactDOM: Unsupported Legacy Mode API.');
+1 -1
View File
@@ -1975,7 +1975,7 @@ function mountIndeterminateComponent(
if (__DEV__) {
if (disableLegacyContext && Component.contextTypes) {
console.error(
'%s uses the legacy contextTypes API which is no longer supported. ' +
'%s uses the legacy contextTypes API which was removed in React 19. ' +
'Use React.createContext() with React.useContext() instead.',
getComponentNameFromType(Component) || 'Unknown',
);
+2 -2
View File
@@ -413,14 +413,14 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {
if (disableLegacyContext) {
if (ctor.childContextTypes) {
console.error(
'%s uses the legacy childContextTypes API which is no longer supported. ' +
'%s uses the legacy childContextTypes API which was removed in React 19. ' +
'Use React.createContext() instead.',
name,
);
}
if (ctor.contextTypes) {
console.error(
'%s uses the legacy contextTypes API which is no longer supported. ' +
'%s uses the legacy contextTypes API which was removed in React 19. ' +
'Use React.createContext() with static contextType instead.',
name,
);
@@ -1785,8 +1785,8 @@ describe('ReactIncrementalErrorHandling', () => {
...gate(flags =>
flags.disableLegacyContext
? [
'Warning: Provider uses the legacy childContextTypes API which is no longer supported. Use React.createContext() instead.',
'Warning: Provider uses the legacy childContextTypes API which is no longer supported. Use React.createContext() instead.',
'Warning: Provider uses the legacy childContextTypes API which was removed in React 19. Use React.createContext() instead.',
'Warning: Provider uses the legacy childContextTypes API which was removed in React 19. Use React.createContext() instead.',
]
: [],
),
+2 -2
View File
@@ -371,14 +371,14 @@ function checkClassInstance(instance: any, ctor: any, newProps: any) {
if (disableLegacyContext) {
if (ctor.childContextTypes) {
console.error(
'%s uses the legacy childContextTypes API which is no longer supported. ' +
'%s uses the legacy childContextTypes API which was removed in React 19. ' +
'Use React.createContext() instead.',
name,
);
}
if (ctor.contextTypes) {
console.error(
'%s uses the legacy contextTypes API which is no longer supported. ' +
'%s uses the legacy contextTypes API which was removed in React 19. ' +
'Use React.createContext() with static contextType instead.',
name,
);
+1 -1
View File
@@ -1502,7 +1502,7 @@ function renderIndeterminateComponent(
if (__DEV__) {
if (disableLegacyContext && Component.contextTypes) {
console.error(
'%s uses the legacy contextTypes API which is no longer supported. ' +
'%s uses the legacy contextTypes API which was removed in React 19. ' +
'Use React.createContext() with React.useContext() instead.',
getComponentNameFromType(Component) || 'Unknown',
);
@@ -181,7 +181,7 @@ describe('ReactCreateElement', () => {
expect(element.type).toBe(ComponentClass);
if (gate(flags => flags.enableRefAsProp)) {
expect(() => expect(element.ref).toBe(ref)).toErrorDev(
'Accessing element.ref is no longer supported',
'Accessing element.ref was removed in React 19',
{withoutStack: true},
);
const expectation = {foo: '56', ref};
@@ -361,7 +361,7 @@ describe('ReactElementClone', () => {
if (gate(flags => flags.enableRefAsProp)) {
expect(clone.props.ref).toBe('34');
expect(() => expect(clone.ref).toBe('34')).toErrorDev(
'Accessing element.ref is no longer supported',
'Accessing element.ref was removed in React 19',
{withoutStack: true},
);
expect(clone.props).toEqual({foo: 'ef', ref: '34'});
@@ -126,7 +126,7 @@ describe('ReactJSXTransformIntegration', () => {
expect(element.type).toBe(Component);
if (gate(flags => flags.enableRefAsProp)) {
expect(() => expect(element.ref).toBe(ref)).toErrorDev(
'Accessing element.ref is no longer supported',
'Accessing element.ref was removed in React 19',
{withoutStack: true},
);
const expectation = {foo: '56', ref};
+1 -1
View File
@@ -141,7 +141,7 @@ function elementRefGetterWithDeprecationWarning() {
if (!didWarnAboutElementRef[componentName]) {
didWarnAboutElementRef[componentName] = true;
console.error(
'Accessing element.ref is no longer supported. ref is now a ' +
'Accessing element.ref was removed in React 19. ref is now a ' +
'regular prop. It will be removed from the JSX Element ' +
'type in a future release.',
);
+6 -3
View File
@@ -17,10 +17,13 @@ module.exports = function shouldIgnoreConsoleError(
return true;
}
if (
format.indexOf('ReactDOM.render is no longer supported in React 18') !==
-1 ||
format.indexOf('ReactDOM.render was removed in React 19') !== -1 ||
format.indexOf('ReactDOM.hydrate was removed in React 19') !== -1 ||
format.indexOf(
'ReactDOM.hydrate is no longer supported in React 18'
'ReactDOM.render has not been supported since React 18'
) !== -1 ||
format.indexOf(
'ReactDOM.hydrate has not been supported since React 18'
) !== -1
) {
// We haven't finished migrating our tests to use createRoot.