私はバベル初心者です。新しいプロジェクトをセットアップし、バベルをインストールし、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
私は何が間違っているのですか
こんにちは@ 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"],
}
最も参考になるコメント
@ walter0331
これは事であるはずです。