react-refresh-plugin crashes if createStorage is even referenced in a file running on expo web

[jrobber]

Summary

I'm using expo's web build using their metro config option
(https://docs.expo.dev/workflow/web/)
(https://docs.expo.dev/guides/customizing-metro/)

If createJSONStorage(() => AsyncStorage) is in the code, anywhere, even if it's in an if statement that is never true, an error is thrown in the console and the page fails to load: Cannot read properties of undefined (reading 'jotaiAtomCache')

Digging in, the only place 'jotaiAtomCache' is used as a property is in the react-refresh plugin code and it's always to the left of globalThis.jotaiAtomCache in a template string. If I comment out: 'jotai/babel/plugin-react-refresh', from babel.config.js the bug disappears.

Link to reproduction

https://github.com/jrobber/jotai-react-refresh-bug

1. Download project
2. Run npm i
3. Run npm run web > Check the browsers logs

Check List

Please do not ask questions in issues.

• This is not a question, this is a bug with reproduction.

Please include a minimal reproduction.

• I've added a link to a typescript playground or codesandbox with a minimal reproduction.

• I've attached a repo. Due to the nature of the build behind this bug it is not possible to setup CodeSandbox with the issue at this time.

[dai-shi]

We still use discussions for digging into bugs. Maybe we should change the template.

Do you know if you fix doesn't affect others? Feel free to open a PR if you have an idea for a solution.

[dai-shi]

Can anyone investigate why globalThis is undefined? What would be an alternative then?

[vipulrawat]

Even though the stack trace starts from jotaiAtomCache, it comes down to the AsyncStorage library in React Native. I removed the usage of this library for web and replaced it with custom local storage implementation which fixed the issue.