预设文件不允许导出对象答案

【问题标题】：Preset files are not allowed to export objects预设文件不允许导出对象
【发布时间】：2018-08-17 09:10:04
【问题描述】：

我有一个轮播文件，我想在其中获取index.js 并构建block.build.js，所以我的webpack.config.js 是：

var config = {
  entry: './index.js',
  output: {
    path: __dirname,
    filename: 'block.build.js',
  },
  devServer: {
    contentBase: './Carousel'
  },
  module : {
    rules : [
      {
        test: /.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['react', 'es2015'],
          plugins: ['transform-class-properties']
        }
      }
    ]
  }
};
module.exports = config;

我使用的package.json如下：

{
  "name": "carousel",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {
    "@babel/core": "^7.0.0-beta.40",
    "babel-cli": "^6.26.0",
    "babel-loader": "^8.0.0-beta.0",
    "babel-plugin-lodash": "^3.3.2",
    "babel-plugin-react-transform": "^3.0.0",
    "babel-preset-react": "^6.24.1",
    "cross-env": "^5.1.3",
    "lodash": "^4.17.5",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-swipeable": "^4.2.0",
    "styled-components": "^3.2.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
    "start": "webpack-dev-server --open",
    "build": "webpack"
  },
  "devDependencies": {
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.10",
    "webpack-dev-server": "^3.1.0"
  },
  "author": "brad traversy",
  "license": "ISC"
}

...但我收到以下错误消息：

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

有人知道怎么解决吗？

【问题讨论】：

valentinog.com/blog/babel 帮助了我。

标签： reactjs webpack babeljs

【解决方案1】：

您正在使用 Babel 6 和 Babel 7 的组合。无法保证跨版本的兼容性：

"@babel/core": "^7.0.0-beta.40",
"babel-cli": "^6.26.0",
"babel-loader": "^8.0.0-beta.0",
"babel-plugin-lodash": "^3.3.2",
"babel-plugin-react-transform": "^3.0.0",
"babel-preset-react": "^6.24.1",

应该是

"@babel/core": "^7.0.0-beta.40",
"@babel/cli": "^7.0.0-beta.40",
"babel-loader": "^8.0.0-beta.0",
"babel-plugin-lodash": "^3.3.2",
"babel-plugin-react-transform": "^3.0.0",
"@babel/preset-react": "^7.0.0-beta.40",

和

    query: {
      presets: ['react', 'es2015'],
      plugins: ['transform-class-properties']
    }

会

    query: {
      presets: ['@babel/react', '@babel/es2015'],
      plugins: ['@babel/proposal-class-properties']
    }

我也很困惑，因为你没有在 package.json 中提到 @babel/proposal-class-properties，但假设它在那里，它也应该更新。

【讨论】：

我要强调 babel-loader 8 应该与其他模块 v7 一起使用，使用 npm install --save-dev babel-loader@^7 给了我其他错误
如何提供只属于 babel 6 或 7 的包？我浏览了所有解决方案，然后它问我@babel/core 或 babel-core。包可以手动改吗？
如何确定一个包只属于 babel 6 或 7？我浏览了所有解决方案，然后它问我@babel/core 或 babel-core。我相信这与节点模块仍然以某种方式引用错误的 babel 缓存问题有关。我也尝试手动更改它们没有运气
这种情况还是会发生。到目前为止，这个工具github.com/babel/babel-upgrade 似乎是一种提供更多升级依赖项的方式
我仍然遇到此错误的问题，有人可以帮我吗？我正在尝试在快速服务器上运行我的反应应用程序（使用 webpack）。这是我的 github repo (github.com/smthmelv/my-react-app/tree/addExpressJS)，任何帮助将不胜感激。

【解决方案2】：

这发生在我身上，一个简单的解决方案是卸载 babel-loader@8^ 和 @babel/core：

npm uninstall --save babel-loader
npm uninstall --save @babel/core

...然后安装版本 7 babel-loader:

npm install --save-dev babel-loader@^7

【讨论】：

确实有效，非常感谢您提供的信息。我也在使用 babel/core 版本 7 和 babel-loader 版本 8。所以我只需卸载版本 8 并使用命令 npm install --save-dev babel-loader@^7 安装版本 7
虽然我没有安装任何其他 js 框架，但它为我修复了它。
我基本上浪费了一个下午，因为自从几周前我第一次正确设置 webpack 2 以来，已经发生了如此多的包更改。有一种方法可以跟踪稳定的包吗？这根本没有效率。我想开发 react 组件，而不是继续安装和卸载 babel 包
这对我有用，尽管我遇到了另一个错误，即模块构建失败（来自 ./node_modules/babel-loader/lib/index.js）：所以我期待解决它
难以置信，因为许多开源项目都已经过时了，但请参考 babel 6 或与 babel 7 的组合

【解决方案3】：

在我的 webpack/react 项目中遇到了同样的问题 - .babelrc 文件似乎存在问题。

我更新了它，如下所示，它成功了：

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        "transform-class-properties",
        "transform-object-rest-spread"
    ]
}

