React-dnd: Babelエラー-削除されたBabel5オプションの使用

作成日 2016年03月12日  ·  16コメント  ·  ソース: react-dnd/react-dnd

私はバベル初心者です。新しいプロジェクトをセットアップし、バベルをインストールし、bowerを介してreact-dndをインストールしました。私の.babelrcには次の行があります。
{ "presets": ["es2015", "stage-0", "react"] }
モジュールのビルドに失敗しました:ReferenceError:

[BABEL] <path>\bower_components\react-dnd\src\index.js: Using removed Babel 5 option: <path>\bower_components\react-dnd\.babelrc.stage - Check out the corresponding stage-x presets http://babeljs.io/docs/plugins/#presets

私は何が間違っているのですか

最も参考になるコメント

@ walter0331

ローダー: 'ベイビーローダー'

これは事であるはずです。

全てのコメント16件

こんにちは@ jagan-veeraraghavan! Bowerにreact-dndをどのように含めていますか? あなたはこのようにそうするべきです。

代わりに、BowerをGithubリポジトリ全体に向けているようです。 使用しているBabelのバージョンと互換性のないBabel5構成ファイルである.babelrc含まれているため、これは機能しません(6)。 npmディストリビューションでは、このファイルが省略されています(ところで、Bowerではなくnpmを使用することをお勧めします)。

私が間違っている場合は、問題を再開してください。 このようなサポートの質問には、ギッタールームもお勧めします。

こんにちは、webpackとbabel 6を使用して、同様の問題が発生しました。

ERROR in ./~/dnd-core/lib/index.js
Module build failed: ReferenceError: [BABEL] /node_modules/dnd-core/lib/index.js: 
Using removed Babel 5 option: /node_modules/dnd-core/.babelrc.stage - Check out the corresponding stage-x presets http://babeljs.io/docs/plugins/#presets

これが私の設定です:

package.json

{
  "devDependencies": {
    "babel-core": "^6.3.26",
    "babel-loader": "^6.2.1",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.5.0",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "jquery": "^2.2.1",
    "less": "^2.6.1",
    "less-loader": "^2.2.2",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  },
  "dependencies": {
    "babel-polyfill": "^6.3.14",
    "expose-loader": "^0.7.1",
    "jquery": "^2.1.4",
    "lodash": "^3.10.1",
    "react": "^0.14.7",
    "react-dnd": "^2.1.3",
    "react-dnd-html5-backend": "^2.1.2",
    "react-dom": "^0.14.7",
    "tracking": "^1.1.2"
  }
}

.babelrc

{
  "presets": ["react", "es2015", "stage-0"]
}

webpack

var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader'
      }
    ]
  }
};

誰かが私を助けてくれますか?

ああ、webpack.confでnode_modulesを除外して修正しました:dancers:

      {
        exclude: /(node_modules|bower_components)/,
        test: /\.js$/,
        loader: 'babe-loader'
      },

それは私の問題を解決します、どうもありがとうございました!

@ walter0331

ローダー: 'ベイビーローダー'

これは事であるはずです。

@billyjanitsch babelの更新を検討しましたか? あなたはそれでPRのためにオープンになりますか?

WebpackとBabel6でこの問題が発生しています。@ walter0331と同様です。 私たちはカスタムの縮小やっているように私バベルを通じて、このランニングを維持する必要がありますnode_modules除くように、 node_modules 、私を助けにはなりません。

明確にするために、私は誰もが「ベイビーローダー」ではなく「バベルローダー」を意味すると思います。

loader: 'babel-loader'

babel5.xから6.xにアップグレードしようとしていますが、同じエラーが発生します。 私はreact、reduxをbabel6とwebpackで使用しています。

以下は私のwebpackconfig(partial)です
モジュール:{
ローダー:[
{テスト:/。svg $ /、除外:/。less $ /、ローダー: 'svg-inline'}、
{テスト:/。coffee $ /、ローダー: 'コーヒーローダー'}、
{テスト:/。jsx?$ /、除外:/ node_modules /、
ローダー:
['react-hot-loader / webpack'、 'babel-loader?' + JSON.stringify({
プリセット:['es2015'、 'stage-0'、 'react']、
プラグイン:['transform-decorators-legacy'、
['transform-async-to-module-method'、
{'モジュール': 'ブルーバード'、 'メソッド': 'コルーチン'}
]]
})
]
}、
{テスト:/。less /、ローダー: 'style-loader!css-loader!less-loader'}、
{テスト:/。css /、ローダー: 'style-loader!css-loader'}、
{テスト:/。json $ /、ローダー: 'json-loader'}、
{テスト:/。gif $ /、ローダー: "url-loader?mimetype = image / png"}、
{テスト:/。woff(2)?(\?v = [0-9]。[0-9]。[0-9])?$ /、ローダー: "url-loader?limit = 10000&minetype = application / font-woff "}、
{テスト:/。(ttf | eot | svg)(\?v = [0-9]。[0-9]。[0-9])?$ /、ローダー: "ファイルローダー"}、
{テスト:/jquery.js$/、ローダー: 'expose?jQuery'}、
]
}、

.babelrc

{{
"presets":["es2015"、 "react"、 "stage-0"]、
"プラグイン":["transform-decorators-legacy"、["transform-async-to-module-method"、{
「モジュール」:「ブルーバード」、
「メソッド」:「コルーチン」
}]]
}

このエラーメッセージは、主に「bluebird」からPromiseをインポートしているファイルに表示されることに気づきました。

誰か助けてもらえますか?

バンプ。 ビルド時に依存関係のbabel設定を無視する方法はありますか...?

@ walter0331どうもありがとうございました、この問題は私があなたの解決策を読むまで私をそれほど混乱させません。 しかし、次のように設定することでうまくいく理由の原理がわかりません:exclude:/(node_modules | bower_components)。

@ ry928330基本的に、 disposablesライブラリはreact-dndで使用され、 disposablesは古いバージョンのBabel 5を使用します(このライブラリは維持されません)。 Webpack構成に含まれている場合、現在バージョン6のBabelを使用しているため、競合が発生します。 したがって、ここでのより良い解決策(少なくとも私にとってはうまくいったもの)は、必ずしもすべてのnode_modulesを除外するのではなく、競合するものだけを除外することです。

たとえば、babel-loaderwebpack構成にexclude: /(disposables)/を追加します。

{
     test: /\.js$/,
     exclude: /(disposables)/,
     loader: 'babel-loader',
}

それが正しい解決策です。 Babel disposablesのどのバージョンが内部で使用されているかは関係ありません。 本当の問題は、Babelでnode_modulesをコンパイルしようとしていることです。 これは常に安全であるとは限らず、何をしているのかを理解していて、特定のパッケージのみをオプトインする(またはenginesフィールドなどの別のシグナルを使用して構成を無視する)場合を除いて、これを行うべきではありません。

それは私が[email protected]で「修正」を公開したと言った。 それでも、すべてをnode_modulesコンパイルすると、問題が発生します。

mix.webpackConfig({ module: { rules: [{ test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: Config.babel() } }] } })

それはうまくいきました、ありがとう!

追加[]で修正しました
presets: [ ["es2015", { loose: false }] ]

これは、 server/.babelrcファイルに誤ってstage: 1を追加した後に発生しました。

{
  "presets": ["es2015", "stage-0"],
  "plugins": ["transform-runtime"],
   stage: 1
}

これを削除して修正

{
  "presets": ["es2015", "stage-0"],
  "plugins": ["transform-runtime"],
}
このページは役に立ちましたか?
0 / 5 - 0 評価