Getting "Error: Plugin/Preset files are not allowed to export objects, only functions." from babel-preset-react-app/index.js
Getting "Error: Plugin/Preset files are not allowed to export objects, only functions." from babel-preset-react-app/index.js
所以我有一个用 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']
})
我已经尽可能多地通过互联网进行挖掘,以尝试解决此问题。最终找到了许多与此类似的帖子,但是 none 的建议解决方案对我有用。我看到一两个提到的,包括我已经拥有的 babel.config.js
中的 @babel/preset-env
和 @babel/preset-react
预设。希望社区有一些见解可以分享。
从 Babel7 开始,他们期望从函数返回配置。它更适合缓存。
现在要解决您的问题,试试这个
function loadConfig() {
return {
presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-flow']
}
}
module.exports = loadConfig;
我围绕这个问题在 GitHub 上发布了一个问题线程,并通过与两个 Create React App 贡献者合作解决了这个问题。关于使用 Create React App 时 Babel 的工作方式,一些重要的微妙之处引起了注意。我绝对建议那些遇到我在这里遇到的同样问题的人读一读这个对话。
https://github.com/facebook/create-react-app/issues/5135
对于那些使用 Create React App 的人,我要强调一件事:删除所有与 babel 相关的 devDependencies 并重新安装 node_modules。 Create React App 不会 关心或查找模块中的 .babelrc
或 babel.config.js
文件。它们是无用的(至少目前是这样,因为只有时间才能证明这种行为是否会发生变化)。如果这不起作用,请另外删除 package-lock.json
文件和 node_modules
,然后重试。
我在我的包中保留的唯一 babel
devDepdendency(这很可能对我的问题没有贡献)是 babel-eslint
因为我在我的项目中使用 ESLint。
所以我有一个用 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']
})
我已经尽可能多地通过互联网进行挖掘,以尝试解决此问题。最终找到了许多与此类似的帖子,但是 none 的建议解决方案对我有用。我看到一两个提到的,包括我已经拥有的 babel.config.js
中的 @babel/preset-env
和 @babel/preset-react
预设。希望社区有一些见解可以分享。
从 Babel7 开始,他们期望从函数返回配置。它更适合缓存。
现在要解决您的问题,试试这个
function loadConfig() {
return {
presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-flow']
}
}
module.exports = loadConfig;
我围绕这个问题在 GitHub 上发布了一个问题线程,并通过与两个 Create React App 贡献者合作解决了这个问题。关于使用 Create React App 时 Babel 的工作方式,一些重要的微妙之处引起了注意。我绝对建议那些遇到我在这里遇到的同样问题的人读一读这个对话。
https://github.com/facebook/create-react-app/issues/5135
对于那些使用 Create React App 的人,我要强调一件事:删除所有与 babel 相关的 devDependencies 并重新安装 node_modules。 Create React App 不会 关心或查找模块中的 .babelrc
或 babel.config.js
文件。它们是无用的(至少目前是这样,因为只有时间才能证明这种行为是否会发生变化)。如果这不起作用,请另外删除 package-lock.json
文件和 node_modules
,然后重试。
我在我的包中保留的唯一 babel
devDepdendency(这很可能对我的问题没有贡献)是 babel-eslint
因为我在我的项目中使用 ESLint。