Skip to content

ListBox with Next.js: this.virtualizer is null error #2936

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
Closed
cyr-l opened this issue Mar 8, 2022 · 3 comments
Closed

ListBox with Next.js: this.virtualizer is null error #2936

cyr-l opened this issue Mar 8, 2022 · 3 comments

Comments

@cyr-l
Copy link

cyr-l commented Mar 8, 2022

🐛 Bug Report

I followed the instructions here to setup Next.js.

When I want to use a ListBox, I get a this.virtualizer is null error.

🤔 Expected Behavior

I expect the ListBox to display items without throwing.

😯 Current Behavior

Here is the full Next.js trace:

Unhandled Runtime Error

TypeError: this.virtualizer is null
Call Stack
validate
node_modules/@react-stately/layout/dist/module.js (34:0)
relayoutNow
node_modules/@react-stately/virtualizer/dist/module.js (662:0)
relayout/this._relayoutRaf<
node_modules/@react-stately/virtualizer/dist/module.js (634:0)
FrameRequestCallback*relayout
node_modules/@react-stately/virtualizer/dist/module.js (632:0)
setLayout
node_modules/@react-stately/virtualizer/dist/module.js (532:0)
set layout
node_modules/@react-stately/virtualizer/dist/module.js (510:0)
$fc0b13b484ac1194$export$1505db82fe357e65
node_modules/@react-stately/virtualizer/dist/module.js (1209:0)
$6d0a5c394373ae64$var$Virtualizer
node_modules/@react-aria/virtualizer/dist/module.js (306:42)
renderWithHooks
node_modules/react-dom/cjs/react-dom.development.js (14985:0)
updateForwardRef
node_modules/react-dom/cjs/react-dom.development.js (17044:0)
beginWork
node_modules/react-dom/cjs/react-dom.development.js (19098:0)
beginWork$1
node_modules/react-dom/cjs/react-dom.development.js (23940:0)
performUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js (22776:0)
workLoopSync
node_modules/react-dom/cjs/react-dom.development.js (22707:0)
renderRootSync
node_modules/react-dom/cjs/react-dom.development.js (22670:0)
performSyncWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js (22293:0)
scheduleUpdateOnFiber
node_modules/react-dom/cjs/react-dom.development.js (21881:0)
updateContainer
node_modules/react-dom/cjs/react-dom.development.js (25482:0)
legacyRenderSubtreeIntoContainer/<
node_modules/react-dom/cjs/react-dom.development.js (26021:0)
unbatchedUpdates
node_modules/react-dom/cjs/react-dom.development.js (22431:0)
legacyRenderSubtreeIntoContainer
node_modules/react-dom/cjs/react-dom.development.js (26020:0)
hydrate
node_modules/react-dom/cjs/react-dom.development.js (26086:0)
renderReactElement
node_modules/next/dist/client/index.js (515:30)
doRender
node_modules/next/dist/client/index.js (831:23)
_callee$
node_modules/next/dist/client/index.js (408:18)
tryCatch
node_modules/next/dist/compiled/regenerator-runtime/runtime.js (45:15)
invoke
node_modules/next/dist/compiled/regenerator-runtime/runtime.js (274:0)
defineIteratorMethods/</prototype[method]
node_modules/next/dist/compiled/regenerator-runtime/runtime.js (97:0)
asyncGeneratorStep
node_modules/next/dist/client/index.js (30:28)
_next
node_modules/next/dist/client/index.js (48:35)
_asyncToGenerator/</<
node_modules/next/dist/client/index.js (53:18)
_asyncToGenerator/<
node_modules/next/dist/client/index.js (45:15)
_render
node_modules/next/dist/client/index.js (427:19)
render
node_modules/next/dist/client/index.js (430:19)
_callee$
node_modules/next/dist/client/index.js (394:15)
tryCatch
node_modules/next/dist/compiled/regenerator-runtime/runtime.js (45:15)
invoke
node_modules/next/dist/compiled/regenerator-runtime/runtime.js (274:0)
defineIteratorMethods/</prototype[method]
node_modules/next/dist/compiled/regenerator-runtime/runtime.js (97:0)
asyncGeneratorStep
node_modules/next/dist/client/index.js (30:28)
_next
node_modules/next/dist/client/index.js (48:35)
promise callback*asyncGeneratorStep
node_modules/next/dist/client/index.js (39:31)
_next
node_modules/next/dist/client/index.js (48:35)
promise callback*asyncGeneratorStep
node_modules/next/dist/client/index.js (39:31)
_next
node_modules/next/dist/client/index.js (48:35)
promise callback*asyncGeneratorStep
node_modules/next/dist/client/index.js (39:31)
_next
node_modules/next/dist/client/index.js (48:35)
_asyncToGenerator/</<
node_modules/next/dist/client/index.js (53:18)
_asyncToGenerator/<
node_modules/next/dist/client/index.js (45:15)
_initNext
node_modules/next/dist/client/index.js (396:21)
initNext
node_modules/next/dist/client/index.js (399:21)
<unknown>
node_modules/next/dist/client/next-dev.js (44:7)
./node_modules/next/dist/client/next-dev.js
file:/Users/cy/code/memento/spectrum/.next/static/chunks/main.js (148:1)
options.factory
/_next/static/chunks/webpack.js (606:31)
__webpack_require__
file:/Users/cy/code/memento/spectrum/.next/static/chunks/webpack.js (37:33)
__webpack_exec__
/_next/static/chunks/main.js (744:61)
<unknown>
file:/Users/cy/code/memento/spectrum/.next/static/chunks/main.js (745:53)
<unknown>
webpackJsonpCallback@http://localhost:3000/_next/static/chunks/webpack.js?ts=1646750968636 (1152:46)
<unknown>
/_next/static/chunks/main.js (9:61)

💻 Code Sample

Here is the _app.js file I am using:

import {
  defaultTheme,
  Item,
  ListBox,
  Provider,
  SSRProvider,
} from "@adobe/react-spectrum";

function MyApp({ Component, pageProps }) {
  return (
    <SSRProvider>
      <Provider theme={defaultTheme}>
        <Component {...pageProps} />
        <ListBox aria-label="Alignment">
          <Item>Left</Item>
          <Item>Middle</Item>
          <Item>Right</Item>
        </ListBox>
      </Provider>
    </SSRProvider>
  );
}

export default MyApp;

🌍 Your Environment

Software Version(s)
react-spectrum 3.16.4
Browser -
Operating System macOS
@reidbarber
Copy link
Member

I made a codesandbox and I'm not seeing any issues: https://codesandbox.io/s/rsp-next-js-listbox-jqxuu0?file=/pages/index.tsx

Any special config like a strict mode turned on anywhere?

Also, sometimes with Next.js if I clear the cache (delete .next/) and restart the server issues get resolved.

@cyr-l
Copy link
Author

cyr-l commented Mar 8, 2022 •
edited
Loading

@reidbarber Thank you very much for the quick answer.

You are right, the issue comes from the reactStrictMode in the next.config.js.

I am not sure I am in the right position to gauge the effect of disabling the strict check though 😬

Again, thank you for pointing that out 👏

Edit: maybe the doc could be updated since it says Your Next.js configuration 🤷‍♂️

@cyr-l cyr-l closed this as completed Mar 8, 2022
@reidbarber
Copy link
Member

Thanks for bringing this to our attention though! We do plan on supporting strict mode, but aren't quite there yet. We have that covered in #779. Good to know that when we do, this should handled.

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
No milestone
Development

No branches or pull requests
2 participants
@cyr-l @reidbarber