Skip to content

Commit

Permalink
Error if a legacy React Element is attempted to be rendered in Flight
Browse files Browse the repository at this point in the history
  • Loading branch information
sebmarkbage committed May 10, 2024
1 parent 6ef0dd4 commit 0d701bb
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 0 deletions.
28 changes: 28 additions & 0 deletions packages/react-client/src/__tests__/ReactFlight-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -938,13 +938,29 @@ describe('ReactFlight', () => {
});
});

// @gate renameElementSymbol
it('should emit descriptions of errors in dev', async () => {
const ClientErrorBoundary = clientReference(ErrorBoundary);

function Throw({value}) {
throw value;
}

function RenderInlined() {
const inlinedElement = {
$$typeof: Symbol.for('react.element'),
type: () => {},
key: null,
ref: null,
props: {},
_owner: null,
};
return inlinedElement;
}

// We wrap in lazy to ensure the errors throws lazily.
const LazyInlined = React.lazy(async () => ({default: RenderInlined}));

const testCases = (
<>
<ClientErrorBoundary expectedMessage="This is a real Error.">
Expand Down Expand Up @@ -1010,6 +1026,18 @@ describe('ReactFlight', () => {
<Throw value={['array']} />
</div>
</ClientErrorBoundary>
<ClientErrorBoundary
expectedMessage={
'A React Element from an older version of React was rendered. ' +
'This is not supported. It can happen if:\n' +
'- Multiple copies of the "react" package is used.\n' +
'- A library pre-bundled an old copy of "react" or "react/jsx-runtime".\n' +
'- A compiler tries to "inline" JSX instead of using the runtime.'
}>
<div>
<LazyInlined />
</div>
</ClientErrorBoundary>
</>
);

Expand Down
10 changes: 10 additions & 0 deletions packages/react-server/src/ReactFlightServer.js
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@ import {resolveOwner, setCurrentOwner} from './flight/ReactFlightCurrentOwner';
import {
getIteratorFn,
REACT_ELEMENT_TYPE,
REACT_LEGACY_ELEMENT_TYPE,
REACT_FORWARD_REF_TYPE,
REACT_FRAGMENT_TYPE,
REACT_LAZY_TYPE,
Expand Down Expand Up @@ -2004,6 +2005,15 @@ function renderModelDestructive(
resolvedModel,
);
}
case REACT_LEGACY_ELEMENT_TYPE: {
throw new Error(
'A React Element from an older version of React was rendered. ' +
'This is not supported. It can happen if:\n' +
'- Multiple copies of the "react" package is used.\n' +
'- A library pre-bundled an old copy of "react" or "react/jsx-runtime".\n' +
'- A compiler tries to "inline" JSX instead of using the runtime.',
);
}
}

if (isClientReference(value)) {
Expand Down

0 comments on commit 0d701bb

Please sign in to comment.