Go to Qiita Advent Calendar 2024 Top
LoginSignup
10
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@347lionz

WebpackerでVueを導入時に起きた.babelrcのエラーについて

Posted at

はじめに

最近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

これで問題なくコンパイルできましたね:innocent:
ブラウザ上でもHello Vue！と表示ができているので、今のところは問題なさそうです。開発中になにか問題があった場合は追記します。

エラーの起きた原因

エラーの起きた場合に、どういう処理を行った結果そうなってしまったか考えるのが振り返ることが大事だと思うのですが、今回僕がインスコのために行ったコマンドはたった３つ程度だったためインストール時に参考にしたページと僕が実際に行ったコマンドを比べてみてエラーがどうして起きたのか考えました。理由としては
bin/rails webpacker:installと本来打つべきところをrails webpacker:install
と最初の段階で打ってしまったことが原因ではないのかな。と自分の中ではそう判断しています。
ネット上で同様の現象になっている方や参考になる解決法がなかったため、同様のエラーが起きた方がいらっしゃれば教えていただきたいです!

10
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
10
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?