search

sghall / react-compound-slider

:black_medium_small_square: React Compound Slider | A small React slider with no opinion on markup or styles
https://react-compound-slider.netlify.com
MIT License
626 stars 80 forks source link

When Using next.js I get "Cannot read property 'map' of null." #98

Closed Zoomelectrico closed 5 years ago

Zoomelectrico commented 5 years ago

Problem or feature description:

I get an "Cannot read property 'map' of null" error when I used Next.js. According to the code and the error code, is caused by the function getHandles at /react-compound-slider/Slider/utils.js:94:24

Steps to reproduce (for problems):

Copy & Paste the example (https://sghall.github.io/react-compound-slider/#/slider-demos/horizontal) in a Next.js

Versions (for problems):

React-Compound-Slider: 2.3.0

React: 16.9.0

Browser: 77.0.3865.90

Operating System: Ubuntu 18.04 x64

Next.js: 9.0.6

Error Code:

TypeError: Cannot read property 'map' of null
    at getHandles (/home/zoomelectrico/avilatek/royal-autorama/frontend/node_modules/react-compound-slider/Slider/utils.js:94:24)
    at getDerivedStateFromProps (/home/zoomelectrico/avilatek/royal-autorama/frontend/node_modules/react-compound-slider/Slider/Slider.js:578:49)
    at processChild (/home/zoomelectrico/avilatek/royal-autorama/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:3061:63)
    at resolve (/home/zoomelectrico/avilatek/royal-autorama/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:3013:5)
    at ReactDOMServerRenderer.render (/home/zoomelectrico/avilatek/royal-autorama/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:3436:22)
    at ReactDOMServerRenderer.read (/home/zoomelectrico/avilatek/royal-autorama/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:3395:29)
    at renderToString (/home/zoomelectrico/avilatek/royal-autorama/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:3954:27)
    at render (/home/zoomelectrico/avilatek/royal-autorama/frontend/node_modules/next/dist/next-server/server/render.js:79:16)
    at renderPage (/home/zoomelectrico/avilatek/royal-autorama/frontend/node_modules/next/dist/next-server/server/render.js:257:20)
    at /home/zoomelectrico/avilatek/royal-autorama/frontend/.next/server/static/development/pages/_document.js:651:17
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/home/zoomelectrico/avilatek/royal-autorama/frontend/.next/server/static/development/pages/_document.js:206:24)
    at _next (/home/zoomelectrico/avilatek/royal-autorama/frontend/.next/server/static/development/pages/_document.js:228:9)
    at /home/zoomelectrico/avilatek/royal-autorama/frontend/.next/server/static/development/pages/_document.js:235:7
    at new Promise (<anonymous>)
    at new F (/home/zoomelectrico/avilatek/royal-autorama/frontend/node_modules/core-js/library/modules/_export.js:36:28)

Thanks in Advance!!

sghall commented 5 years ago

Hey, there. I think it's just that the values prop is undefined somehow.

I just made a NextJS app from that example to confirm it works. Try it out. unzip, npm install and npm run dev. Seems fine no errors.

hello-world.zip

Zoomelectrico commented 5 years ago

Hi! @sghall as you suggets the problem was that values prop was undefined for short time during a api request. Thanks for the help, and sorry for the troubles :+1: !!

sghall commented 5 years ago

Great. Glad it worked.