search

gnir-work / react-window-dynamic-list

A naive approach to virtualizing a dynamically sized list
49 stars 9 forks source link

DynamicList is not returning a valid Element Type #6

Closed pmontu closed 4 years ago

pmontu commented 4 years ago

example does not work on sandbox: https://codesandbox.io/s/react-window-dynamic-list-example-96xdb

Error Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

npm install of example fails

~/workspace/react-window-dynamic-list/example$ npm install
npm WARN using --force I sure hope you know what you are doing.
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path /Users/manoj/workspace/react-window-dynamic-list/example/node_modules/react-dom/node_modules/js-tokens/package.json.789687167
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, open '/Users/manoj/workspace/react-window-dynamic-list/example/node_modules/react-dom/node_modules/js-tokens/package.json.789687167'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
gnir-work commented 4 years ago

Hey, I am not sure why but sandbox doesn't play well with exporting specific and default items together. CRA wepback configuration however does handle this type of export well and that's why I didn't notice before 🐻. For now, you can do this workaround, If I find the time I will fix this sometime soon. https://codesandbox.io/s/react-window-dynamic-list-example-iwvis?file=/src/App.js

gnir-work commented 4 years ago

I am closing this issue for now, If you have anymore trouble please let me know :)

pmontu commented 4 years ago

Thank you for your reply. I got it working with your help with warnings on CRA. I am rendering 100,000 rows here: https://github.com/pmontu/react-stock-market-hacker-news-dashboard/blob/3b71e739c369f77326e64ab2c11f0c49999dbcbc/src/Components/Company.js.

Warning below:

Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported.
    in TransitionGroup (created by ForwardRef(TouchRipple))
    in span (created by ForwardRef(TouchRipple))
    in ForwardRef(TouchRipple)
    in ForwardRef(TouchRipple) (created by WithStyles(memo))
    in WithStyles(memo) (created by ForwardRef(ButtonBase))
    in NoSsr (created by ForwardRef(ButtonBase))
    in button (created by ForwardRef(ButtonBase))
    in ForwardRef(ButtonBase) (created by WithStyles(ForwardRef(ButtonBase)))
    in WithStyles(ForwardRef(ButtonBase)) (created by ForwardRef(Button))
    in ForwardRef(Button) (created by WithStyles(ForwardRef(Button)))
    in WithStyles(ForwardRef(Button)) (at Company.js:56)
    in div (at Company.js:55)
    in Unknown (created by List)
    in div (created by List)
    in div (created by List)
    in List (created by ForwardRef(DynamicList))
    in ForwardRef(DynamicList) (at Company.js:48)
    in div (created by AutoSizer)
    in AutoSizer (at Company.js:46)
    in div (at Company.js:41)
    in App (at App.js:28)
    in Route (at App.js:27)
    in Switch (at App.js:23)
    in div (at App.js:21)
    in App (at App.js:55)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:54)
    in Unknown (at src/index.js:9)
    in StrictMode (at src/index.js:8)
console.<computed> @ index.js:1
r @ react_devtools_backend.js:6
printWarning @ react-dom.development.js:88
error @ react-dom.development.js:60
pushProvider @ react-dom.development.js:11913
updateContextProvider @ react-dom.development.js:18237
beginWork @ react-dom.development.js:18658
beginWork$1 @ react-dom.development.js:23179
performUnitOfWork @ react-dom.development.js:22154
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
scheduleUpdateOnFiber @ react-dom.development.js:21199
dispatchAction @ react-dom.development.js:15660
(anonymous) @ Company.js:35
index.js:1 Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported.
    in TransitionGroup (created by ForwardRef(TouchRipple))
    in span (created by ForwardRef(TouchRipple))
    in ForwardRef(TouchRipple)
    in ForwardRef(TouchRipple) (created by WithStyles(memo))
    in WithStyles(memo) (created by ForwardRef(ButtonBase))
    in NoSsr (created by ForwardRef(ButtonBase))
    in button (created by ForwardRef(ButtonBase))
    in ForwardRef(ButtonBase) (created by WithStyles(ForwardRef(ButtonBase)))
    in WithStyles(ForwardRef(ButtonBase)) (created by ForwardRef(Button))
    in ForwardRef(Button) (created by WithStyles(ForwardRef(Button)))
    in WithStyles(ForwardRef(Button)) (at Company.js:56)
    in div (at Company.js:55)
    in div (created by List)
    in div (created by List)

