Rails + Docker + Vue.jsの環境構築を行なう際に、JSのコンパイルにbin/webpackを実行するとエラーが出て、手が止まってしまったので、その対処についてです。
環境はこちらです
|
1 2 3 4 |
ruby 2.5.1 rails 5.2.1 webpacker 4.0.0 Node: v8.11.4 |
エラー内容
bin/webpackコマンドを入力すると、「Module build failed: Error: Loading PostCSS Plugin failed: Cannot find module ‘postcss-preset-env’」と出ました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
$ docker-compose run web bin/webpack Starting xxxxxxx_db_1 ... done Hash: 20c260cxxxxsssxxxe9e6dc82f Version: webpack 3.12.0 Time: 3166ms Asset Size Chunks Chunk Names hello_vue-de0c1e6254d1895909a5.js 247 kB 0 [emitted] hello_vue application-12a437e15157c0d4029c.js 3.27 kB 1 [emitted] application hello_vue-de0c1e6254d1895909a5.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.02 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.16 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& 547 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' |
解決方法
yarn add で postcss-preset-env というプラグインを入れてやれとのことです。ちなみに、Yarnとは Facebook、Google、Exponent、Tildeによって開発されたJavaScriptパッケージマネージャーです。
yarn add
https://yarnpkg.com/en/docs/cli/add
PostCSS Preset Env
https://github.com/csstools/postcss-preset-env
|
1 |
$ docker-compose run web yarn add postcss-preset-env |
これでコマンドが通るようになりました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
$ docker-compose run web bin/webpack Starting xxxxxxx_db_1 ... done Hash: 20c260cxxxxsssxxxe9e6dc82f Version: webpack 3.12.0 Time: 5851ms Asset Size Chunks Chunk Names hello_vue-e8c68f28fd2baad033fe.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-e8c68f28fd2baad033fe.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& 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& 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.16 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& 759 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& 759 bytes {0} [built] + 1 hidden module |
やったね！！😊
