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

autoBatchEnhancer - ReferenceError: requestAnimationFrame is not defined (Next.js, RTK 1.9, next-redux-wrapper) #2869

Closed
littlejon opened this issue Nov 6, 2022 · 7 comments
Closed

autoBatchEnhancer - ReferenceError: requestAnimationFrame is not defined (Next.js, RTK 1.9, next-redux-wrapper) #2869

littlejon opened this issue Nov 6, 2022 · 7 comments
Milestone
1.9.x

Comments

@littlejon
Copy link

Next.js fails when using the new autoBatchEnhancer in both dev mode and build.

image

I have a semi-lightweight-but-not-minimal reproduction available here: https://github.com/littlejon/rtk-19-issue-repro (based on a template I built to speed up component testing outside of my project).

I'm not sure if this is a Nextjs, next-redux-wrapper, or Redux-Toolkit issue, please let me know if there are further details I can provide or tests to try.

Thanks!

Backend Logs: dev

ReferenceError: requestAnimationFrame is not defined
    at C:\rtk-19-issue-repro\node_modules\@reduxjs\toolkit\dist\redux-toolkit.cjs.development.js:1909:101
    at C:\rtk-19-issue-repro\node_modules\redux\lib\redux.js:690:31
    at createStore (C:\rtk-19-issue-repro\node_modules\redux\lib\redux.js:162:33)
    at configureStore (C:\rtk-19-issue-repro\node_modules\@reduxjs\toolkit\dist\redux-toolkit.cjs.development.js:555:42)
    at makeStore (webpack-internal:///./store/index.ts:23:83)
    at createStore (C:\rtk-19-issue-repro\node_modules\next-redux-wrapper\lib\index.js:112:44)
    at initStore (C:\rtk-19-issue-repro\node_modules\next-redux-wrapper\lib\index.js:123:16)
    at C:\rtk-19-issue-repro\node_modules\next-redux-wrapper\lib\index.js:259:63
    at Object.useMemo (C:\rtk-19-issue-repro\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5124:19)
    at useMemo (C:\rtk-19-issue-repro\node_modules\react\cjs\react.development.js:1650:21)
error - ReferenceError: requestAnimationFrame is not defined
    at C:\rtk-19-issue-repro\node_modules\@reduxjs\toolkit\dist\redux-toolkit.cjs.development.js:1909:101
    at C:\rtk-19-issue-repro\node_modules\redux\lib\redux.js:690:31
    at createStore (C:\rtk-19-issue-repro\node_modules\redux\lib\redux.js:162:33)
    at configureStore (C:\rtk-19-issue-repro\node_modules\@reduxjs\toolkit\dist\redux-toolkit.cjs.development.js:555:42)
    at makeStore (webpack-internal:///./store/index.ts:23:83)
    at createStore (C:\rtk-19-issue-repro\node_modules\next-redux-wrapper\lib\index.js:112:44)
    at initStore (C:\rtk-19-issue-repro\node_modules\next-redux-wrapper\lib\index.js:123:16)
    at C:\rtk-19-issue-repro\node_modules\next-redux-wrapper\lib\index.js:259:63
    at Object.useMemo (C:\rtk-19-issue-repro\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5124:19)
    at useMemo (C:\rtk-19-issue-repro\node_modules\react\cjs\react.development.js:1650:21) {
  page: '/'
}

Build Logs

PS C:\rtk-19-issue-repro> pnpm build

> @ build C:\rtk-19-issue-repro
> next build

info  - Linting and checking validity of types
info  - Creating an optimized production build
info  - Compiled successfully
info  - Collecting page data
[    ] info  - Generating static pages (0/4)ReferenceError: requestAnimationFrame is not defined
    at C:\rtk-19-issue-repro\node_modules\@reduxjs\toolkit\dist\redux-toolkit.cjs.production.min.js:1:24684        
    at C:\rtk-19-issue-repro\node_modules\redux\lib\redux.js:690:31
    at createStore (C:\rtk-19-issue-repro\node_modules\redux\lib\redux.js:162:33)
    at B (C:\rtk-19-issue-repro\node_modules\@reduxjs\toolkit\dist\redux-toolkit.cjs.production.min.js:1:7964)     
    at makeStore (C:\rtk-19-issue-repro\.next\server\chunks\323.js:102:46)
    at createStore (C:\rtk-19-issue-repro\node_modules\next-redux-wrapper\lib\index.js:112:44)
    at initStore (C:\rtk-19-issue-repro\node_modules\next-redux-wrapper\lib\index.js:123:16)
    at C:\rtk-19-issue-repro\node_modules\next-redux-wrapper\lib\index.js:259:63
    at Object.Kc [as useMemo] (C:\rtk-19-issue-repro\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:60:240)
    at exports.useMemo (C:\rtk-19-issue-repro\node_modules\react\cjs\react.production.min.js:25:208)

Error occurred prerendering page "/500". Read more: https://nextjs.org/docs/messages/prerender-error
ReferenceError: requestAnimationFrame is not defined
    at C:\rtk-19-issue-repro\node_modules\@reduxjs\toolkit\dist\redux-toolkit.cjs.production.min.js:1:24684        
    at C:\rtk-19-issue-repro\node_modules\redux\lib\redux.js:690:31
    at createStore (C:\rtk-19-issue-repro\node_modules\redux\lib\redux.js:162:33)
    at B (C:\rtk-19-issue-repro\node_modules\@reduxjs\toolkit\dist\redux-toolkit.cjs.production.min.js:1:7964)     
    at makeStore (C:\rtk-19-issue-repro\.next\server\chunks\323.js:102:46)
    at createStore (C:\rtk-19-issue-repro\node_modules\next-redux-wrapper\lib\index.js:112:44)
    at initStore (C:\rtk-19-issue-repro\node_modules\next-redux-wrapper\lib\index.js:123:16)
    at C:\rtk-19-issue-repro\node_modules\next-redux-wrapper\lib\index.js:259:63
    at Object.Kc [as useMemo] (C:\rtk-19-issue-repro\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:60:240)
    at exports.useMemo (C:\rtk-19-issue-repro\node_modules\react\cjs\react.production.min.js:25:208)
ReferenceError: requestAnimationFrame is not defined
    at C:\rtk-19-issue-repro\node_modules\@reduxjs\toolkit\dist\redux-toolkit.cjs.production.min.js:1:24684        
    at C:\rtk-19-issue-repro\node_modules\redux\lib\redux.js:690:31
    at createStore (C:\rtk-19-issue-repro\node_modules\redux\lib\redux.js:162:33)
    at B (C:\rtk-19-issue-repro\node_modules\@reduxjs\toolkit\dist\redux-toolkit.cjs.production.min.js:1:7964)     
    at makeStore (C:\rtk-19-issue-repro\.next\server\chunks\323.js:102:46)
    at createStore (C:\rtk-19-issue-repro\node_modules\next-redux-wrapper\lib\index.js:112:44)
    at initStore (C:\rtk-19-issue-repro\node_modules\next-redux-wrapper\lib\index.js:123:16)
    at C:\rtk-19-issue-repro\node_modules\next-redux-wrapper\lib\index.js:259:63
    at Object.Kc [as useMemo] (C:\rtk-19-issue-repro\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:60:240)
    at exports.useMemo (C:\rtk-19-issue-repro\node_modules\react\cjs\react.production.min.js:25:208)

Error occurred prerendering page "/404". Read more: https://nextjs.org/docs/messages/prerender-error
ReferenceError: requestAnimationFrame is not defined
    at C:\rtk-19-issue-repro\node_modules\@reduxjs\toolkit\dist\redux-toolkit.cjs.production.min.js:1:24684        
    at C:\rtk-19-issue-repro\node_modules\redux\lib\redux.js:690:31
    at createStore (C:\rtk-19-issue-repro\node_modules\redux\lib\redux.js:162:33)
    at B (C:\rtk-19-issue-repro\node_modules\@reduxjs\toolkit\dist\redux-toolkit.cjs.production.min.js:1:7964)     
    at makeStore (C:\rtk-19-issue-repro\.next\server\chunks\323.js:102:46)
    at createStore (C:\rtk-19-issue-repro\node_modules\next-redux-wrapper\lib\index.js:112:44)
    at initStore (C:\rtk-19-issue-repro\node_modules\next-redux-wrapper\lib\index.js:123:16)
    at C:\rtk-19-issue-repro\node_modules\next-redux-wrapper\lib\index.js:259:63
    at Object.Kc [as useMemo] (C:\rtk-19-issue-repro\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:60:240)
    at exports.useMemo (C:\rtk-19-issue-repro\node_modules\react\cjs\react.production.min.js:25:208)
[=   ] info  - Generating static pages (2/4)ReferenceError: requestAnimationFrame is not defined
    at C:\rtk-19-issue-repro\node_modules\@reduxjs\toolkit\dist\redux-toolkit.cjs.production.min.js:1:24684        
    at C:\rtk-19-issue-repro\node_modules\redux\lib\redux.js:690:31
    at createStore (C:\rtk-19-issue-repro\node_modules\redux\lib\redux.js:162:33)
    at B (C:\rtk-19-issue-repro\node_modules\@reduxjs\toolkit\dist\redux-toolkit.cjs.production.min.js:1:7964)     
    at makeStore (C:\rtk-19-issue-repro\.next\server\chunks\323.js:102:46)
    at createStore (C:\rtk-19-issue-repro\node_modules\next-redux-wrapper\lib\index.js:112:44)
    at initStore (C:\rtk-19-issue-repro\node_modules\next-redux-wrapper\lib\index.js:123:16)
    at C:\rtk-19-issue-repro\node_modules\next-redux-wrapper\lib\index.js:259:63
    at Object.Kc [as useMemo] (C:\rtk-19-issue-repro\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:60:240)
    at exports.useMemo (C:\rtk-19-issue-repro\node_modules\react\cjs\react.production.min.js:25:208)
ReferenceError: requestAnimationFrame is not defined
    at C:\rtk-19-issue-repro\node_modules\@reduxjs\toolkit\dist\redux-toolkit.cjs.production.min.js:1:24684        
    at C:\rtk-19-issue-repro\node_modules\redux\lib\redux.js:690:31
    at createStore (C:\rtk-19-issue-repro\node_modules\redux\lib\redux.js:162:33)
    at B (C:\rtk-19-issue-repro\node_modules\@reduxjs\toolkit\dist\redux-toolkit.cjs.production.min.js:1:7964)     
    at makeStore (C:\rtk-19-issue-repro\.next\server\chunks\323.js:102:46)
    at createStore (C:\rtk-19-issue-repro\node_modules\next-redux-wrapper\lib\index.js:112:44)
    at initStore (C:\rtk-19-issue-repro\node_modules\next-redux-wrapper\lib\index.js:123:16)
    at C:\rtk-19-issue-repro\node_modules\next-redux-wrapper\lib\index.js:259:63
    at Object.Kc [as useMemo] (C:\rtk-19-issue-repro\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:60:240)
    at exports.useMemo (C:\rtk-19-issue-repro\node_modules\react\cjs\react.production.min.js:25:208)

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
ReferenceError: requestAnimationFrame is not defined
    at C:\rtk-19-issue-repro\node_modules\@reduxjs\toolkit\dist\redux-toolkit.cjs.production.min.js:1:24684        
    at C:\rtk-19-issue-repro\node_modules\redux\lib\redux.js:690:31
    at createStore (C:\rtk-19-issue-repro\node_modules\redux\lib\redux.js:162:33)
    at B (C:\rtk-19-issue-repro\node_modules\@reduxjs\toolkit\dist\redux-toolkit.cjs.production.min.js:1:7964)     
    at makeStore (C:\rtk-19-issue-repro\.next\server\chunks\323.js:102:46)
    at createStore (C:\rtk-19-issue-repro\node_modules\next-redux-wrapper\lib\index.js:112:44)
    at initStore (C:\rtk-19-issue-repro\node_modules\next-redux-wrapper\lib\index.js:123:16)
    at C:\rtk-19-issue-repro\node_modules\next-redux-wrapper\lib\index.js:259:63
    at Object.Kc [as useMemo] (C:\rtk-19-issue-repro\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:60:240)
    at exports.useMemo (C:\rtk-19-issue-repro\node_modules\react\cjs\react.production.min.js:25:208)

Error occurred prerendering page "/count". Read more: https://nextjs.org/docs/messages/prerender-error
ReferenceError: requestAnimationFrame is not defined
    at C:\rtk-19-issue-repro\node_modules\@reduxjs\toolkit\dist\redux-toolkit.cjs.production.min.js:1:24684        
    at C:\rtk-19-issue-repro\node_modules\redux\lib\redux.js:690:31
    at createStore (C:\rtk-19-issue-repro\node_modules\redux\lib\redux.js:162:33)
    at B (C:\rtk-19-issue-repro\node_modules\@reduxjs\toolkit\dist\redux-toolkit.cjs.production.min.js:1:7964)     
    at makeStore (C:\rtk-19-issue-repro\.next\server\chunks\323.js:102:46)
    at createStore (C:\rtk-19-issue-repro\node_modules\next-redux-wrapper\lib\index.js:112:44)
    at initStore (C:\rtk-19-issue-repro\node_modules\next-redux-wrapper\lib\index.js:123:16)
    at C:\rtk-19-issue-repro\node_modules\next-redux-wrapper\lib\index.js:259:63
    at Object.Kc [as useMemo] (C:\rtk-19-issue-repro\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:60:240)
    at exports.useMemo (C:\rtk-19-issue-repro\node_modules\react\cjs\react.production.min.js:25:208)
info  - Generating static pages (4/4)

> Build error occurred
Error: Export encountered errors on following paths:
        /
        /_error: /404
        /_error: /500
        /count
    at C:\rtk-19-issue-repro\node_modules\next\dist\export\index.js:404:19
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Span.traceAsyncFn (C:\rtk-19-issue-repro\node_modules\next\dist\trace\trace.js:79:20)
    at async C:\rtk-19-issue-repro\node_modules\next\dist\build\index.js:1229:21
    at async Span.traceAsyncFn (C:\rtk-19-issue-repro\node_modules\next\dist\trace\trace.js:79:20)
    at async C:\rtk-19-issue-repro\node_modules\next\dist\build\index.js:1091:17
    at async Span.traceAsyncFn (C:\rtk-19-issue-repro\node_modules\next\dist\trace\trace.js:79:20)
    at async Object.build [as default] (C:\rtk-19-issue-repro\node_modules\next\dist\build\index.js:65:29)
 ELIFECYCLE  Command failed with exit code 1.
@littlejon
Copy link
Author

It does work when the queue type is set to tick. Although I don't really understand the implication of using tick vs raf.

export const makeStore = (context: Context) => {
  const store = configureStore({
    reducer: {
      [api.reducerPath]: api.reducer,
      [counterSlice.name]: counterSlice.reducer,
    },
    enhancers: (existingEnhancers) => {
      return existingEnhancers.concat(autoBatchEnhancer({ type: "tick" }));
    },
    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware({
        thunk: {
          // https://github.com/reduxjs/redux-toolkit/issues/2228#issuecomment-1095409011
          extraArgument: context,
        },
      })
        .prepend(listenerMiddleware.middleware)
        .concat([api.middleware]),
    devTools: process.env.NODE_ENV !== "production",
  });

  setupListeners(store.dispatch);

  return store;
};

@phryneas
Copy link
Member

phryneas commented Nov 6, 2022 •
edited

It's essentially a different duration to the flush of waiting low-prio actions.

tick will use queueMicrotask to flush the queue
raf will use requestAnimationFrame

In our tests, tick was often too fast to flush the queue, not batching as much as possible and going with raf was a bit more balanced - but of course, if you are on a server, that will probably not have requestAnimationFrame, so you will probably have to go with tick. (or use raf on the server and tick on the client)

Maybe we should also polyfill raf with the same polyfill we did for tick - WDYT @markerikson ?

@phryneas
Copy link
Member

phryneas commented Nov 6, 2022

It batches in shorter intervals, so you will see more rerenders than with raf, but still significantly less than without the autoBatchEnhancer.

You can totally use one on the server and the other on the client.

@littlejon
Copy link
Author

FYI - using the devtools is awesome now!!! Thank-you for responding on a Sunday, I hope you guys get a break from all of this sometimes.

While a long-term solution would be good, would it work (or should it work, or is it a stupid thing to do) to detect running server-side vs client-side and set appropriately? Although this is all going to get very interesting in the near future when the Nextjs Layouts RFC comes out of beta. In this instance I'm assuming a polyfil would be the only realistic option.

So can I confirm the only downside to using tick at the moment is that it doesn't batch everything it can? I think I saw this a couple of times with sequential update subscription entries, although if this is the only downside it's still 100x better then the 1.8 behaviour.

@markerikson
Copy link
Collaborator

markerikson commented Nov 6, 2022 •
edited

tbh I'd really rather not add more polyfills at this point :) I know this is a bit of a different situation, but given that a goal in 2.0 is to remove polyfills, I'd rather just document the need to alter it at the store setup level.

Although, thinking about it... I guess it might be something like:

const rAF = (typeof window !== 'undefined' && window.requestAnimationFrame) ? window.requestAnimationFrame : queueMicrotask

ugly, but workable I guess?

@markerikson markerikson added this to the 1.9.x milestone Nov 8, 2022
@markerikson
Copy link
Collaborator

Addressed in #2887 .

@markerikson
Copy link
Collaborator

Out in https://github.com/reduxjs/redux-toolkit/releases/tag/v1.9.1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
1.9.x
Development

No branches or pull requests
3 participants
@littlejon @markerikson @phryneas