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

react-dom throws "ReferenceError: requestAnimationFrame is not defined" in SSR environment since #12931 #13000

Closed
sompylasar opened this issue Jun 8, 2018 · 1 comment
Closed

react-dom throws "ReferenceError: requestAnimationFrame is not defined" in SSR environment since #12931 #13000

sompylasar opened this issue Jun 8, 2018 · 1 comment
Labels
Type: Bug

Comments

@sompylasar
Copy link
Contributor

Do you want to request a feature or report a bug?

bug

What is the current behavior?

The #12931 change seems to have broken the server-side rendering on master: I'm attempting to yarn start the fixtures/ssr to test #12063 and getting the following error from the server-side when I load the localhost:3000 page:

ReferenceError: requestAnimationFrame is not defined
    at /__CENSORED__/react/build/node_modules/react-dom/cjs/react-dom.development.js:5232:34
    at Object.<anonymous> (/__CENSORED__/react/build/node_modules/react-dom/cjs/react-dom.development.js:17632:5)
    at Module._compile (module.js:624:30)
    at Module._extensions..js (module.js:635:10)
    at Object.require.extensions.(anonymous function) [as .js] (/__CENSORED__/react/fixtures/ssr/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)
    at Module.require (module.js:568:17)
    at require (internal/module.js:11:18)

It points to this line:

// We capture a local reference to any global, in case it gets polyfilled after
// this module is initially evaluated.
// We want to be using a consistent implementation.
const localRequestAnimationFrame = requestAnimationFrame;

What is the expected behavior?

No ReferenceError in server-side environment.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

79a740c (not published at the time of writing)

Node environment: fixtures/ssr during server-side rendering in response to a browser request.
sompylasar added a commit to sompylasar/react that referenced this issue Jun 8, 2018
@sompylasar
Fix react-dom ReferenceError requestAnimationFrame in non-browser env (…
fc3d4c8 
…facebook#13000)

The facebook#12931 ( facebook@79a740c ) broke the server-side rendering: in the `fixtures/ssr` the following error appeared from the server-side when `localhost:3000` is requested:
```
ReferenceError: requestAnimationFrame is not defined
    at /__CENSORED__/react/build/node_modules/react-dom/cjs/react-dom.development.js:5232:34
    at Object.<anonymous> (/__CENSORED__/react/build/node_modules/react-dom/cjs/react-dom.development.js:17632:5)
    at Module._compile (module.js:624:30)
    at Module._extensions..js (module.js:635:10)
    at Object.require.extensions.(anonymous function) [as .js] (/__CENSORED__/react/fixtures/ssr/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)
    at Module.require (module.js:568:17)
    at require (internal/module.js:11:18)
```

The exception pointed to this line:
```js
// We capture a local reference to any global, in case it gets polyfilled after
// this module is initially evaluated.
// We want to be using a consistent implementation.
const localRequestAnimationFrame = requestAnimationFrame;
```

**Test plan**

1. In `react` repo root, `yarn && yarn build`.
2. In `fixtures/ssr`, `yarn && yarn start`,
3. In browser, go to `http://localhost:3000`.
4. Observe the fixture page, not the exception message.
@sompylasar
Copy link
Contributor Author

👉 fixed in #13001

@sompylasar sompylasar mentioned this issue Jun 8, 2018
Merged
sompylasar added a commit to sompylasar/react that referenced this issue Jun 8, 2018
@sompylasar
Move the requestAnimationFrameForReact check and warning to callsites (…
c088ad0 
…facebook#13000)

According to the comment by @gaearon: facebook#13001 (comment)
sompylasar added a commit to sompylasar/react that referenced this issue Jun 8, 2018
@sompylasar
Use invariant instead of throw new Error, use the same message (f…
aa90798 
…acebook#13000)

According to the comment by @gaearon: facebook#13001 (comment)
gaearon pushed a commit that referenced this issue Jun 8, 2018
@sompylasar @gaearon
Fix react-dom ReferenceError requestAnimationFrame in non-browser env (…
188c425 
…#13000) (#13001)

* Fix react-dom ReferenceError requestAnimationFrame in non-browser env (#13000)

The #12931 ( 79a740c ) broke the server-side rendering: in the `fixtures/ssr` the following error appeared from the server-side when `localhost:3000` is requested:
```
ReferenceError: requestAnimationFrame is not defined
    at /__CENSORED__/react/build/node_modules/react-dom/cjs/react-dom.development.js:5232:34
    at Object.<anonymous> (/__CENSORED__/react/build/node_modules/react-dom/cjs/react-dom.development.js:17632:5)
    at Module._compile (module.js:624:30)
    at Module._extensions..js (module.js:635:10)
    at Object.require.extensions.(anonymous function) [as .js] (/__CENSORED__/react/fixtures/ssr/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)
    at Module.require (module.js:568:17)
    at require (internal/module.js:11:18)
```

The exception pointed to this line:
```js
// We capture a local reference to any global, in case it gets polyfilled after
// this module is initially evaluated.
// We want to be using a consistent implementation.
const localRequestAnimationFrame = requestAnimationFrame;
```

**Test plan**

1. In `react` repo root, `yarn && yarn build`.
2. In `fixtures/ssr`, `yarn && yarn start`,
3. In browser, go to `http://localhost:3000`.
4. Observe the fixture page, not the exception message.

* Move the requestAnimationFrameForReact check and warning to callsites (#13000)

According to the comment by @gaearon: #13001 (comment)

* Use `invariant` instead of `throw new Error`, use the same message (#13000)

According to the comment by @gaearon: #13001 (comment)
@sompylasar sompylasar mentioned this issue Jun 9, 2018
Closed
@dustinsoftware dustinsoftware mentioned this issue Jun 21, 2018
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Type: Bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@sompylasar @gaearon