今更Reactを知り勉強を始めて3ヶ月目の初心者です。
いつも通り空き時間にググっていると『web-starter-kit』というgoogle製のひな形がある事を知りました。
絶対的なGoogle信者の私は神（Google）が勧めるものを使わないわけにはいきません。
Google様のサイトには誰でも簡単に出来そうに書いてあるので即舐めてかかりました。
しかし、実際やってみると。。。。
$ gulp serve
このコマンドが動くまでエラーだらけで凄い大変でした。
似たようなGoogle信者が同じ罠に嵌らないよう参考にしていただければ幸いです。
環境
| ツール・環境 | バージョン |
|---|---|
| ＯＳ | Windows10 |
| Node.js | v11.15.0 ☚大事 |
| web-starter-kit | v0.6.5 |
結論
デフォルトのパッケージのを下記のものに書き換えたらやっと動作しました
.babelrc を書き換える
{
- "presets": ["es2015"],
- // Remove the line below to enable ES2015 support.
- "only": "gulpfile.babel.js",
- "retainLines": true
+ "presets": ["@babel/preset-env"]
}
package.json を書き換える
{
"devDependencies": {
- "babel-core": "^6.14.0",
+ "@babel/core": "^7.9.0",
- "babel-preset-es2015": "^6.0.15",
+ "@babel/preset-env": "^7.9.0",
+ "@babel/register": "^7.9.0",
+ "babel-jest": "^25.2.3",
+ "babel-loader": "^8.1.0",
+ "jest": "^25.2.3",
+ "node-sass": "^4.13.1",
+ "regenerator-runtime": "^0.13.5",
+ "sass": "^1.26.3"
},
+ "resolutions": {
+ "babel-core": "7.0.0-bridge.0"
+ },
}
エラーとやった事
Uncaught SyntaxError: Cannot use import statement outside a module
最初に gulp コマンドを走らせて gulp.babel.js を読み込む時に出たエラーです
上記の通り.babelrcを書き換えることで解消しました
理由は不明です
おそらくbabel7.0でバベると出てしまうと解釈しました
詳しい方、補足いただけると涙出ます
参照記事： babel-preset-es2015 -> babel-preset-env
AssertionError [ERR_ASSERTION]: Task function must be specified
Node.jsとgulpがバージョンによって相性が悪いらしく、そのせいで出てしまったようです
初めはgulpを4.0に上げてみましたが、ほかのエラーが笑笑出たので最終的にNode.jsのバージョンを下げました
エラーと対策の詳細は参照記事でまとめて頂いているので、そちらをご覧ください
Requires Babel “7.0.0-0” but was loaded with “6.26.3”
とにかくハマりました
依存関係が悪さをしているらしいです
下記の対策でようやく対処できました
- 『babel-＊＊＊』ってなってるバベる関係のパッケージを『@babel/***』に変えまくる（グローバルもやっちゃってたらそちらも）
- package.jsonに"resolutions"を足す
- その他若干足す（上記のpackage.jsonに足したもの）
- こちらも意味は理解していません 外人が楽しそうに会話してるのを雰囲気で真似してみました
- こちらも意味は理解していません
参照記事： Requires Babel “7.0.0-0” but was loaded with “6.26.3” #8482
まとめ
上記の対策でやっとコマンド実行できました。
gulpって単語を初めて聞いたぐらいの初心者がやった事なので、間違った事や無駄なことも有るかと思います。
訂正させて頂きますので、気づかれた方ご指摘頂けると幸いです。
最後まで読んでいただき、ありがとうございました。