Skip to content

Commit 50d058a

Browse files
committedMay 22, 2015
[fixed] server side rendering for Modal component
Using document reference in the render method will throw an error on React.renderToString call on the server side. See react-bootstrap#717. The proper solution is to remove document.querySelector check. Obviously we cant detect this feature on the server side, besides it leads to differencies btw server and client side rendering output, so React will warn about it, ex: 1. `render` on the server side will apply classes: `modal fade` 2. `render` on the client side will apply clasess: `modal fade in` Also karma test environment is not suitable for testing server side rendering, so mocha test run againt nodejs was added.
1 parent 39f8285 commit 50d058a

File tree

3 files changed

+21
-5
lines changed

3 files changed

+21
-5
lines changed
 

Diff for: ‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"scripts": {
1111
"build": "babel-node tools/build-cli.js",
1212
"test-watch": "karma start",
13-
"test": "npm run lint && npm run build && karma start --single-run",
13+
"test": "npm run lint && npm run build && karma start --single-run && _mocha --compilers js:babel-core/register './test/server/*Spec.js'",
1414
"lint": "eslint ./",
1515
"docs-build": "babel-node tools/build-cli.js --docs-only",
1616
"docs": "docs/dev-run",

Diff for: ‎src/Modal.js

+3-4
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const Modal = React.createClass({
4343
let classes = {
4444
modal: true,
4545
fade: this.props.animation,
46-
'in': !this.props.animation || !document.querySelectorAll
46+
'in': !this.props.animation
4747
};
4848

4949
let modal = (
@@ -72,11 +72,10 @@ const Modal = React.createClass({
7272
renderBackdrop(modal) {
7373
let classes = {
7474
'modal-backdrop': true,
75-
'fade': this.props.animation
75+
fade: this.props.animation,
76+
'in': !this.props.animation
7677
};
7778

78-
classes.in = !this.props.animation || !document.querySelectorAll;
79-
8079
let onClick = this.props.backdrop === true ?
8180
this.handleBackdropClick : null;
8281

Diff for: ‎test/server/ModalSpec.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react';
2+
import {assert} from 'chai';
3+
import Modal from '../../src/Modal.js';
4+
5+
describe('Modal', () => {
6+
it('Should be rendered on the server side', function () {
7+
let noOp = () => {};
8+
9+
assert.doesNotThrow(function renderOnServerSide() {
10+
return React.renderToString(
11+
<Modal onRequestHide={noOp}>
12+
<strong>Message</strong>
13+
</Modal>
14+
);
15+
});
16+
});
17+
});

0 commit comments

Comments
 (0)
Please sign in to comment.