File preset tidak diperbolehkan untuk mengekspor objek

91

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?

reactjs  webpack  babeljs 
— sonia maklouf
sumber
valentinog.com/blog/babel membantu saya.
— Ryan

Jawaban:

89

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.

— loganfsmyth
sumber
1
Saya akan menyoroti bahwa babel-loader8 harus digunakan dengan modul lain v7 dan menggunakan npm install --save-dev babel-loader@^7memberi saya kesalahan lain
— YakovL
Lalu bagaimana cara menyediakan paket yang hanya dimiliki oleh babel 6 atau 7? Saya memeriksa semua solusi dan kemudian bertanya kepada saya @ babel / core atau babel-core. Apakah paket bisa diganti secara manual?
— Carmine Tambascia
Lalu bagaimana cara memastikan sebuah paket yang hanya dimiliki oleh babel 6 atau 7? Saya memeriksa semua solusi dan kemudian bertanya kepada saya @ babel / core atau babel-core. Saya percaya ini ada hubungannya dengan modul-node yang entah bagaimana masih merujuk ke babel yang salah untuk masalah cache. Saya juga mencoba mengubahnya secara manual tanpa hasil
— Carmine Tambascia
Situasi ini masih terjadi. Sejauh ini alat ini github.com/babel/babel-upgrade tampaknya merupakan cara ketika lebih banyak dependensi untuk ditingkatkan disajikan
— Carmine Tambascia
Saya masih mengalami masalah dengan kesalahan ini, bisakah seseorang membantu saya? Saya mencoba menjalankan aplikasi react saya (menggunakan webpack) di server ekspres. Ini repo github saya ( github.com/smthmelv/my-react-app/tree/addExpressJS ), bantuan apa pun akan sangat dihargai.
— Darneezie
42

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
— Kevin Youn
sumber
1
Ini benar-benar berhasil, terima kasih banyak atas info ini. Saya juga menggunakan babel / core versi 7 dan babel-loader versi 8. Jadi saya hanya menghapus versi 8 dan menginstal versi 7 dengan perintahnpm install --save-dev babel-loader@^7
— harbrinder_singh
1
Ini memperbaikinya untuk saya, meskipun saya belum memasang kerangka js lain.
— Nathaniel Flick
1
Pada dasarnya saya membuang-buang waktu sore karena begitu banyak paket berubah sejak beberapa minggu yang lalu ketika saya pertama kali mengatur webpack 2. Ada cara untuk melacak paket yang stabil? Ini tidak produktif sama sekali. Saya ingin mengembangkan komponen react tidak terus menginstal dan menghapus paket babel
— Carmine Tambascia
1
Ini berfungsi untuk saya meskipun saya mendapat kesalahan lain yaitu pembuatan Modul gagal (dari ./node_modules/babel-loader/lib/index.js): jadi saya menantikan untuk menyelesaikannya
— Francis Tito
1
Luar biasa karena saya terus mengalami masalah ini karena banyak proyek open source yang cukup usang tetapi lihat babel 6 atau campuran dengan babel 7
— Carmine Tambascia
11

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).

— Thomas Decaux
sumber
8

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"
    ]
}
— Rawan-25
sumber
3

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"]
— Anilal
sumber
Ini tidak lengkap untuk menyelesaikan masalah ini setidaknya untuk mengingat untuk menginstal paket jembatan yang menghindari beberapa ketergantungan hiddend masih "membutuhkan" versi sebelumnya, saya memecahkan kesalahan ini setelah lebih dari 1 jam berkat instalasi npm ini --save -dev "babel-core@^7.0.0-bridge.0" dari sini github.com/babel/babel/issues/8482
— Carmine
3

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.

— Ramy M. Mousa
sumber
3

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"]

}
— Jonatan
sumber
1

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

— Sam
sumber
1

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"
]
}
— Anand Raja
sumber
0

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

{
  "presets": ["module:metro-react-native-babel-preset"]
}
— Rajesh Nasit
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.