Build errors using react-native-web with webpack

[alexandergyllensvard]

What happened?

When upgrading from 2.1.0 to either 2.1.1 or 2.1.2, I get the following build error from webpack:

`ERROR in ./node_modules/@react-native-async-storage/async-storage/lib/module/index.js 3:0-42
Module not found: Error: Can't resolve './AsyncStorage' in '.../node_modules/@react-native-async-storage/async-storage/lib/module'
Did you mean 'AsyncStorage.js'?
BREAKING CHANGE: The request './AsyncStorage' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
resolve './AsyncStorage' in '.../node_modules/@react-native-async-storage/async-storage/lib/module'
using description file: .../node_modules/@react-native-async-storage/async-storage/lib/module/package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
using description file: .../node_modules/@react-native-async-storage/async-storage/lib/module/package.json (relative path: ./AsyncStorage)
Field 'browser' doesn't contain a valid alias configuration
...node_modules/@react-native-async-storage/async-storage/lib/module/AsyncStorage doesn't exist
@ ./src/store/basePersistConfig.web.ts 1:376-428
@ ./src/store/index.ts 1:512-542
@ ./src/booting/App.tsx 1:599-618
@ ./index.web.js 1:209-237

ERROR in ./node_modules/@react-native-async-storage/async-storage/lib/module/index.js 4:0-42
Module not found: Error: Can't resolve './hooks' in '.../node_modules/@react-native-async-storage/async-storage/lib/module'
Did you mean 'hooks.js'?
BREAKING CHANGE: The request './hooks' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
resolve './hooks' in '...node_modules/@react-native-async-storage/async-storage/lib/module'
using description file: .../node_modules/@react-native-async-storage/async-storage/lib/module/package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
using description file: .../node_modules/@react-native-async-storage/async-storage/lib/module/package.json (relative path: ./hooks)
Field 'browser' doesn't contain a valid alias configuration
.../node_modules/@react-native-async-storage/async-storage/lib/module/hooks doesn't exist
@ ./src/store/basePersistConfig.web.ts 1:376-428
@ ./src/store/index.ts 1:512-542
@ ./src/booting/App.tsx 1:599-618
@ ./index.web.js 1:209-237`

Version

2.1.2

What platforms are you seeing this issue on?

• Android
• iOS
• macOS
• Windows
• web

System Information

System:
  OS: macOS 15.3.1
  CPU: (10) arm64 Apple M2 Pro
  Memory: 262.83 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.15.0
    path: /usr/local/bin/node
  Yarn: Not Found
  npm:
    version: 10.9.2
    path: /usr/local/bin/npm
  Watchman:
    version: 2025.04.28.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/alexandergyllensvard/.rvm/gems/ruby-3.3.7/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.4
      - iOS 18.4
      - macOS 15.4
      - tvOS 18.4
      - visionOS 2.4
      - watchOS 11.4
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.3 AI-243.24978.46.2431.13363775
  Xcode:
    version: 16.3/16E140
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.15
    path: /usr/bin/javac
  Ruby:
    version: 3.3.7
    path: /Users/alexandergyllensvard/.rvm/rubies/ruby-3.3.7/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 18.0.0
    wanted: ^18.0.0
  react:
    installed: 19.0.0
    wanted: 19.0.0
  react-native:
    installed: 0.79.2
    wanted: 0.79.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Steps to Reproduce

1. Set up react-native-web with webpack
2. Build for web

[JDansercoerTwipe]

Can confirm that this also happens when building with Vite

[pedrogarciyalopez]

Has anyone found a solution yet?

[joker-777]

I also have similar issues when using webpack.

[dmitry-markevich]

For me the solution was setting the fullySpecified: false flag in the webpack config

[joker-777]

Actually, my solution didn't work. I was able to prevent the errors by adding

const appDirectory = path.resolve(__dirname)
path.resolve(appDirectory, "node_modules/@react-native-async-storage/async-storage")

to my include list of the babel-loader configuration but then I get the following error in my browser console

main.js:510 Uncaught ReferenceError: require is not defined
    at ./node_modules/@react-native-async-storage/async-storage/lib/module/index.js (main.js:510:30)
    at __webpack_require__ (bootstrap:22:1)
    at fn (hot module replacement:61:1)
    at ./App.js (App.js:17:1)
    at __webpack_require__ (bootstrap:22:1)
    at fn (hot module replacement:61:1)
    at ./index.web.js (index.web.js:2:1)
    at __webpack_require__ (bootstrap:22:1)
    at startup:6:1
    at startup:6:1

[joker-777]

I created a simple test app where you can test it. @tido64 I would appreciate your help.

[joker-777]

@dmitry-markevich Yes, adding the following rule to the webpack config fixed it.

{
  test: /\.m?js$/,
  resolve: {
    fullySpecified: false
  }
}

[kapir]

Also experiencing this issue on webpack.
I fixed it by adding this to the alias option for "module-resolver" in my webpack config
'@react-native-async-storage/async-storage':
'@react-native-async-storage/async-storage/lib/commonjs/index.js',