【讨论】：

【解决方案4】：

同样是从babel-loaderv8 开始，他们有一点变化：

webpack 4.x |通天塔加载器 8.x | babel 7.x

npm install -D babel-loader @babel/core @babel/preset-env webpack

webpack 4.x |通天塔加载器 7.x | babel 6.x

npm install -D babel-loader@7 babel-core babel-preset-env webpack

（@babel/preset-react 与 babel-preset-react 相同）。

【讨论】：

【解决方案5】：

这是由于使用了过时的 babel 包。 babel 项目，就像大多数其他活跃的 Javascript 项目一样，已经开始使用范围包。因此，包名以@babel开头

如果您使用的是纱线，请按照以下说明操作：

第 1 步：删除旧包

$ yarn remove babel-core babel-loader babel-preset-env babel-preset-react

第 2 步：添加新包

$ yarn add -D @babel/core babel-loader @babel/preset-env @babel/preset-react

如果您使用的是 npm，请按照以下说明操作：

第 1 步：删除旧包

$ npm uninstall babel-core babel-loader babel-preset-env babel-preset-react

第 2 步：添加新包

$ npm add -D @babel/core babel-loader @babel/preset-env @babel/preset-react

第 3 步：npm 或 yarn 通用

安装较新的软件包后，请记住将您的 .babelrc 预设从 react 更新为 @babel/preset-react。这是一个简单的例子

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

【讨论】：

这是今天的正确答案...感谢您干净利落地布置。

【解决方案6】：

babel 7 从版本 6 有升级参考https://babeljs.io/docs/en/v7-migration。解决当前的问题/错误

安装

npm install --save-dev @babel/preset-react

npm install --save-dev @babel/preset-env

那么在 .babelrc 中，预设的依赖项应该是这样的

{

"presets":["@babel/preset-env", "@babel/preset-react"],

   "plugins": [
    "react-hot-loader/babel", "transform-object-rest-spread"]

}

【讨论】：

【解决方案7】：

这对我有用：

npm uninstall --save babel-loader
npm uninstall --save @babel/core
npm install --save-dev babel-loader@^7

在 babelrc 中：

"presets" : ["es2015", "react"]

【讨论】：

这还没有完全解决这个问题至少要记住安装桥包以避免一些隐藏的依赖仍然“需要”以前的版本，我在一个多小时后解决了这个错误感谢这里的 npm install --save-dev "babel-core@^7.0.0-bridge.0" github.com/babel/babel/issues/8482

【解决方案8】：

这个解决方案对我有用：

npm install babel-loader babel-preset-react

然后在.babelrc

{
  "presets": [
    "@babel/preset-env", "@babel/preset-react"
  ]
}

然后运行npm run start，webpack会生成dist目录。

【讨论】：

【解决方案9】：

我在 .babelrc 的预设中有“stage-1”，所以我删除了它，错误就消失了

【讨论】：

【解决方案10】：

按照代码替换您的 .babelrc 文件以解决我的问题

{
  "presets": ["module:metro-react-native-babel-preset"]
}

【讨论】：

【解决方案11】：

在webpack.config.js文件中添加

module: {
    rules: [{
            loader: 'babel-loader',
            test: /\.(js|jsx)$/,
            exclude: /(node_modules|bower_components)/,
            options: { presets: ['@babel/env','@babel/preset-react'] }
        },
    ]
}

并创建一个名为 .babelrc

的文件

{ "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

并且在 package.json 中必须安装这些 dependencies 和 devDependencies

"dependencies": {
   "@babel/preset-env": "^7.16.0",
   "@babel/preset-react": "^7.16.0",
   "babel-cli": "^6.26.0",
   "babel-core": "^6.26.3",
   "react": "^17.0.2",
   "react-dom": "^17.0.2",
   "validator": "^13.7.0",
   "webpack": "^5.62.1"
},
"devDependencies": {
   "@babel/core": "^7.16.0",
   "@types/react": "^17.0.34",
   "@types/react-dom": "^17.0.11",
   "babel-loader": "^8.2.3",
   "nodemon": "^2.0.14",
   "webpack-cli": "^4.9.1"
}

首先，删除已安装的包

如果纱线使用

yarn remove babel-core babel-loader babel-preset-env babel-preset-react

如果 npm 使用

npm uninstall babel-core babel-loader babel-preset-env babel-preset-react

然后安装包

使用 yarn

安装

yarn add -D @babel/core babel-loader @babel/preset-env @babel/preset-react

使用 npm

安装

npm add -D @babel/core babel-loader @babel/preset-env @babel/preset-react

【讨论】：

【解决方案12】：

使用 Yarn 对我有用的解决方案是：

yarn add babel-loader babel-preset-react @babel/preset-env @babel/preset-react -D

然后在 .babelrc.json 或仅在 .babelrc

{
  "presets": [
    "@babel/preset-env", "@babel/preset-react"
  ]
}

然后运行webpack或yarn webpack，它会在项目根目录生成dist。

【讨论】：