得到“错误：插件/预设文件不允许导出对象，只有功能。”来自 babel-preset-react-app/index.js

Question

所以我有一个使用 create-react-app 引导的项目，当尝试使用 react-scripts build 构建时，我收到以下错误输出：

Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions.

根据输出，错误来自node_modules/babel-preset-react-app/index.js，如下所示：

'use strict';

const create = require('./create');
var env = process.env.BABEL_ENV || process.env.NODE_ENV;

module.exports = create(env);

我正在使用 Babel 7 及以下是来自package.json 的相关依赖包列表：

"dependencies": {
    ...
    "react": "^16.5.2",
    "react-dom": "^16.4.0",
    "react-loadable": "^5.4.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.5"
},
"devDependencies": {
    "@babel/cli": "^7.1.0",
    "@babel/core": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-flow": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^9.0.0"
    ...
}

我的babel.config.js 如下：

module.exports({
 presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-flow']
})

我已尽我所能通过互联网进行挖掘以尝试解决此问题。最终找到了许多与此类似的帖子，但是没有一个建议的解决方案对我有用。我在babel.config.js 中看到了一两个提到的包括@babel/preset-env 和@babel/preset-react 预设，我已经拥有了。希望社区有一些见解可以分享。

Answer 1

我在 GitHub 上发布了一个围绕这个问题的问题线程，并通过与两个 Create React App 贡献者合作解决了这个问题。关于 Babel 在使用 Create React App 时的工作方式，一些非常微妙的地方引起了人们的注意。我绝对建议为那些遇到与我在这里遇到的同样问题的人阅读对话。

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

对于那些使用 Create React App 的人，我要强调一件事：删除所有 babel 相关的 devDependencies 并重新安装你的 node_modules。创建 React 应用程序不关心或查找模块中的 .babelrc 或 babel.config.js 文件。它们是无用的（至少目前是这样，因为只有时间会证明这种行为是否会发生变化）。如果这不起作用，请另外删除您的 package-lock.json 文件以及您的 node_modules 并重试。

我保存在我的包中的唯一babeldevDepdendency（很可能不会导致我的问题）是babel-eslint，因为我在我的项目中使用了 ESLint。

Answer 2

从 Babel7 开始，他们希望配置从函数返回。它更适合缓存。

现在要解决您的问题，试试这个

function loadConfig() {
  return {
    presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-flow']
  }
}
module.exports = loadConfig;