プリセットファイルはオブジェクトをエクスポートできません

91

取得index.jsしてビルドしたいカルーセルファイルがあるblock.build.jsので、次のようになり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;

package.jsonこれは私の使用は以下の通りです：

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

…しかし、次のエラーメッセージが表示されます。

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

誰かがこれを解決する方法を知っていますか？

reactjs  webpack  babeljs 
— ソニアマクルーフ
ソース
valentinog.com/blog/babelが私を助けてくれました。
— ライアン

回答:

89

Babel6とBabel7を組み合わせて使用​​しています。バージョン間の互換性は保証されていません。

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

する必要があります

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

そして

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

だろう

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

あなたが@babel/proposal-class-propertiesあなたの中package.jsonで言及しなかったので私も混乱しています、しかしそれがそこにあると仮定してそれも更新されるべきです。

— loganfsmyth
ソース
1
私がいることを強調するだろうbabel-loader8は、V7および使用して、それらの他のモジュールと一緒に使用する必要がありますnpm install --save-dev babel-loader@^7私の他のエラーを与えた
— YakovL
次に、babel 6または7のいずれかにのみ属するパッケージを提供するにはどうすればよいですか？私はすべての解決策を試しましたが、@ babel / coreまたはbabel-coreのどちらかを尋ねられました。パッケージを手動で変更できますか？
— カーマインタンバシア
次に、babel 6または7のいずれかにのみ属するパッケージを確認するにはどうすればよいですか？私はすべての解決策を試しましたが、@ babel / coreまたはbabel-coreのどちらかを尋ねられました。私はそれがまだキャッシュの問題のために間違ったbabelを何らかの形で参照しているノードモジュールと関係があると信じています。私も運がなくて手動で変更しようとしました
— CarmineTambascia19年
この状況はまだ発生します。これまでのところ、このツールgithub.com/babel/babel-upgradeは、アップグレードする依存関係がさらに提示された場合の方法のようです
— CarmineTambascia19年
私はまだこのエラーの問題を抱えています誰かが私を助けることができますか？Expressサーバーでreactアプリ（webpackを使用）を実行しようとしています。これが私のgithubリポジトリ（github.com/smthmelv/my-react-app/tree/addExpressJS）です。どんな助けでも大歓迎です。
— ダーニージー
42

それは私に起こったと私のためのシンプルなソリューションをアンインストールすることだったbabel-loader@8^と@babel/core：

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

…そしてバージョン7のbabel-loaderをインストールするには：

npm install --save-dev babel-loader@^7
— ケビン・ヨン
ソース
1
それは本当にうまくいきました、この情報をたくさんありがとう。また、私はちょうど、アンインストール、バージョン8バベル/コアバージョン7とバベルローダバージョン8だから私を使用してコマンドを使用して、バージョン7をインストールしたnpm install --save-dev babel-loader@^7
— harbrinder_singh
1
これで修正されましたが、他のjsフレームワークはインストールされていません。
— ナサニエル・フリック
1
ほんの数週間前にwebpack2を正しくセットアップして以来、多くのパッケージが変更されたため、基本的に午後を無駄にしています。安定したパッケージを追跡する方法はありますか？これはまったく生産的ではありません。バベルパッケージをインストールしてアンインストールしない反応コンポーネントを開発したい
— CarmineTambascia19年
1
私は（./node_modules/babel-loader/lib/index.jsから）失敗したモジュールのビルドで別のエラーが発生しましたけれども、私にとってこの作品は：ので、それを解決するために楽しみにしています
— フランシス・ティト
1
多くのオープンソースプロジェクトはかなり時代遅れであるため、私はこの問題を抱え続けていますが、
— babel6またはbabel7
11

また、babel-loaderv8から、少し変更されています。

webpack 4.x | babel-loader 8.x | バベル7.x

npm install -D babel-loader @babel/core @babel/preset-env webpack

webpack 4.x | babel-loader 7.x | バベル6.x

npm install -D babel-loader@7 babel-core babel-preset-env webpack

（の@babel/preset-react代わりに同じことbabel-preset-react）。

— トーマス・デコー
ソース
8

私のwebpack / reactプロジェクトで同じ問題が発生しました-.babelrcファイルに問題があったようです。

以下のように更新しましたが、うまくいきました。

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        "transform-class-properties",
        "transform-object-rest-spread"
    ]
}
— ラワン-25
ソース
3

これは私のために働いた：

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

そしてbabelrcで：

"presets" : ["es2015", "react"]
— アニラル
ソース
これはこの問題を解決するために完全ではありません。少なくとも、一部の非表示の依存関係が以前のバージョンを「必要」としていることを回避するためにブリッジパッケージをインストールすることを忘れないでください。このnpm install --saveのおかげで、1時間以上後にこのエラーを解決しました-dev "babel-core@^7.0.0-bridge.0" from here github.com/babel/babel/issues/8482
— CarmineTambascia19年
3

この解決策は私のために働いた：

npm install babel-loader babel-preset-react

その後、 .babelrc

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

次に実行するとnpm run start、webpackがdistディレクトリを生成します。

— ラミーM.ムーサ
ソース
3

バージョン6からのbabel7のアップグレードがあります。https： //babeljs.io/docs/en/v7-migrationを参照してください。現在の問題/エラーを解決するには

インストール

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

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

.babelrcでは、プリセットの依存関係は次のようになります。

{

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

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

}
— ジョナタン
ソース
1

.babelrcのプリセット内に「stage-1」があったので、それを削除するとエラーがなくなりました

— サム
ソース
1

これは、使用されている古いbabelパッケージが原因です。babelプロジェクトは、他のほとんどのアクティブなJavascriptプロジェクトと同様に、スコープパッケージの使用に移行しました。したがって、パッケージ名はで始まります@babel

糸を使用している場合は、以下の手順に従ってください。

ステップ1：古いパッケージを削除する

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

ステップ2：新しいパッケージを追加する

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

npmを使用している場合は、以下の手順に従ってください。

ステップ1：古いパッケージを削除する

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

ステップ2：新しいパッケージを追加する

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

ステップ3：npmまたはyarnの両方に共通

新しいパッケージをインストールした後、.babelrcプリセットをからreactに更新することを忘れないでください@babel/preset-react。これが簡単な例です

{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
— アナンド・ラジャ
ソース
0

コードに従って.babelrcファイルを置き換えてくださいこれで問題が修正されます

{
  "presets": ["module:metro-react-native-babel-preset"]
}
— Rajesh Nasit
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.