reactjsreact-nativeaudiobabel-loaderexpo-av

"You may need an additional loader to handle the result of these loaders" (React Native)


I am working on a Bare React Native audio player hybrid(web and android) app with a TypeScript template. After I implemented expo-av and tried to compile it on the web I got this:

Failed to compile.

./node_modules/expo-av/build/Audio/Recording.js 134:46
Module parse failed: Unexpected token (134:46)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|       this._canRecord = false;
|       this._isDoneRecording = true;
>       this._finalDurationMillis = finalStatus?.durationMillis ?? 0;
|       _recorderExists = false;
|

webpack.config.js:

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function(env, argv) {
    const config = await createExpoWebpackConfigAsync({
        ...env,
        babel: {
            dangerouslyAddModulePathsToTranspile: ['@ui-kitten/components']
        }
    }, argv);
    return config;
};

package.json:

"dependencies": {
"react": "^16.13.1",
"react-native": "0.63.4",
...
}
"devDependencies": {
"@expo/webpack-config": "^0.12.58",
"@babel/core": "^7.8.4",
...
}

Here is my repository if that would help: https://github.com/VelislavP/MeditationAppReactNative

The file that uses expo-av is: MeditationAppReactNative/src/screens/meditations.tsx

How may I fix this? Thanks in advance.


Solution

  • [THIS IS JUST FOR ADITIONAL INFO AS I FOUND THE ROOT OF THE PROBLEM]

    The actual problem was:

    ./node_modules/expo-av/build/Audio/Recording.js 134:46
    Module parse failed: Unexpected token (134:46)
    

    So I went to Recording.js and changed:

     this._finalDurationMillis = finalStatus?.durationMillis ?? 0;
    

    to this:

    this._finalDurationMillis = finalStatus.durationMillis;
    

    And every other file where there was an error of this sort it was the question mark's fault.

    I think it has to do with the fact my project is with Typescript template and expo-av downloaded itself with typescript configuration, but for some reason, it is in a .js file, and js doesn't like "?."(used in typescript if you are not sure something exists) so by removing it now the app works.