Voreingestellte Dateien dürfen keine Objekte exportieren

87

Ich habe eine Karussell - Datei , in der ich mag zu bekommen index.jsund zu bauen block.build.js, so dass meine its 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;

Das, package.jsonwas ich benutze, ist unten:

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

… Aber ich bekomme folgende Fehlermeldung:

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

Weiß jemand, wie man das löst?

Sonia Maklouf
quelle
valentinog.com/blog/babel hat mir geholfen.
Ryan

Antworten:

83

Sie verwenden eine Kombination aus Babel 6 und Babel 7. Es gibt keine Garantie für die Kompatibilität zwischen den Versionen:

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

sollte sein

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

und

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

wäre

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

Ich bin auch verwirrt, weil Sie @babel/proposal-class-propertiesin Ihrem nicht erwähnt haben package.json, aber vorausgesetzt, es ist dort, sollte es auch aktualisiert werden.

loganfsmyth
quelle
1
Ich würde hervorheben, dass babel-loader8 mit diesen anderen Modulen v7 verwendet werden sollte und die Verwendung npm install --save-dev babel-loader@^7gab mir andere Fehler
YakovL
Wie kann man dann Pakete bereitstellen, die nur zu Babel 6 oder 7 gehören? Ich habe alle Lösungen durchgesehen und entweder dann gefragt @ babel / core oder babel-core. Kann das Paket manuell geändert werden?
Carmine Tambascia
Wie kann man dann sicherstellen, dass ein Paket nur zu Babel 6 oder 7 gehört? Ich habe alle Lösungen durchgesehen und entweder dann gefragt @ babel / core oder babel-core. Ich glaube, es hat mit Knotenmodulen zu tun, die immer noch irgendwie auf ein falsches Babel für ein Cache-Problem verweisen. Ich habe auch versucht, sie ohne Glück manuell zu ändern
Carmine Tambascia
Diese Situation passiert immer noch. Bisher scheint dieses Tool github.com/babel/babel-upgrade ein Weg zu sein, wenn mehr Abhängigkeiten zum Upgrade präsentiert werden
Carmine Tambascia
Ich habe immer noch Probleme mit diesem Fehler. Kann mir jemand helfen? Ich versuche, meine Reaktions-App (verwendet Webpack) auf einem Express-Server auszuführen. Hier ist mein Github-Repo ( github.com/smthmelv/my-react-app/tree/addExpressJS ). Jede Hilfe wäre sehr dankbar.
Darneezie
42

Es ist mir passiert und eine einfache Lösung für mich war zu deinstallieren babel-loader@8^und @babel/core:

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

… Und dann Version 7 Babel-Loader installieren:

npm install --save-dev babel-loader@^7
Kevin Youn
quelle
1
Es hat wirklich funktioniert, vielen Dank für diese Info. Ich habe auch Babel / Core Version 7 und Babel-Loader Version 8 verwendet. Also deinstalliere ich einfach Version 8 und installiere Version 7 mit dem Befehlnpm install --save-dev babel-loader@^7
harbrinder_singh
1
Dies hat es für mich behoben, obwohl ich kein anderes js-Framework installiert habe.
Nathaniel Flick
1
Ich vergeude im Grunde genommen einen Nachmittag, weil sich so viele Pakete geändert haben, seit ich Webpack 2 zum ersten Mal richtig eingerichtet habe. Es gibt eine Möglichkeit, stabile Pakete im Auge zu behalten? Dies ist überhaupt nicht produktiv. Ich möchte React Component entwickeln, nicht weiter installieren und Babel-Pakete
deinstallieren
1
Dies funktioniert für mich, obwohl ich einen weiteren Fehler erhalten habe, bei dem die Modulerstellung fehlgeschlagen ist (von ./node_modules/babel-loader/lib/index.js): Ich freue mich darauf, ihn zu lösen
Francis Tito
1
Unglaublich, da ich dieses Problem immer wieder habe, da viele Open-Source-Projekte ziemlich veraltet sind, sich aber auf Babel 6 oder eine Mischung mit Babel 7 beziehen
Carmine Tambascia
11

Auch von babel-loader v8 haben sie sich ein wenig verändert:

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

(Gleiches für @babel/preset-reactstatt babel-preset-react).

Thomas Decaux
quelle
8

Ich habe das gleiche Problem in meinem Webpack / React-Projekt - es scheint, dass es ein Problem mit der .babelrcDatei gab.

Ich habe es wie unten gezeigt aktualisiert und es hat den Trick gemacht:

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

das hat bei mir funktioniert:

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

und in babelrc:

"presets" : ["es2015", "react"]    
Anilal
quelle
Dies ist nicht vollständig, um dieses Problem zu lösen, zumindest um daran zu denken, das Bridge-Paket zu installieren, das vermeidet, dass für einige Hiddend-Abhängigkeiten immer noch die vorherige Version "erforderlich" ist. Ich habe diesen Fehler nach mehr als einer Stunde dank dieser npm-Installation behoben - speichern -dev "babel-core@^7.0.0-bridge.0" von hier github.com/babel/babel/issues/8482
Carmine Tambascia
3

Diese Lösung hat bei mir funktioniert:

npm install babel-loader babel-preset-react

dann in .babelrc

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

Führen npm run startSie dann aus , Webpack generiert das distVerzeichnis.

Ramy M. Mousa
quelle
3

Es gibt Upgrades in Babel 7 von Version 6 unter https://babeljs.io/docs/en/v7-migration . Um das aktuelle Problem / den aktuellen Fehler zu lösen

Installieren

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

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

dann sollte in .babelrc die Abhängigkeit für Voreinstellungen so aussehen

{

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

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

}
Jonatan
quelle
1

Ich hatte "Stufe 1" in meinen Voreinstellungen in .babelrc, also habe ich das entfernt und der Fehler ist verschwunden

Sam
quelle
0

Ersetzen Sie Ihre .babelrc-Datei gemäß dem folgenden Code, um mein Problem zu beheben

{
  "presets": ["module:metro-react-native-babel-preset"]
}
Rajesh Nasit
quelle
0

Das liegt an veralteten Babel-Paketen verwendet werden. Das Babel-Projekt hat, genau wie die meisten anderen aktiven Javascript-Projekte, die Verwendung von Scope-Paketen übernommen. Daher beginnen die Paketnamen mit@babel

Wenn Sie Garn verwenden, gehen Sie wie folgt vor:

Schritt 1: Entfernen Sie die alten Pakete

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

Schritt 2: Fügen Sie die neuen Pakete hinzu

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

Wenn Sie npm verwenden, gehen Sie wie folgt vor:

Schritt 1: Entfernen Sie die alten Pakete

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

Schritt 2: Fügen Sie die neuen Pakete hinzu

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

Schritt 3: Gemeinsam für npm oder Garn

Denken Sie nach der Installation der neueren Pakete daran, Ihre .babelrcVoreinstellungen von reactauf zu aktualisieren @babel/preset-react. Hier ist ein einfaches Beispiel

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