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

Question

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.

score 0 · Answer 1 · answered Aug 03 '21 at 22:18

Editing node_modules is not a good solution. This problem is because of the nullish coalescing operator. I have never done like this in React Native project, but I will leave here one solution helped me in React project. I hope this help any others who faced the similar issue.

In my case, it was helpful to load a new package @babel/plugin-proposal-logical-assignment-operators.

I was using @craco/craco, so it was pretty simple to load this package.

In my craco.config.js file, I've added these lines.

babel: {
  plugins: [
    "@babel/plugin-proposal-logical-assignment-operators"
  ],
},

You can see the details of discussion about this issue from this link.

https://github.com/facebook/create-react-app/issues/9908

score -7 · Accepted Answer · answered Feb 10 '21 at 07:39

Ok, I fixed the problem. Now it compiles!

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.

will need to fix such type error in node_modules ?you found any other generic solution for this?please suggest — priyanka, May 19 '21 at 13:41

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

2 Answers2