web-dev-qa-db-fra.com

Environnement Webpack babel-loader: Echec de la construction du module: TypeError: this.setDynamic n'est pas une fonction

J'essaie d'utiliser le babel-loader avec le babel-plugin-transform-runtime.

J'ai suivi les instructions sur: https://github.com/babel/babel-loader#babel-is-injecting-helpers-into-each-file-and-bloating-my-code

Le code correspondant:

rules: [
  // the 'transform-runtime' plugin tells babel to require the runtime
  // instead of inlining it.
  {
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env'],
        plugins: ['@babel/transform-runtime']
      }
    }
  }
]

Et j'obtiens l'erreur suivante lors de la construction:

Module build failed: Error: Cannot find module '@babel/plugin-transform-runtime'

Si je change le nom du plugin en: plugins: ['transform-runtime'], j'obtiens le message d'erreur suivant:

Module build failed: TypeError: this.setDynamic is not a function

Quel est le problème?

javascriptwebpackbabel-loader
3
yccteam

Après une lutte, j'ai trouvé la bonne façon de le faire.

Tl; dr

Si vous installez le nouveau chargeur babel, vous devez charger les nouveaux plugins babel.

Histoire complète

L'installation dans la documentation officielle: npm install [email protected] @babel/core @babel/preset-env webpack

Dans la page github, voici les instructions pour le plugin runtime:

REMARQUE: Vous devez exécuter npm install babel-plugin-transform-runtime --save-dev pour l'inclure dans votre projet et dans babel-runtime lui-même en tant que dépendance avec npm install babel-runtime --save.

Au lieu de cela, vous devriez utiliser la nouvelle version comme ceci: npm install --save-dev @babel/plugin-transform-runtime npm install --save @babel/runtime

Ensuite, cela fonctionnerait avec la configuration dans la documentation.

5
yccteam

Votre entrée de webpack ressemble à l'exemple, alors je me demande ce qui se passe si vous utilisez .babelrc.

{
   "plugins": ["transform-runtime"]
}

Le préréglage env est-il également installé?

1
user320487

Tout d’abord, comme @yccteam l’a souligné, il faut avoir installé

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime

.babelrc fichier devrait avoir

{
  "presets": [
    ["@babel/preset-env", {
      "debug": false,
      "modules": false,
      "useBuiltIns": false
    }], 
    "@babel/preset-react"
  ],
  "plugins": [
    "syntax-dynamic-import",
    "@babel/plugin-transform-runtime",
    [ "@babel/plugin-proposal-class-properties", { "loose": true } ],
    "transform-async-to-generator"
  ],
  "env": {
    "production": {
      "presets": ["react-optimize"]
    }
  }
}

webpack.js le fichier devrait ressembler à

 module: {
  rules: [
    {
      test: /(\.js[\S]{0,1})$/i,
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {
        presets: ['@babel/preset-react', '@babel/preset-env'],
        plugins: ['@babel/proposal-class-properties']
      },
    },
    ...
0
Roman