Skip to content
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

Jump to bottom

Add warning in server renderer if class doesn't extend React.Component #11993

Merged
merged 4 commits into from
Jan 9, 2018
Merged

Add warning in server renderer if class doesn't extend React.Component #11993

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6499aba
Add warning in server renderer if class doesn't extend React.Component
wyze Jan 8, 2018
0ed0dae
Use `.toWarnDev` matcher and deduplicate warnings
wyze Jan 8, 2018
2aaabea
Deduplicate client-side warning if class doesn't extend React.Component
wyze Jan 9, 2018
5a06117
Default componentName to Unknown if null
wyze Jan 9, 2018
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
21 changes: 21 additions & 0 deletions packages/react-dom/src/__tests__/ReactServerRendering-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -554,4 +554,25 @@ describe('ReactDOMServer', () => {
'The experimental Call and Return types are not currently supported by the server renderer.',
);
});

it('should warn when server rendering a class with a render method that does not extend React.Component', () => {
spyOnDevAndProd(console, 'error');
class ClassWithRenderNotExtended {
render() {
return <div />;
}
}
expect(console.error.calls.count()).toBe(0);
expect(() => {
ReactDOMServer.renderToString(<ClassWithRenderNotExtended />);
}).toThrow(TypeError);
if (__DEV__) {
expect(console.error.calls.count()).toBe(1);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of asserting like this, we use toWarnDev() in new code. Please see other tests.

expect(console.error.calls.argsFor(0)[0]).toContain(
'Warning: The <ClassWithRenderNotExtended /> component appears to have a render method, ' +
"but doesn't extend React.Component. This is likely to cause errors. " +
'Change ClassWithRenderNotExtended to extend React.Component instead.',
);
}
});
});
15 changes: 15 additions & 0 deletions packages/react-dom/src/server/ReactPartialRenderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -421,6 +421,21 @@ function resolve(
if (shouldConstruct(Component)) {
inst = new Component(element.props, publicContext, updater);
} else {
if (__DEV__) {
if (
Component.prototype &&
typeof Component.prototype.render === 'function'
) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should make sure we don't trigger this warning for the same component more than once.
If the client-side code doesn't deduplicate them, we also need to add deduplication there too.
Something like

const didWarnAboutBadClass = {};

// ...

if (!didWarnAboutBadClass[componentName]) {
  warning(...)
  didWarnAboutBadClass[componentName] = true
}

const componentName = getComponentName(Component);
warning(
false,
"The <%s /> component appears to have a render method, but doesn't extend React.Component. " +
'This is likely to cause errors. Change %s to extend React.Component instead.',
componentName,
componentName,
);
}
}
inst = Component(element.props, publicContext, updater);
if (inst == null || inst.render == null) {
child = inst;
Expand Down