File preset tidak diperbolehkan untuk mengekspor objek

Saya memiliki file carousel yang ingin saya dapatkan index.jsdan buat block.build.js, jadi milik saya webpack.config.jsadalah:

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;

Yang package.jsonsaya gunakan di bawah ini:

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

… Tapi saya mendapatkan pesan kesalahan ini:

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

Apakah ada yang tahu bagaimana mengatasi ini?

Anda menggunakan kombinasi Babel 6 dan Babel 7. Tidak ada jaminan kompatibilitas antar versi:

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

seharusnya

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

dan

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

akan menjadi

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

Saya juga bingung karena Anda tidak menyebutkan @babel/proposal-class-propertiesdi Anda package.json, tetapi dengan asumsi itu ada di sana, itu juga harus diperbarui.

Itu terjadi pada saya dan solusi sederhana bagi saya adalah mencopot pemasangan babel-loader@8^dan @babel/core:

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

… Dan kemudian menginstal versi 7 babel-loader:

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

Juga dari babel-loaderv8, mereka sedikit berubah:

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

(hal yang sama untuk @babel/preset-reactbukannya babel-preset-react).

Punya masalah yang sama di proyek webpack / react saya - sepertinya ada masalah dengan .babelrcfile tersebut.

Saya memperbaruinya seperti yang terlihat di bawah ini dan berhasil:

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

ini berhasil untuk saya:

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

dan di babelrc:

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

Solusi ini berhasil untuk saya:

npm install babel-loader babel-preset-react

lalu masuk .babelrc

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

lalu jalankan npm run start, webpack akan menghasilkan distdirektori.

Ada peningkatan dalam babel 7 dari versi 6 lihat https://babeljs.io/docs/en/v7-migration . Untuk mengatasi masalah / kesalahan saat ini

Install

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

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

lalu di .babelrc dependensi untuk preset akan terlihat

{

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

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

}

Saya memiliki "tahap-1" dalam preset saya di .babelrc, jadi saya menghapusnya dan kesalahannya hilang

Itu karena paket babel usang yang digunakan. Proyek babel, seperti kebanyakan proyek Javascript aktif lainnya, telah beralih menggunakan paket cakupan. Karenanya, nama paket dimulai dengan@babel

Jika Anda menggunakan benang, ikuti yang di bawah ini:

Langkah 1: Hapus paket lama

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

langkah 2: Tambahkan paket baru

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

Jika Anda menggunakan npm, ikuti yang di bawah ini:

langkah 1: Hapus paket lama

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

langkah 2: Tambahkan paket baru

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

Langkah 3: umum untuk npm atau benang

Setelah menginstal paket yang lebih baru, ingatlah untuk memperbarui .babelrcpreset Anda dari reactmenjadi @babel/preset-react. Berikut ini contoh sederhananya

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

Ganti file .babelrc Anda mengikuti kode ini untuk memperbaiki masalah saya

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