Les fichiers prédéfinis ne sont pas autorisés à exporter des objets

87

J'ai un fichier carrousel dans lequel je veux obtenir index.jset construire block.build.js, donc mon webpack.config.jsest:

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;

Le package.jsonque j'utilise est ci-dessous:

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

… Mais j'obtiens ce message d'erreur:

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

Quelqu'un sait-il comment résoudre ceci?

reactjs  webpack  babeljs 
— sonia maklouf
source
— Ryan

Réponses:

83

Vous utilisez une combinaison de Babel 6 et Babel 7. Il n'y a aucune garantie de compatibilité entre les versions:

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

devrait être

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

et

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

serait

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

Je suis également confus parce que vous ne l'avez pas mentionné @babel/proposal-class-propertiesdans votre package.json, mais en supposant qu'il soit là, il devrait également être mis à jour.

— loganfsmyth
source
1
Je soulignerais que babel-loader8 devrait être utilisé avec ces autres modules v7 et que l'utilisation npm install --save-dev babel-loader@^7m'a donné d'autres erreurs
— YakovL
comment ensuite fournir des packages qui n'appartiennent qu'à babel 6 ou 7? J'ai parcouru toutes les solutions et soit ensuite il me demande @ babel / core ou babel-core. Le package peut-il être modifié manuellement?
— Carmine Tambascia
comment s'assurer alors qu'un paquet n'appartient qu'à babel 6 ou 7? J'ai parcouru toutes les solutions et soit ensuite il me demande @ babel / core ou babel-core. Je pense que cela a à voir avec les modules de nœuds qui font toujours référence à une mauvaise babel pour un problème de cache. J'ai aussi essayé de les changer manuellement sans chance
— Carmine Tambascia
Cette situation se produit toujours. Jusqu'à présent, cet outil github.com/babel/babel-upgrade semble être un moyen de présenter plus de dépendances à mettre à niveau
— Carmine Tambascia
J'ai toujours des problèmes avec cette erreur. Quelqu'un peut-il m'aider? J'essaye d'exécuter mon application react (utilise webpack) sur un serveur express. Voici mon dépôt github ( github.com/smthmelv/my-react-app/tree/addExpressJS ), toute aide serait grandement appréciée.
— Darneezie
42

Cela m'est arrivé et une solution simple pour moi était de désinstaller babel-loader@8^et @babel/core:

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

… Puis pour installer la version 7 de babel-loader:

npm install --save-dev babel-loader@^7
— Kevin Youn
source
1
Cela a vraiment fonctionné, merci beaucoup pour cette info. J'utilisais aussi babel / core version 7 et babel-loader version 8. Donc je viens de désinstaller la version 8 et d'installer la version 7 avec la commandenpm install --save-dev babel-loader@^7
— harbrinder_singh
1
Cela a résolu le problème pour moi, même si je n'ai pas installé d'autre framework js.
— Nathaniel Flick
1
En gros, je perds un après-midi parce que tant de paquets ont changé depuis quelques semaines, lorsque j'ai configuré correctement pour la première fois webpack 2. Il y a un moyen de garder une trace des paquets stables? Ce n'est pas du tout productif. Je voudrais développer un composant de réaction, ne pas continuer à installer et désinstaller les packages babel
— Carmine Tambascia
1
Cela fonctionne pour moi même si j'ai eu une autre erreur qui est l'échec de la construction du module (de ./node_modules/babel-loader/lib/index.js): j'ai donc hâte de le résoudre
— Francis Tito
1
Incroyable car je continue à avoir ce problème car de nombreux projets open source sont assez obsolètes mais se réfèrent à babel 6 ou à un mix avec babel 7
— Carmine Tambascia
11

Aussi à partir de la babel-loaderv8, ils ont un peu changé:

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

(même chose pour @babel/preset-reactau lieu de babel-preset-react).

— Thomas Decaux
source
8

J'ai eu le même problème dans mon projet webpack / react - il semble qu'il y ait eu un problème avec le .babelrcfichier.

Je l'ai mis à jour comme indiqué ci-dessous et cela a fait l'affaire:

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

cela a fonctionné pour moi:

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

et dans babelrc:

"presets" : ["es2015", "react"]
— Anilal
source
Ce n'est pas complet pour résoudre ce problème au moins pour ne pas oublier d'installer le paquet bridge qui évite que certaines dépendances cachées "nécessitent" toujours la version précédente, j'ai résolu cette erreur après plus d'une heure grâce à cette installation npm -dev "babel-core@^7.0.0-bridge.0" à partir d'ici github.com/babel/babel/issues/8482
— Carmine Tambascia
3

Cette solution a fonctionné pour moi:

npm install babel-loader babel-preset-react

puis dans .babelrc

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

puis exécutez npm run start, webpack générera le distrépertoire.

— Ramy M. Mousa
source
3

Il existe des mises à niveau dans babel 7 à partir de la version 6, reportez-vous à https://babeljs.io/docs/en/v7-migration . Pour résoudre le problème / l'erreur actuel

Installer

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

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

alors dans .babelrc la dépendance des préréglages devrait ressembler

{

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

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

}
— Jonatan
source
1

J'avais "stage-1" dans mes préréglages dans .babelrc, donc je l'ai supprimé et l'erreur a disparu

— Sam
source
0

Remplacez votre fichier .babelrc en suivant le code ce corrige mon problème

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

Cela est dû à l'utilisation de paquets babel obsolètes . Le projet babel, tout comme la plupart des autres projets Javascript actifs, est passé à l'utilisation de packages de portée. Par conséquent, les noms des packages commencent par@babel

Si vous utilisez du fil, suivez celui ci-dessous:

Étape 1: supprimer les anciens packages

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

étape 2: ajouter les nouveaux packages

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

Si vous utilisez npm, suivez celle ci-dessous:

étape 1: supprimer les anciens packages

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

étape 2: ajouter les nouveaux packages

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

Étape 3: commune à la fois au npm ou au fil

Après avoir installé les nouveaux packages, n'oubliez pas de mettre à jour vos .babelrcpréréglages de reactà @babel/preset-react. Voici un exemple simple

{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
— Anand Raja
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.