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']
})

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

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 App 不需要或在模块中查找.babelrc或babel.config.js文件。它们是无用的（至少目前是这样，因为只有时间才能证明这种行为是否会发生变化）。如果这不起作用，请另外删除package-lock.json文件和node_modules，然后重试。

由于我在项目中使用ESLint，所以我保存在软件包中的唯一babel devDepdendency（很可能没有导致我的问题）是babel-eslint。

Answer 2

从Babel7开始，他们希望从函数返回config。缓存更好。

现在要解决您的问题，请尝试

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

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

2 个答案: