CODEWITHSUNDEEP
react-nativenpmwebpack
lavinytuttini
lavinytuttini

Reputation: 61

Module not found: Error: Can't resolve 'react-native/Libraries/Image/resolveAssetSource'

I'm adding an audio module in my current react-native project. I have tried installing several modules (react-native-sound, react-native-track-player). Getting in both modules the same Error output, which is always pointing in the 'react-native/Libraries/Image/resolveAssetsource' as module not found.

ERROR in ./node_modules/react-native-track-player/lib/index.js
Module not found: Error: Can't resolve 'react-native/Libraries/Image/resolveAssetsource' in 'D:\workspaces\web\react\blink\node_modules\react-native-track-player\lib'
 @ ./node_modules/react-native-track-player/lib/index.js 1:401-459
 @ ./node_modules/react-native-track-player/index.js
 @ ./components/ui/BlinkAudio/BlinkAudio.web.js
 @ ./components/ui/BlinkAudio/index.web.js
 @ ./components/dialogs/ResourceDetails/ResourceDetails.js
 @ ./components/dialogs/ResourceDetails/index.js
 @ ./components/panels/catalog/CatalogPanel.js
 @ ./components/parts/Main/Main.js
 @ ./components/parts/Main/index.js
 @ ./index.web.js

This is the current imports in the index file of the audio module react-native-track-player:

import { Platform, AppRegistry, DeviceEventEmitter, NativeEventEmitter, NativeModules } from 'react-native';
import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetsource';

I have tried to fix this including 'resolveAssetsource' from the imports of 'react-native' as below:

import { 
    Platform, 
    AppRegistry, 
    DeviceEventEmitter, 
    NativeEventEmitter, 
    NativeModules, 
    resolveAssetsource 
} from 'react-native';

But I am not pretty sure if it would be the best way and normally I don't like to touch package node-modules directly.

I also tried to exclude the audio module from webpack loaders with no result.

 module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: function (modulePath) {
          return (
            /node_modules/.test(modulePath) &&
            !/node_modules(\\|\/)react-native-track-player/.test(modulePath)
          );
        },

I wonder if someone could help me to find an answer and if is possible to deal with this react-native issue, as I'm thinking that these audio modules are calling wrongly the resolveAssetsource, or in the other hand, react-native doesn't provide this specific Library for third parties, I don't know.

Upvotes: 6

Views: 9357

Answers (1)

Christos Lytras
Christos Lytras

Reputation: 37337

This seems to be a syntax error issue. There is no file nor module named resolveAssetsource, the module and filename is resolveAssetSource with a capital S.

Try to remove react-native-track-player with yarn remove react-native-track-player and install it again (or delete the entire node_modules directory and run yarn install again) as the source code under react-native-track-player/lib/index.js has it properly without any errors:

import { Platform, AppRegistry, DeviceEventEmitter, NativeEventEmitter, NativeModules } from 'react-native';
import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';

If you use it elsewhere, you'll have to import it like this:

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

But that is not the prefered way to do it, as this method is a member of the RN Image class/component Image.resolveAssetSource(source), so, it's better to just import the Image component and use it like this:

import { 
    Platform, 
    AppRegistry, 
    DeviceEventEmitter, 
    NativeEventEmitter, 
    NativeModules, 
    Image  // Add Image import
} from 'react-native';

// and use the function as of Image method

let audioAssetSource = Image.resolveAssetSource(audioSource);

Either way, you'll have the method working and resolve the asset source information.

Upvotes: 2

Related Questions