web-dev-qa-db-ja.com

Webpack babel-loaderランタイム：モジュールのビルドに失敗しました：TypeError：this.setDynamicは関数ではありません

babel-loaderをbabel-plugin-transform-runtimeとともに使用しようとしています。

次の手順に従いました： https://github.com/babel/babel-loader#babel-is-injecting-helpers-into-each-file-and-bloating-my-code

関連するコード：

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']
      }
    }
  }
]

そして、ビルド時に次のエラーが表示されます。

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

プラグイン名をplugins: ['transform-runtime']に変更すると、次のエラーが表示されます。

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

何が問題ですか？

javascriptwebpackbabel-loader
8
yccteam

闘争の後、私はそれを行う正しい方法を見つけました。

Tl; dr

新しいbabelローダーをインストールする場合は、新しいbabelプラグインをロードする必要があります。

ストーリー全体

公式ドキュメントのインストール：npm install [email protected] @babel/core @babel/preset-env webpack

Githubページでは、これらはruntimeプラグインの指示でした：

注：npm install babel-plugin-transform-runtime --save-devを実行して、プロジェクトとbabel-runtime自体をnpm install babel-runtime --saveの依存関係として含める必要があります。

代わりに、次のような新しいバージョンを使用する必要があります。npm install --save-dev @babel/plugin-transform-runtime npm install --save @babel/runtime

その後、ドキュメントの構成で動作します。

6
yccteam

まず、@ yccteamが指摘したように、インストールする必要がある

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

。babelrcファイルには

{
  "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ファイルは次のようになります

 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']
      },
    },
    ...
1
Roman

Webpackエントリは例と同じように見えるので、.babelrcを使用するとどうなりますか。

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

Envプリセットもインストールされていますか？

0
user320487