Sandbox with fewer rows: https://codesandbox.io/s/react-window-dynamic-list-company-list-95nrn?file=/src/App.js Thank You

gnir-work commented 4 years ago

Could you please submit a code sandbox reproducing the warning? I don’t see it in the attached sandbox. Thanks for the feedback!

Sent from Mail for Windows 10

From: Manoj Kumar P Sent: Tuesday, 14 April 2020 18:39 To: gnir-work/react-window-dynamic-list Cc: Nir Geller; State change Subject: Re: [gnir-work/react-window-dynamic-list] DynamicList is notreturning a valid Element Type (#6)

Thank you for your reply. I got it working with your help with warnings on CRA. I am rendering 100,000 rows here: https://github.com/pmontu/react-stock-market-hacker-news-dashboard/blob/3b71e739c369f77326e64ab2c11f0c49999dbcbc/src/Components/Company.js. Warning below: Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported. in TransitionGroup (created by ForwardRef(TouchRipple)) in span (created by ForwardRef(TouchRipple)) in ForwardRef(TouchRipple) in ForwardRef(TouchRipple) (created by WithStyles(memo)) in WithStyles(memo) (created by ForwardRef(ButtonBase)) in NoSsr (created by ForwardRef(ButtonBase)) in button (created by ForwardRef(ButtonBase)) in ForwardRef(ButtonBase) (created by WithStyles(ForwardRef(ButtonBase))) in WithStyles(ForwardRef(ButtonBase)) (created by ForwardRef(Button)) in ForwardRef(Button) (created by WithStyles(ForwardRef(Button))) in WithStyles(ForwardRef(Button)) (at Company.js:56) in div (at Company.js:55) in Unknown (created by List) in div (created by List) in div (created by List) in List (created by ForwardRef(DynamicList)) in ForwardRef(DynamicList) (at Company.js:48) in div (created by AutoSizer) in AutoSizer (at Company.js:46) in div (at Company.js:41) in App (at App.js:28) in Route (at App.js:27) in Switch (at App.js:23) in div (at App.js:21) in App (at App.js:55) in Router (created by BrowserRouter) in BrowserRouter (at App.js:54) in Unknown (at src/index.js:9) in StrictMode (at src/index.js:8) console. @ index.js:1 r @ react_devtools_backend.js:6 printWarning @ react-dom.development.js:88 error @ react-dom.development.js:60 pushProvider @ react-dom.development.js:11913 updateContextProvider @ react-dom.development.js:18237 beginWork @ react-dom.development.js:18658 beginWork$1 @ react-dom.development.js:23179 performUnitOfWork @ react-dom.development.js:22154 workLoopSync @ react-dom.development.js:22130 performSyncWorkOnRoot @ react-dom.development.js:21756 (anonymous) @ react-dom.development.js:11089 unstable_runWithPriority @ scheduler.development.js:653 runWithPriority$1 @ react-dom.development.js:11039 flushSyncCallbackQueueImpl @ react-dom.development.js:11084 flushSyncCallbackQueue @ react-dom.development.js:11072 scheduleUpdateOnFiber @ react-dom.development.js:21199 dispatchAction @ react-dom.development.js:15660 (anonymous) @ Company.js:35 index.js:1 Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported. in TransitionGroup (created by ForwardRef(TouchRipple)) in span (created by ForwardRef(TouchRipple)) in ForwardRef(TouchRipple) in ForwardRef(TouchRipple) (created by WithStyles(memo)) in WithStyles(memo) (created by ForwardRef(ButtonBase)) in NoSsr (created by ForwardRef(ButtonBase)) in button (created by ForwardRef(ButtonBase)) in ForwardRef(ButtonBase) (created by WithStyles(ForwardRef(ButtonBase))) in WithStyles(ForwardRef(ButtonBase)) (created by ForwardRef(Button)) in ForwardRef(Button) (created by WithStyles(ForwardRef(Button))) in WithStyles(ForwardRef(Button)) (at Company.js:56) in div (at Company.js:55) in div (created by List) in div (created by List) Sandbox with fewer rows: https://codesandbox.io/s/react-window-dynamic-list-company-list-95nrn?file=/src/App.js Thank You — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub, or unsubscribe.

-- This email has been checked for viruses by Avast antivirus software. https://www.avast.com/antivirus