Rails + Docker + Vue.jsの環境構築を行なっている時に、bin/webpack-dev-serverコマンドを実行すると、「TypeError: Cannot destructure property compile of ‘undefined’ or ‘null’.」とエラーが出たのでその対処です。
実行環境はこちらです
|
1 2 3 4 |
ruby 2.5.1 rails 5.2.1 webpacker 4.0.0 Node: v8.11.4 |
エラー内容
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$ docker-compose run web bin/webpack-dev-server Starting myapp_db_1 ... done /myapp/node_modules/webpack-dev-server/bin/webpack-dev-server.js:363 throw err; ^ TypeError: Cannot destructure property `compile` of 'undefined' or 'null'. at addHooks (/myapp/node_modules/webpack-dev-server/lib/Server.js:103:49) at new Server (/myapp/node_modules/webpack-dev-server/lib/Server.js:116:5) at startDevServer (/myapp/node_modules/webpack-dev-server/bin/webpack-dev-server.js:355:14) at processOptions (/myapp/node_modules/webpack-dev-server/bin/webpack-dev-server.js:309:5) at Object.<anonymous> (/myapp/node_modules/webpack-dev-server/bin/webpack-dev-server.js:424:1) at Module._compile (module.js:652:30) at Object.Module._extensions..js (module.js:663:10) at Module.load (module.js:565:32) at tryModuleLoad (module.js:505:12) at Function.Module._load (module.js:497:3) at Function.Module.runMain (module.js:693:10) at startup (bootstrap_node.js:191:16) at bootstrap_node.js:612:3 |
解決方法
こちらのissuesにあがっていました。https://github.com/rails/webpacker/issues/1303
webpack-dev-serverのバージョンをダウングレードすればよいとのことで、yarn upgrade webpack-dev-server@^2.11.1を実行してみました。
|
1 |
$ docker-compose run web yarn upgrade webpack-dev-server@^2.11.1 |
再度、行うと…
|
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 29 30 31 32 33 34 35 36 37 |
$ docker-compose run web bin/webpack-dev-server Starting myapp_db_1 ... done Project is running at http://localhost:3035/ webpack output is served from /packs/ Content not from webpack is served from /myapp/public/packs 404s will fallback to /index.html Hash: c2b35394ebbb54e5a94d Version: webpack 3.12.0 Time: 6174ms Asset Size Chunks Chunk Names hello_vue-dcd31c56077c7dd6c92f.js 573 kB 0 [emitted] [big] hello_vue application-a7359c322d3b74bf8142.js 331 kB 1 [emitted] [big] application hello_vue-9cb5a7334a6577c3422968b9b9970b2f.css 138 bytes 0 [emitted] hello_vue hello_vue-dcd31c56077c7dd6c92f.js.map 673 kB 0 [emitted] hello_vue hello_vue-9cb5a7334a6577c3422968b9b9970b2f.css.map 561 bytes 0 [emitted] hello_vue application-a7359c322d3b74bf8142.js.map 384 kB 1 [emitted] application manifest.json 434 bytes [emitted] [2] (webpack)-dev-server/client?http://localhost:3035 7.93 kB {0} {1} [built] [3] ./node_modules/url/url.js 23.3 kB {0} {1} [built] [10] ./node_modules/strip-ansi/index.js 161 bytes {0} {1} [built] [12] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} {1} [built] [13] (webpack)-dev-server/client/socket.js 1.08 kB {0} {1} [built] [14] ./node_modules/sockjs-client/dist/sockjs.js 181 kB {0} {1} [built] [15] (webpack)-dev-server/client/overlay.js 3.67 kB {0} {1} [built] [20] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} {1} [built] [22] (webpack)/hot/emitter.js 77 bytes {0} {1} [built] [27] multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/application.js 40 bytes {1} [built] [28] ./app/javascript/packs/application.js 515 bytes {1} [built] [29] multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/hello_vue.js 40 bytes {0} [built] [30] ./app/javascript/packs/hello_vue.js 1.89 kB {0} [built] [31] ./node_modules/vue/dist/vue.runtime.esm.js 212 kB {0} [built] [35] ./app/javascript/app.vue 1.16 kB {0} [built] + 29 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] ./node_modules/css-loader/lib/css-base.js 2.26 kB {0} [built] webpack: Compiled successfully. |
これで無事、実行できました！！
