WebpackerでVueを導入時に起きた.babelrcのエラーについて
はじめに
最近Railsを書き始めて、Vueも使って開発をやりたいな。と思ったのでWebpackerを導入しました。
導入した際に、エラーが起きたのでその解決法と自分用の備忘録になります。
環境
- Ruby: 2.4.1p111
- Rails: 5.2.0
- Vue: 2.5.16
- webpacker: 3.5.5
- yarn: 1.7.0
インスコ手順
RailsにWebpackerを導入する方法についての説明等はネット上に腐るほどあるので説明を省いて、自分がやった手順だけ書きます。
また、今回のWebpackerのインストールは、rails newを行った後から導入する方法でやりました。
Gemパッケージのインスコ
Gemfile
gem 'webpacker', github:'rails/webpacker'
Gemfileの追加後
$ bundle install
Yarnのインスコ
$ brew install yarn 公式の手順はこちらから
Webpackerの実行
Webpack関連のファイル等の準備
$ bin/rails webpacker:install
Vue.jsのインスコ
$ bin/rails webpacker:install:vue
ここまでは、特に問題なく進む。
JSのコンパイル
インスコしたVue.jsファイルをのコンパイルを行う
$ bin/webpack
Hash: 960fa63d80352d95be8f
Version: webpack 3.12.0
Time: 571ms
Asset Size Chunks Chunk Names
hello_vue-990ed3f3560426dbbfd8.js 4.47 kB 0 [emitted] hello_vue
application-7174686f6c38caa3e3e5.js 4.47 kB 1 [emitted] application
hello_vue-990ed3f3560426dbbfd8.js.map 2.49 kB 0 [emitted] hello_vue
application-7174686f6c38caa3e3e5.js.map 2.49 kB 1 [emitted] application
manifest.json 274 bytes [emitted]
[0] ./app/javascript/packs/application.js 1.72 kB {1} [built] [failed] [1 error]
[1] ./app/javascript/packs/hello_vue.js 1.72 kB {0} [built] [failed] [1 error]
ERROR in ./app/javascript/packs/hello_vue.js
Module build failed: ReferenceError: Unknown plugin "@babel/plugin-transform-destructuring" specified in "/Users/mizoken/programing/Ruby/task_managers/.babelrc" at 0, attempted to resolve relative to "/Users/mizoken/programing/Ruby/task_managers"
at /Users/mizoken/programing/Ruby/task_managers/node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17
at Array.map (<anonymous>)
at Function.normalisePlugins (/Users/mizoken/programing/Ruby/task_managers/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
at OptionManager.mergeOptions (/Users/mizoken/programing/Ruby/task_managers/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
at OptionManager.init (/Users/mizoken/programing/Ruby/task_managers/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
at File.initOptions (/Users/mizoken/programing/Ruby/task_managers/node_modules/babel-core/lib/transformation/file/index.js:212:65)
at new File (/Users/mizoken/programing/Ruby/task_managers/node_modules/babel-core/lib/transformation/file/index.js:135:24)
at Pipeline.transform (/Users/mizoken/programing/Ruby/task_managers/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
at transpile (/Users/mizoken/programing/Ruby/task_managers/node_modules/babel-loader/lib/index.js:50:20)
at /Users/mizoken/programing/Ruby/task_managers/node_modules/babel-loader/lib/fs-cache.js:118:18
at ReadFileContext.callback (/Users/mizoken/programing/Ruby/task_managers/node_modules/babel-loader/lib/fs-cache.js:31:21)
at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:242:13)
ERROR in ./app/javascript/packs/application.js
Module build failed: ReferenceError: Unknown plugin "@babel/plugin-transform-destructuring" specified in "/Users/mizoken/programing/Ruby/task_managers/.babelrc" at 0, attempted to resolve relative to "/Users/mizoken/programing/Ruby/task_managers"
at /Users/mizoken/programing/Ruby/task_managers/node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17
at Array.map (<anonymous>)
at Function.normalisePlugins (/Users/mizoken/programing/Ruby/task_managers/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
at OptionManager.mergeOptions (/Users/mizoken/programing/Ruby/task_managers/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
at OptionManager.init (/Users/mizoken/programing/Ruby/task_managers/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
at File.initOptions (/Users/mizoken/programing/Ruby/task_managers/node_modules/babel-core/lib/transformation/file/index.js:212:65)
at new File (/Users/mizoken/programing/Ruby/task_managers/node_modules/babel-core/lib/transformation/file/index.js:135:24)
at Pipeline.transform (/Users/mizoken/programing/Ruby/task_managers/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
at transpile (/Users/mizoken/programing/Ruby/task_managers/node_modules/babel-loader/lib/index.js:50:20)
at /Users/mizoken/programing/Ruby/task_managers/node_modules/babel-loader/lib/fs-cache.js:118:18
at ReadFileContext.callback (/Users/mizoken/programing/Ruby/task_managers/node_modules/babel-loader/lib/fs-cache.js:31:21)
at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:242:13)
なんでや。。。と思い、エラーコードを読んで色々とググった結果としては.babelrcで指定しているbabelというプラグインなんて知らねーぞ的なことで怒られている模様。
babelってなんぞ？
babelとは、次世代のJavaScriptの標準機能を、ブラウザのサポートを待たずに使えるようにするNode.js製のツール...
エラーの解決法
.babelrcがbabelの設定ファイルで、こいつが指定しているbabelのプラグイン等が見つからないとのことなのでyarnでインスコをすればいけそうじゃないかと思いましたが、Webpackを使う上で絶対に必要なプラグインであるかの判断がつかなかったため、.babelrcを削除してから再実行してみました。(バックアップを取って)
ファイルの削除
$ rm -rf /RailsプロジェクトのPath/.babelrc
次に、再度JSのコンパイル
$ bin/webpack
Hash: d3dbaada02a6f030c7b7
Version: webpack 3.12.0
Time: 1287ms
Asset Size Chunks Chunk Names
hello_vue-5ea562f9fd54a126d7b0.js 247 kB 0 [emitted] hello_vue
application-12a437e15157c0d4029c.js 3.27 kB 1 [emitted] application
hello_vue-5ea562f9fd54a126d7b0.js.map 292 kB 0 [emitted] hello_vue
application-12a437e15157c0d4029c.js.map 3.19 kB 1 [emitted] application
manifest.json 274 bytes [emitted]
[0] (webpack)/buildin/global.js 509 bytes {0} [built]
[1] ./app/javascript/app.vue?vue&type=script&lang=js& 364 bytes {0} [built]
[2] ./node_modules/babel-loader/lib??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=script&lang=js& 112 bytes {0} [built]
[3] ./node_modules/extract-text-webpack-plugin/dist/loader.js??ref--1-0!./node_modules/style-loader??ref--1-1!./node_modules/css-loader??ref--1-2!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css& 1.33 kB {0} [built] [failed] [1 error]
[4] ./app/javascript/packs/application.js 515 bytes {1} [built]
[5] ./app/javascript/packs/hello_vue.js 1.89 kB {0} [built]
[10] ./app/javascript/app.vue 1.19 kB {0} [built]
[11] ./app/javascript/app.vue?vue&type=template&id=6fb8108a&scoped=true& 213 bytes {0} [built]
[12] ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=template&id=6fb8108a&scoped=true& 288 bytes {0} [built]
[13] ./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css& 898 bytes {0} [built]
[15] ./node_modules/css-loader??ref--1-2!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css& 702 bytes [built] [failed] [1 error]
+ 7 hidden modules
ERROR in ./node_modules/css-loader??ref--1-2!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css&
Module build failed: Error: Loading PostCSS Plugin failed: Cannot find module 'postcss-preset-env'
(@/Users/mizoken/programing/Ruby/task_managers/.postcssrc.yml)
at load (/Users/mizoken/programing/Ruby/task_managers/node_modules/postcss-load-config/src/plugins.js:21:13)
at Object.keys.filter.map (/Users/mizoken/programing/Ruby/task_managers/node_modules/postcss-load-config/src/plugins.js:53:16)
at Array.map (<anonymous>)
at plugins (/Users/mizoken/programing/Ruby/task_managers/node_modules/postcss-load-config/src/plugins.js:52:8)
at config.load.then (/Users/mizoken/programing/Ruby/task_managers/node_modules/postcss-load-config/src/index.js:72:18)
@ ./node_modules/extract-text-webpack-plugin/dist/loader.js??ref--1-0!./node_modules/style-loader??ref--1-1!./node_modules/css-loader??ref--1-2!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css& 2:14-323
@ ./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css&
@ ./app/javascript/app.vue
@ ./app/javascript/packs/hello_vue.js
ERROR in ./node_modules/extract-text-webpack-plugin/dist/loader.js??ref--1-0!./node_modules/style-loader??ref--1-1!./node_modules/css-loader??ref--1-2!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css&
Module build failed: ModuleBuildError: Module build failed: Error: Loading PostCSS Plugin failed: Cannot find module 'postcss-preset-env'
(@/Users/mizoken/programing/Ruby/task_managers/.postcssrc.yml)
at load (/Users/mizoken/programing/Ruby/task_managers/node_modules/postcss-load-config/src/plugins.js:21:13)
at Object.keys.filter.map (/Users/mizoken/programing/Ruby/task_managers/node_modules/postcss-load-config/src/plugins.js:53:16)
at Array.map (<anonymous>)
at plugins (/Users/mizoken/programing/Ruby/task_managers/node_modules/postcss-load-config/src/plugins.js:52:8)
at config.load.then (/Users/mizoken/programing/Ruby/task_managers/node_modules/postcss-load-config/src/index.js:72:18)
at runLoaders (/Users/mizoken/programing/Ruby/task_managers/node_modules/webpack/lib/NormalModule.js:195:19)
at /Users/mizoken/programing/Ruby/task_managers/node_modules/loader-runner/lib/LoaderRunner.js:364:11
at /Users/mizoken/programing/Ruby/task_managers/node_modules/loader-runner/lib/LoaderRunner.js:230:18
at context.callback (/Users/mizoken/programing/Ruby/task_managers/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at Promise.resolve.then.then.catch (/Users/mizoken/programing/Ruby/task_managers/node_modules/postcss-loader/lib/index.js:194:71)
@ ./node_modules/extract-text-webpack-plugin/dist/loader.js??ref--1-0!./node_modules/style-loader??ref--1-1!./node_modules/css-loader??ref--1-2!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css&
@ ./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css&
@ ./app/javascript/app.vue
@ ./app/javascript/packs/hello_vue.js
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js??ref--1-2!node_modules/vue-loader/lib/loaders/stylePostLoader.js!node_modules/postcss-loader/lib/index.js??ref--1-3!node_modules/vue-loader/lib/index.js??vue-loader-options!app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css&:
[0] ./node_modules/css-loader??ref--1-2!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css& 702 bytes {0} [built] [failed] [1 error]
ERROR in ./node_modules/css-loader??ref--1-2!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css&
Module build failed: Error: Loading PostCSS Plugin failed: Cannot find module 'postcss-preset-env'
(@/Users/mizoken/programing/Ruby/task_managers/.postcssrc.yml)
at load (/Users/mizoken/programing/Ruby/task_managers/node_modules/postcss-load-config/src/plugins.js:21:13)
at Object.keys.filter.map (/Users/mizoken/programing/Ruby/task_managers/node_modules/postcss-load-config/src/plugins.js:53:16)
at Array.map (<anonymous>)
at plugins (/Users/mizoken/programing/Ruby/task_managers/node_modules/postcss-load-config/src/plugins.js:52:8)
at config.load.then (/Users/mizoken/programing/Ruby/task_managers/node_modules/postcss-load-config/src/index.js:72:18)
お！エラーの内容が変わったので、次に進めた感がでましたね。
エラーの内容を確認すると、postcss-preset-envプラグインが見つからないよ。とのことなのでインスコしましょう。
$ yarn add postcss-preset-env
次は問題なくいってくれと願いつつ、3度目のJSのコンパイルを行いましょう。
$ bin/webpack
Hash: 12aa53335e387a3d0c43
Version: webpack 3.12.0
Time: 2136ms
Asset Size Chunks Chunk Names
hello_vue-065190e21206fa6aea05.js 246 kB 0 [emitted] hello_vue
application-12a437e15157c0d4029c.js 3.27 kB 1 [emitted] application
hello_vue-9cb5a7334a6577c3422968b9b9970b2f.css 138 bytes 0 [emitted] hello_vue
hello_vue-065190e21206fa6aea05.js.map 293 kB 0 [emitted] hello_vue
hello_vue-9cb5a7334a6577c3422968b9b9970b2f.css.map 561 bytes 0 [emitted] hello_vue
application-12a437e15157c0d4029c.js.map 3.19 kB 1 [emitted] application
manifest.json 434 bytes [emitted]
[0] (webpack)/buildin/global.js 509 bytes {0} [built]
[1] ./app/javascript/app.vue?vue&type=script&lang=js& 364 bytes {0} [built]
[2] ./node_modules/babel-loader/lib??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=script&lang=js& 112bytes {0} [built]
[3] ./node_modules/extract-text-webpack-plugin/dist/loader.js??ref--1-0!./node_modules/style-loader??ref--1-1!./node_modules/css-loader??ref--1-2!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css& 41 bytes {0} [built]
[4] ./app/javascript/packs/application.js 515 bytes {1} [built]
[5] ./app/javascript/packs/hello_vue.js 1.89 kB {0} [built]
[10] ./app/javascript/app.vue 1.19 kB {0} [built]
[11] ./app/javascript/app.vue?vue&type=template&id=6fb8108a&scoped=true& 213 bytes {0} [built]
[12] ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=template&id=6fb8108a&scoped=true& 288 bytes {0} [built]
[13] ./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css& 898 bytes {0} [built]
[15] ./node_modules/css-loader??ref--1-2!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css& 794 bytes [built]
+ 8 hidden modules
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js??ref--1-2!node_modules/vue-loader/lib/loaders/stylePostLoader.js!node_modules/postcss-loader/lib/index.js??ref--1-3!node_modules/vue-loader/lib/index.js??vue-loader-options!app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css&:
[0] ./node_modules/css-loader??ref--1-2!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css& 794 bytes {0} [built]
+ 1 hidden module
これで問題なくコンパイルできましたね
ブラウザ上でもHello Vue！と表示ができているので、今のところは問題なさそうです。開発中になにか問題があった場合は追記します。
エラーの起きた原因
エラーの起きた場合に、どういう処理を行った結果そうなってしまったか考えるのが振り返ることが大事だと思うのですが、今回僕がインスコのために行ったコマンドはたった３つ程度だったためインストール時に参考にしたページと僕が実際に行ったコマンドを比べてみてエラーがどうして起きたのか考えました。理由としては
bin/rails webpacker:installと本来打つべきところをrails webpacker:install
と最初の段階で打ってしまったことが原因ではないのかな。と自分の中ではそう判断しています。
ネット上で同様の現象になっている方や参考になる解決法がなかったため、同様のエラーが起きた方がいらっしゃれば教えていただきたいです!
Author And Source
この問題について(WebpackerでVueを導入時に起きた.babelrcのエラーについて), 我々は、より多くの情報をここで見つけました https://qiita.com/347lionz/items/1d677cee82a2954bd7bd著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .