React Native音频模块报错：无法找到resolveAssetSource模块

Hey, I’ve dealt with similar React Native Web audio library issues before, so let’s break down what’s going on and the best ways to fix it:

What’s Causing the Error? #

Two key issues are at play here:

1. Outdated import path: Newer React Native versions (especially for web) expose resolveAssetSource as a top-level export from react-native, but libraries like react-native-track-player are still using the old internal path react-native/Libraries/Image/resolveAssetsource.
2. Typo in the import: Notice the lowercase s in resolveAssetsource? The actual RN module is named resolveAssetSource (uppercase S), which makes the path unresolvable in case-sensitive environments (like webpack’s strict mode).

Solutions (No Manual Node_modules Edits Needed) #

1. Use patch-package to Persist Fixes (Recommended)

This tool lets you create a patch for the library’s code that automatically applies when anyone runs npm install or yarn install:

• First, install the package:

  npm install patch-package --save-dev
  # For Yarn users:
  yarn add patch-package postinstall-postinstall --dev
  

• Open node_modules/react-native-track-player/lib/index.js and fix the import:
  Replace this line:

  import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetsource';
  

  With:

  import { resolveAssetSource } from 'react-native';
  

• Generate the patch file:

  npx patch-package react-native-track-player
  

• Commit the generated patches/react-native-track-player+[your-version].patch file to Git. Now any teammate who installs dependencies will get the fix automatically.

2. Webpack Alias Redirect

If you prefer not to modify the library code at all, add an alias to your webpack config to map the incorrect path to the correct module:

module.exports = {
  // ... your existing config
  resolve: {
    alias: {
      // Fix the typo and path issue in one go
      'react-native/Libraries/Image/resolveAssetsource': 'react-native/Libraries/Image/resolveAssetSource',
      // Or even better, map directly to the top-level export (more future-proof)
      // 'react-native/Libraries/Image/resolveAssetsource': 'react-native'
    }
  }
};

This tells webpack to resolve the broken import path to the correct module.

3. Upgrade the Library

Check if there’s a newer version of react-native-track-player or react-native-sound that already fixes this import issue. Look at the library’s GitHub changelog or issues page to confirm, then upgrade with:

npm install react-native-track-player@latest

Why Your Previous Webpack Config Didn’t Work #

Your exclude rule was trying to include the library in transpilation, but the problem wasn’t about transpilation—it was about webpack being unable to resolve the incorrect module path. The alias approach targets the root cause directly.

内容的提问来源于stack exchange，提问作者lavinytuttini