TypeError: Cannot read properties of undefined (reading 'getValue')

[bilalkocak]

I'm using your great module on my all projects but i couldn't implement to new one.

I got this error when "open state" to true. -> "TypeError: Cannot read properties of undefined (reading 'getValue')"

my dependencies: "react-spring-bottom-sheet": "^3.4.0", "next": "12.1.4", "react-dom": "18.0.0",

Code:

 const [open, setOpen] = useState(false)
    return (
        <>
            <button onClick={() => setOpen(true)}>Open</button>
            <BottomSheet open={open}>My awesome content here</BottomSheet>
        </>
    )

[howlettt]

Ran into the same issue, looks like it's a issue with React v18 StrictMode, removing StrictMode or running a prod build it works fine. https://reactjs.org/blog/2022/03/29/react-v18.html#new-strict-mode-behaviors

[howlettt]

Looks like react-spring doesn't support React v18 yet https://github.com/pmndrs/react-spring/issues/1563

[joshuaellis]

I've launched a beta for react18 that should resolve issues and be good to go – 9.4.5-beta.1 please feel free to give it a go and any issue feedback on that issue you linked too :)

[ivanoliveiraitez]

How i do access the beta version?

[alexchavero]

I would like to try the beta also, where can I download it? thanks

[joshuaellis]

I actually launched a new version of react-spring that works with r18, so I think this project would need to update its deps accordingly 👌🏻 9.4.5 for reference.

[alexchavero]

Thanks joshuaellis, I uninstalled the react-spring-bottom-sheet package and re-installed it. Then checked the react-spring version and is now the 9.4.5 you mentioned; but I still getting the same error: TypeError: Cannot read properties of undefined (reading 'getValue'). The error is in the localhost only, in production works fine.

Did I missed something else that you can help me please?

[joshuaellis]

Well the package here is locked to version 8 API, so it probably needs a good update to be working with react18 & react-spring9

Id try talk to the maintainer or update the lib and submit a PR.

[maxizhukov]

Have same while migrated from react to nextjs, react 18.2.0, but was working fine with 17

[AshMW2724]

@joshuaellis I have gone ahead and made the changes needed to upgrade to react-spring v9.4.5

[SebastienSusini]

I still have the issue with the last version, any ideas ?

[klanthier]

Same here, latest version (3.4.1) on react 18 still triggers the same issue. Running on NextJS if that helps

[treyhuffine]

I'm having the same issue as well. Let me know if there is anything I can do to help resolve it.

[OskarD]

It seems to be working in 3.5.0-alpha.0

[odafeaggreh]

Please has a solution to this been discovered? I'm having the same issue now

[mard0n]

the issue is still there "react": "^18.2.0", "react-dom": "^18.2.0", "react-spring-bottom-sheet": "3.5.0-alpha.0"

[novaladip]

the issue is still there "react": "^18.2.0", "react-dom": "^18.2.0", "react-spring-bottom-sheet": "3.5.0-alpha.0"

it's working fine on me, maybe try to remove the node_modules folder then run npm install again?

my package.json "react": "18.2.0", "react-dom": "18.2.0", "react-spring-bottom-sheet": "3.5.0-alpha.0",

[nazaninroozbahani]

I have the same issue. It's also working in version 3.5.0-alpha.0. Why not release the original version?

[unmanned-harry]

Same issue here

[precz]

:up:

[nadiannis]

I got the same problem.

My dependencies:

"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-spring-bottom-sheet": "^3.4.1"

[ramirez411]

I got the same error with:

"react": "18.2.0",
"react-dom": "18.2.0",
"react-spring-bottom-sheet": "^3.4.1".

I am looking for other options to do the same, instead I´ll try to use this: https://www.npmjs.com/package/react-modal-sheet

I would appreciate if other people have more options.

[howlettt]

Haven't tried it yet, but this seems similar https://github.com/roman-rr/cupertino-pane

[ramirez411]

Haven't tried it yet, but this seems similar https://github.com/roman-rr/cupertino-pane

Thanks

[joaolfern]

Haven't tried it yet, but this seems similar https://github.com/roman-rr/cupertino-pane

Very nice animations, but I unfortunately couldn't figure out how to use it with JSX

[kiki-le-singe]

I would like to use this package, but unfortunately it doesn’t work...

"next": "13.4.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-spring-bottom-sheet": "^3.4.1" | "3.5.0-alpha.0" 

[AyushSaini00]

it worked by disabling the react strict mode on nextjs 13.

[howlettt]

Haven't tried it yet, but this seems similar https://github.com/roman-rr/cupertino-pane

Very nice animations, but I unfortunately couldn't figure out how to use it with JSX

https://github.com/tech-systems/panes/issues/142#issuecomment-816086262

[kthehatter]

i guess still no solution for this issue i'm having this issue as well on nextjs 13

[Franjoo]

⬆️ Same issue here, any updates on that?

[dong-nguyen]

I still facing this issue when upgrading to Next.js 14. it works fine on Next.js 13.4 before.

[qasimgit]

Same here, getting this error in Next 14, has anyone found any solution?

[lucasromerodb]

It seems to be working in 3.5.0-alpha.0

Be careful with 3.5.0-alpha.0 version, it installs a lot of new dependencies who has at least 5 high vulnerabilities that allows SSRF attacks. Learn more here

[Stokel]

3.5.0-alpha.0 gets rid of the error for me but introduces scrolling bugs on mobile iOS. The first touch/scroll is always way too fast. Anyone has the same problems and a workaround for this?

It also introduces a bug which closes the bottom sheet for us during scrolling a long list before reaching the top.

[SilvanTheuma]

I am facing the same issues as @Stokel with 3.5.0-alpha.0 Any updates to this?

[amirhd-developer]

I'm using your great module on my all projects but i couldn't implement to new one.

I got this error when "open state" to true. -> "TypeError: Cannot read properties of undefined (reading 'getValue')"

my dependencies: "react-spring-bottom-sheet": "^3.4.0", "next": "12.1.4", "react-dom": "18.0.0",

Code:

 const [open, setOpen] = useState(false)
    return (
        <>
            <button onClick={() => setOpen(true)}>Open</button>
            <BottomSheet open={open}>My awesome content here</BottomSheet>
        </>
    )

why doesn't resolve it by update the package? @gorhom