v3: broken exports on web (Expo + react-native-web + Next)

[Simek]

What happened?

Just upgraded async-storage in React Native Directory locally to test the new release and found out that exports seems currently broken for Expo + react-native-web + Next combo.

index.tsx:936 Uncaught Error: Cannot find module '/Users/simek/GitHub/directory/node_modules/@react-native-async-storage/async-storage/lib/module/createAsyncStorage' imported from /Users/simek/GitHub/directory/node_modules/@react-native-async-storage/async-storage/lib/module/index.js
    at finalizeResolution (node:internal/modules/esm/resolve:274:11)
    at moduleResolve (node:internal/modules/esm/resolve:864:10)
    at defaultResolve (node:internal/modules/esm/resolve:990:11)
    at #cachedDefaultResolve (node:internal/modules/esm/loader:718:20)
    at #resolveAndMaybeBlockOnLoaderThread (node:internal/modules/esm/loader:735:38)
    at ModuleLoader.resolveSync (node:internal/modules/esm/loader:764:52)
    at #resolve (node:internal/modules/esm/loader:700:17)
    at ModuleLoader.getOrCreateModuleJob (node:internal/modules/esm/loader:620:35)
    at ModuleJob.syncLink (node:internal/modules/esm/module_job:143:33)
    at ModuleJob.link (node:internal/modules/esm/module_job:228:17)
    at new ModuleJob (node:internal/modules/esm/module_job:207:26)
    at #getOrCreateModuleJobAfterResolve (node:internal/modules/esm/loader:589:11)
    at afterResolve (node:internal/modules/esm/loader:624:52)
    at ModuleLoader.getOrCreateModuleJob (node:internal/modules/esm/loader:630:12)
    at onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:649:32)

Version

3.0.0

What platforms are you seeing this issue on?

• Android
• iOS
• macOS
• Windows
• web

System Information

System:
  OS: macOS 15.7.2
  CPU: (12) arm64 Apple M2 Max
  Memory: 370.44 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 24.13.0
    path: /Users/simek/.volta/tools/image/node/24.13.0/bin/node
  Yarn:
    version: 4.12.0
    path: /Users/simek/.volta/tools/image/yarn/4.12.0/bin/yarn
  npm:
    version: 11.7.0
    path: /Users/simek/.volta/tools/image/npm/11.7.0/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/simek/.rvm/gems/ruby-3.3.6/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.2
      - iOS 26.2
      - macOS 26.2
      - tvOS 26.2
      - visionOS 26.2
      - watchOS 26.2
  Android SDK:
    API Levels:
      - "33"
      - "34"
      - "35"
      - "36"
    Build Tools:
      - 33.0.1
      - 33.0.2
      - 34.0.0
      - 35.0.0
      - 36.0.0
    System Images:
      - android-33 | Google APIs ARM 64 v8a
      - android-36 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2024.1 AI-241.15989.150.2411.11948838
  Xcode:
    version: 26.2/17C52
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 25.0.1
    path: /opt/homebrew/opt/openjdk/bin/javac
  Ruby:
    version: 3.3.6
    path: /Users/simek/.rvm/rubies/ruby-3.3.6/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.1.1
    wanted: latest
  react:
    installed: 19.2.4
    wanted: 19.2.4
  react-native:
    installed: 0.84.0
    wanted: 0.84.0
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Steps to Reproduce

react-native-community/directory#2230

[krizzu]

Hey @Simek, thanks for raising this - let me check that too (been fixing the native builds just now)

[krizzu]

It seems the lack of .js extension is not welcome by react-native-web? the node_modules/@react-native-async-storage/async-storage/lib/module/index.js has imports like this:

import { getLegacyStorage } from "./createAsyncStorage";
export { createAsyncStorage } from "./createAsyncStorage";

[Simek]

@krizzu Tested local patch which adds .js to the imports, and app finds the files correctly with that.

The issue now it's that storage seems to lazy loaded, and settings like theme cause flicker when loading/after page refresh, but this might be on my hasty migration implementation. 😉

[krizzu]

@krizzu Tested local patch which adds .js to the imports, and app finds the files correctly with that.

I'm not familiar with react-native-web - is that's something common? I though RN web would resolve the .web.js file just fine?

[Simek]

Not sure either, did not seen this issue earlier with any other library.

[krizzu]

@Simek The workaround is to add @react-native-async-storage/async-storage to your PACKAGES_TO_OPTIMIZE in next.js config file. I dunno why it fails to read the .web files normally (webpack should do it?), but seems like this optimization does it behind the scene

[krizzu]

And please use v3.0.1 🙏

[Simek]

@krizzu Thanks for further debugging! 🙏

I also do some testing, the v2 implementation for web was relying on local storage, and unfortunately after some testing looks like IndexedDB is just too slow for RND use case, so I will be probably removing AsyncStorage and switching to bare local storage access, or just will stay with v2 for now.

[krizzu]

Yeah, that FART you see is better to be handled before first paint - I dunno if localStorage is good here, probably not in useEffect, but somewhere outside

[Simek]

Local storage works fine in our case, the most troublesome for RND is the way in which twrnc implements theming.

Also, that article might need some revising with v3:

• https://rxdb.info/articles/localstorage.html#what-to-use-instead-of-the-localstorage-api-in-javascript

[Simek]

Thanks for acting on this issue so quickly, since we are not 100% sure if the problem is caused directly by react-native-web, or is just a case for setup that we had in RND I'm going to close this issue.

If this is something which applies to all RN Web apps someone will definitely report this to you again. 🙂

[krizzu]

Thanks for acting on this issue so quickly, since we are not 100% sure if the problem is caused directly by react-native-web, or is just a case for setup that we had in RND I'm going to close this issue.

If this is something which applies to all RN Web apps someone will definitely report this to you again. 🙂

Yep, hopefully this was one off 🫡