Các tệp đặt trước không được phép xuất đối tượng

Tôi có một tệp băng chuyền mà tôi muốn lấy index.jsvà tạo block.build.js, vì vậy tệp của tôi webpack.config.jslà:

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;

Cái package.jsonmà tôi sử dụng là bên dưới:

{
  "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"
}

… Nhưng tôi nhận được thông báo lỗi này:

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

Có ai biết làm thế nào để giải quyết điều này?

Bạn đang sử dụng kết hợp Babel 6 và Babel 7. Không có gì đảm bảo về tính tương thích giữa các phiên bản:

"@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",

nên là

"@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",

và

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

sẽ là

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

Tôi cũng bối rối vì bạn không đề cập @babel/proposal-class-propertiestrong của bạn package.json, nhưng giả sử nó có trong đó thì nó cũng nên được cập nhật.

Điều đó đã xảy ra với tôi và một giải pháp đơn giản cho tôi là gỡ cài đặt babel-loader@8^và @babel/core:

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

… Và sau đó để cài đặt babel-loader phiên bản 7:

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

Cũng từ phiên bản babel-loaderv8, chúng đã thay đổi một chút:

webpack 4.x | babel-loader 8.x | babel 7.x

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

webpack 4.x | babel-loader 7.x | babel 6.x

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

(điều tương tự @babel/preset-reactthay vì babel-preset-react).

Gặp sự cố tương tự trong dự án webpack / react của tôi - có vẻ như đã xảy ra sự cố với .babelrctệp.

Tôi đã cập nhật nó như được thấy bên dưới và nó đã thực hiện thủ thuật:

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

điều này đã làm việc cho tôi:

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

và trong babelrc:

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

Giải pháp này đã làm việc cho tôi:

npm install babel-loader babel-preset-react

sau đó trong .babelrc

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

sau đó chạy npm run start, webpack sẽ tạo distthư mục.

Có các nâng cấp trong babel 7 từ phiên bản 6, hãy tham khảo https://babeljs.io/docs/en/v7-migration . Để giải quyết vấn đề / lỗi hiện tại

Tải về

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

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

thì trong .babelrc phụ thuộc cho các giá trị đặt trước sẽ giống như

{

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

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

}

Tôi có "giai đoạn 1" trong các giá trị đặt trước của mình bằng .babelrc, vì vậy tôi đã xóa phần đó và lỗi đã biến mất

Thay thế tệp .babelrc của bạn sau mã, điều này khắc phục sự cố của tôi

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

Đó là do các gói babel lỗi thời đang được sử dụng. Dự án babel, cũng giống như hầu hết các dự án Javascript đang hoạt động khác, đã chuyển sang sử dụng các gói phạm vi. Do đó, tên gói bắt đầu bằng@babel

Nếu bạn đang sử dụng sợi, hãy làm theo cách dưới đây:

Bước 1: Loại bỏ các gói cũ

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

bước 2: Thêm các gói mới

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

Nếu bạn đang sử dụng npm, hãy làm theo cách bên dưới:

bước 1: Loại bỏ các gói cũ

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

bước 2: Thêm các gói mới

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

Bước 3: chung cho cả npm hoặc sợi

Sau khi cài đặt các gói mới hơn, hãy nhớ cập nhật các .babelrccài đặt trước của bạn từ reactthành @babel/preset-react. Đây là một ví dụ đơn giản

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