"You may need an additional loader to handle the result of these loaders"（本机反应）

Question

我正在使用 TypeScript 模板开发 Bare React Native 音频播放器混合应用（网络和 android） . 在我实现 expo-av 并尝试在网络上编译它之后，我得到了这个：

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",
...
}

如果有帮助的话，这是我的资料库： https://github.com/VelislavP/MeditationAppReactNative

使用expo-av的文件是：MeditationAppReactNative/src/screens/meditations.tsx

我该如何解决这个问题？提前致谢。

Answer 1

好的，我解决了这个问题。现在可以编译了！

实际问题是：

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

所以我去了 Recording.js 并更改了：

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

对此：

this._finalDurationMillis = finalStatus.durationMillis;

其他所有出现此类错误的文件都是问号的错。

我认为这与我的项目使用 Typescript 模板和 expo-av 使用 typescript 配置自行下载有关，但由于某种原因，它位于 .js 文件中，而 js 不喜欢“ ？”（如果您不确定某些内容是否存在，则在打字稿中使用）因此现在通过删除它应用程序可以正常工作。

Answer 2

编辑 node_modules 不是一个好的解决方案。此问题是由于无效合并运算符引起的。我从来没有在 React Native 项目中这样做过，但我会在这里留下一个在 React 项目中帮助我的解决方案。我希望这对遇到类似问题的其他人有所帮助。

就我而言，加载新包很有帮助 @babel/plugin-proposal-logical-assignment-operators。

我使用的是@craco/craco，所以加载这个包非常简单。

在我的 craco.config.js 文件中，我添加了这些行。

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

你可以从这里看到关于这个问题的详细讨论link。

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

"You may need an additional loader to handle the result of these loaders"（本机反应）

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

audio

reactjs

react-native

babel-loader

expo-av