Skip to content

Added more context to invalid text string errors #22725

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
EvanBacon wants to merge 3 commits into from
Closed

Added more context to invalid text string errors #22725

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3f8e7d5
feat: add more context to invalid text strings
EvanBacon Nov 8, 2021
871c7c7
lint fix
EvanBacon Nov 8, 2021
c7ffe2b
Added `global.debugInvalidTextStrings` variable for improving text vi…
EvanBacon Jan 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion packages/react-native-renderer/src/ReactFabricHostConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -262,7 +262,13 @@ export function createTextInstance(
): TextInstance {
if (__DEV__) {
if (!hostContext.isInAParentText) {
console.error('Text strings must be rendered within a <Text> component.');
console.error(
// Opt-in detailed error messages
// Learn More: https://github.com/facebook/react/pull/22725#issuecomment-1006023545
global.debugInvalidTextStrings
? `Text string "${text}" must be rendered within a <Text> component.`
: `Text strings must be rendered within a <Text> component.`,
);
}
}

Expand Down
8 changes: 7 additions & 1 deletion packages/react-native-renderer/src/ReactNativeHostConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,13 @@ export function createTextInstance(
internalInstanceHandle: Object,
): TextInstance {
if (!hostContext.isInAParentText) {
throw new Error('Text strings must be rendered within a <Text> component.');
throw new Error(
// Opt-in detailed error messages
// Learn More: https://github.com/facebook/react/pull/22725#issuecomment-1006023545
global.debugInvalidTextStrings
? `Text string "${text}" must be rendered within a <Text> component.`
: `Text strings must be rendered within a <Text> component.`,
);
}

const tag = allocateTag();
Expand Down
54 changes: 38 additions & 16 deletions packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@ describe('ReactFabric', () => {
.ReactNativeViewConfigRegistry.register;

act = require('jest-react').act;

delete global.debugInvalidTextStrings;
});

it('should be able to create and render a native component', () => {
Expand Down Expand Up @@ -538,22 +540,42 @@ describe('ReactFabric', () => {
uiViewClassName: 'RCTView',
}));

expect(() => {
act(() => {
ReactFabric.render(<View>this should warn</View>, 11);
});
}).toErrorDev(['Text strings must be rendered within a <Text> component.']);

expect(() => {
act(() => {
ReactFabric.render(
<Text>
<ScrollView>hi hello hi</ScrollView>
</Text>,
11,
);
});
}).toErrorDev(['Text strings must be rendered within a <Text> component.']);
// Test both global conditions.
[
{
debugInvalidTextStrings: true,
errors: [
'Text string "this should warn" must be rendered within a <Text> component.',
'Text string "hi hello hi" must be rendered within a <Text> component.',
],
},
{
debugInvalidTextStrings: false,
errors: [
'Text strings must be rendered within a <Text> component.',
'Text strings must be rendered within a <Text> component.',
],
},
].forEach(({debugInvalidTextStrings, errors}) => {
global.debugInvalidTextStrings = debugInvalidTextStrings;

expect(() => {
act(() => {
ReactFabric.render(<View>this should warn</View>, 11);
});
}).toErrorDev([errors[0]]);

expect(() => {
act(() => {
ReactFabric.render(
<Text>
<ScrollView>hi hello hi</ScrollView>
</Text>,
11,
);
});
}).toErrorDev([errors[1]]);
});
});

it('should not throw for text inside of an indirect <Text> ancestor', () => {
Expand Down
46 changes: 34 additions & 12 deletions packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@ describe('ReactNative', () => {
.ReactNativeViewConfigRegistry.register;
TextInputState = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface')
.TextInputState;

delete global.debugInvalidTextStrings;
});

it('should be able to create and render a native component', () => {
Expand Down Expand Up @@ -487,18 +489,38 @@ describe('ReactNative', () => {
uiViewClassName: 'RCTView',
}));

expect(() => ReactNative.render(<View>this should warn</View>, 11)).toThrow(
'Text strings must be rendered within a <Text> component.',
);

expect(() =>
ReactNative.render(
<Text>
<ScrollView>hi hello hi</ScrollView>
</Text>,
11,
),
).toThrow('Text strings must be rendered within a <Text> component.');
// Test both global conditions.
[
{
debugInvalidTextStrings: true,
errors: [
'Text string "this should warn" must be rendered within a <Text> component.',
'Text string "hi hello hi" must be rendered within a <Text> component.',
],
},
{
debugInvalidTextStrings: false,
errors: [
'Text strings must be rendered within a <Text> component.',
'Text strings must be rendered within a <Text> component.',
],
},
].forEach(({debugInvalidTextStrings, errors}) => {
global.debugInvalidTextStrings = debugInvalidTextStrings;

expect(() =>
ReactNative.render(<View>this should warn</View>, 11),
).toThrow(errors[0]);

expect(() =>
ReactNative.render(
<Text>
<ScrollView>hi hello hi</ScrollView>
</Text>,
11,
),
).toThrow(errors[1]);
});
});

it('should not throw for text inside of an indirect <Text> ancestor', () => {
Expand Down
2 changes: 1 addition & 1 deletion scripts/error-codes/codes.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -270,7 +270,7 @@
"270": "The current renderer does not support persistence. This error is likely caused by a bug in React. Please file an issue.",
"271": "Failed to replay rendering after an error. This is likely caused by a bug in React. Please file an issue with a reproducing case to help us find it.",
"273": "Nesting of <View> within <Text> is not currently supported.",
"274": "Text strings must be rendered within a <Text> component.",
"274": "Text string \"%s\" must be rendered within a <Text> component.",
"275": "The current renderer does not support mutation. This error is likely caused by a bug in React. Please file an issue.",
"276": "React depends on requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://reactjs.org/link/react-polyfills",
"277": "Context.unstable_read(): Context can only be read while React is rendering, e.g. inside the render method or getDerivedStateFromProps.",
Expand Down