This page looks best with JavaScript enabled
⚠️

この記事は3年以上前に書かれました。内容が古くなっている可能性がありますのでご注意ください。

bin/webpack-dev-server でいろいろとエラーが出たので解決までのメモ

 ·   ·  ☕ 4 分で読めます
✏️

環境

  • Rails 5.2.5
  • Webpacker 5.2.1
  • rails/webpacker 5.4.3
  • webpack-cli 3.3.12

コマンド

bin/webpack-dev-serverを実行しようとすると、@webpack-cli/serveをインストールしろと言われた。

 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

$ bin/webpack-dev-server
The command moved into a separate package: @webpack-cli/serve
Would you like to install serve? (That will run yarn add -D @webpack-cli/serve) (yes/NO) : yes # 入力
yarn add v1.22.18
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > eslint-loader@4.0.2" has incorrect peer dependency "eslint@^6.0.0 || ^7.0.0".
warning " > eslint-loader@4.0.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning " > vue-loader@15.9.8" has unmet peer dependency "css-loader@*".
warning " > vue-loader@15.9.8" has unmet peer dependency "webpack@^3.0.0 || ^4.1.0 || ^5.0.0-0".
warning " > eslint-plugin-vue-libs@4.0.0" has incorrect peer dependency "eslint@^5.11.1 || ^6.0.0".
warning "eslint-plugin-vue-libs > eslint-plugin-vue@5.2.3" has incorrect peer dependency "eslint@^5.0.0".
warning "eslint-plugin-vue-libs > eslint-plugin-vue > vue-eslint-parser@5.0.0" has incorrect peer dependency "eslint@^5.0.0".
warning " > webpack-dev-server@4.7.3" has unmet peer dependency "webpack@^4.37.0 || ^5.0.0".
warning "webpack-dev-server > http-proxy-middleware@2.0.2" has unmet peer dependency "@types/express@^4.17.13".
warning "webpack-dev-server > webpack-dev-middleware@5.3.0" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning " > @webpack-cli/serve@1.6.1" has unmet peer dependency "webpack-cli@4.x.x".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ @webpack-cli/serve@1.6.1
info All dependencies
└─ @webpack-cli/serve@1.6.1
✨  Done in 1.37s.
TypeError: Class constructor ServeCommand cannot be invoked without 'new'
    at runWhenInstalled (/Users/k_end/private/development/hashlog/node_modules/webpack-cli/bin/utils/prompt-command.js:46:9)
    at /Users/k_end/private/development/hashlog/node_modules/webpack-cli/bin/utils/prompt-command.js:124:15
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

インストールして再度実行するも、Class constructor ServeCommand cannot be invoked without 'new'というエラーが出る。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

$ bin/webpack-dev-server
/Users/k_end/private/development/hashlog/node_modules/webpack-cli/bin/utils/prompt-command.js:46
        return func(...args);
               ^

TypeError: Class constructor ServeCommand cannot be invoked without 'new'
    at runWhenInstalled (/Users/k_end/private/development/hashlog/node_modules/webpack-cli/bin/utils/prompt-command.js:46:9)
    at promptForInstallation (/Users/k_end/private/development/hashlog/node_modules/webpack-cli/bin/utils/prompt-command.js:140:10)
    at /Users/k_end/private/development/hashlog/node_modules/webpack-cli/bin/cli.js:32:43
    at Object.<anonymous> (/Users/k_end/private/development/hashlog/node_modules/webpack-cli/bin/cli.js:366:3)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)

You should update webpack-cli to the 4.3.0
https://github.com/webpack/webpack-cli/issues/2272#issuecomment-752048270

依存によって入っていたwebpack-cli 3.3.12のみだったので、特に考えずに最新版をインストールすることにする。

 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
38

$ yarn add -D webpack-cli
yarn add v1.22.18
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > eslint-loader@4.0.2" has incorrect peer dependency "eslint@^6.0.0 || ^7.0.0".
warning " > eslint-loader@4.0.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning " > vue-loader@15.9.8" has unmet peer dependency "css-loader@*".
warning " > vue-loader@15.9.8" has unmet peer dependency "webpack@^3.0.0 || ^4.1.0 || ^5.0.0-0".
warning " > eslint-plugin-vue-libs@4.0.0" has incorrect peer dependency "eslint@^5.11.1 || ^6.0.0".
warning "eslint-plugin-vue-libs > eslint-plugin-vue@5.2.3" has incorrect peer dependency "eslint@^5.0.0".
warning "eslint-plugin-vue-libs > eslint-plugin-vue > vue-eslint-parser@5.0.0" has incorrect peer dependency "eslint@^5.0.0".
warning " > webpack-dev-server@4.7.3" has unmet peer dependency "webpack@^4.37.0 || ^5.0.0".
warning "webpack-dev-server > http-proxy-middleware@2.0.2" has unmet peer dependency "@types/express@^4.17.13".
warning "webpack-dev-server > webpack-dev-middleware@5.3.0" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "webpack-cli > @webpack-cli/configtest@1.1.1" has unmet peer dependency "webpack@4.x.x || 5.x.x".
warning " > webpack-cli@4.9.2" has unmet peer dependency "webpack@4.x.x || 5.x.x".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 14 new dependencies.
info Direct dependencies
└─ webpack-cli@4.9.2
info All dependencies
├─ @discoveryjs/json-ext@0.5.7
├─ @webpack-cli/configtest@1.1.1
├─ @webpack-cli/info@1.4.1
├─ clone-deep@4.0.1
├─ envinfo@7.8.1
├─ fastest-levenshtein@1.0.12
├─ import-local@3.1.0
├─ interpret@2.2.0
├─ rechoir@0.7.1
├─ resolve-cwd@3.0.0
├─ shallow-clone@3.0.1
├─ webpack-cli@4.9.2
├─ webpack-merge@5.8.0
└─ wildcard@2.0.0
✨  Done in 2.61s.

1
2
3
4
5
6
7

$ yarn webpack-cli -v
yarn run v1.22.18
$ /Users/k_end/private/development/hashlog/node_modules/.bin/webpack-cli -v
webpack: 4.46.0
webpack-cli: 4.9.2
webpack-dev-server 4.7.3
✨  Done in 0.43s.

そして再度実行。

 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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

$ bin/webpack-dev-server
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.11.17:8080/
<i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/Users/k_end/private/development/hashlog/public' directory
Hash: f57283ab232989066ec8
Version: webpack 4.46.0
Time: 206ms
Built at: 2022/03/28 23:17:23
        Asset      Size  Chunks             Chunk Names
manifest.json  66 bytes          [emitted]
Entrypoint application =
Entrypoint router =
[0] multi (webpack)-dev-server/client?protocol=ws%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info&reconnect=10 (webpack)/hot/dev-server.js ./app/javascript/packs/application.js 52 bytes {application} [built]
[1] multi (webpack)-dev-server/client?protocol=ws%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info&reconnect=10 (webpack)/hot/dev-server.js ./app/javascript/packs/router.js 52 bytes {router} [built]
[./app/javascript/packs/application.js] 503 bytes {application} [built] [failed] [1 error]
[./app/javascript/packs/router.js] 503 bytes {router} [built] [failed] [1 error]
[./node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info&reconnect=10] (webpack)-dev-server/client?protocol=ws%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info&reconnect=10 503 bytes {application} {router} [built] [failed] [1 error]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 503 bytes {application} {router} [built] [failed] [1 error]

ERROR in ./app/javascript/packs/application.js
Module build failed (from ./node_modules/eslint-loader/dist/cjs.js):
TypeError: Cannot read properties of undefined (reading 'getFormatter')
    at getFormatter (/Users/k_end/private/development/hashlog/node_modules/eslint-loader/dist/getOptions.js:52:20)
    at getOptions (/Users/k_end/private/development/hashlog/node_modules/eslint-loader/dist/getOptions.js:30:23)
    at Object.loader (/Users/k_end/private/development/hashlog/node_modules/eslint-loader/dist/index.js:17:43)

ERROR in (webpack)-dev-server/client?protocol=ws%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info&reconnect=10
Module build failed (from ./node_modules/eslint-loader/dist/cjs.js):
TypeError: Cannot read properties of undefined (reading 'getFormatter')
    at getFormatter (/Users/k_end/private/development/hashlog/node_modules/eslint-loader/dist/getOptions.js:52:20)
    at getOptions (/Users/k_end/private/development/hashlog/node_modules/eslint-loader/dist/getOptions.js:30:23)
    at Object.loader (/Users/k_end/private/development/hashlog/node_modules/eslint-loader/dist/index.js:17:43)
 @ multi (webpack)-dev-server/client?protocol=ws%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info&reconnect=10 (webpack)/hot/dev-server.js ./app/javascript/packs/application.js application[0]

ERROR in ./app/javascript/packs/router.js
Module build failed (from ./node_modules/eslint-loader/dist/cjs.js):
TypeError: Cannot read properties of undefined (reading 'getFormatter')
    at getFormatter (/Users/k_end/private/development/hashlog/node_modules/eslint-loader/dist/getOptions.js:52:20)
    at getOptions (/Users/k_end/private/development/hashlog/node_modules/eslint-loader/dist/getOptions.js:30:23)
    at Object.loader (/Users/k_end/private/development/hashlog/node_modules/eslint-loader/dist/index.js:17:43)

ERROR in (webpack)/hot/dev-server.js
Module build failed (from ./node_modules/eslint-loader/dist/cjs.js):
TypeError: Cannot read properties of undefined (reading 'getFormatter')
    at getFormatter (/Users/k_end/private/development/hashlog/node_modules/eslint-loader/dist/getOptions.js:52:20)
    at getOptions (/Users/k_end/private/development/hashlog/node_modules/eslint-loader/dist/getOptions.js:30:23)
    at Object.loader (/Users/k_end/private/development/hashlog/node_modules/eslint-loader/dist/index.js:17:43)
 @ multi (webpack)-dev-server/client?protocol=ws%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info&reconnect=10 (webpack)/hot/dev-server.js ./app/javascript/packs/application.js application[1]

ERROR in chunk application [entry]
js/[name]-[contenthash].js
Cannot use [chunkhash] or [contenthash] for chunk in 'js/[name]-[contenthash].js' (use [hash] instead)

ERROR in chunk router [entry]
js/[name]-[contenthash].js
Cannot use [chunkhash] or [contenthash] for chunk in 'js/[name]-[contenthash].js' (use [hash] instead)

表示されているエラーは多いが、結局のところ2種類しかない。

Cannot read properties of undefined (reading 'getFormatter')

Cannot use [chunkhash] or [contenthash] for chunk in 'js/[name]-[contenthash].js' (use [hash] instead)

前者から解消する。
eslint-loaderは非推奨になったらしいので、eslint-webpack-pluginに乗り換える。

 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
38
39
40
41
42
43
44

$ yarn remove eslint-loader
yarn remove v1.22.18
[1/2] 🗑  Removing module eslint-loader...
[2/2] 🔨  Regenerating lockfile and installing missing dependencies...
warning " > vue-loader@15.9.8" has unmet peer dependency "css-loader@*".
warning " > vue-loader@15.9.8" has unmet peer dependency "webpack@^3.0.0 || ^4.1.0 || ^5.0.0-0".
warning " > eslint-plugin-vue-libs@4.0.0" has incorrect peer dependency "eslint@^5.11.1 || ^6.0.0".
warning "eslint-plugin-vue-libs > eslint-plugin-vue@5.2.3" has incorrect peer dependency "eslint@^5.0.0".
warning "eslint-plugin-vue-libs > eslint-plugin-vue > vue-eslint-parser@5.0.0" has incorrect peer dependency "eslint@^5.0.0".
warning " > webpack-cli@4.9.2" has unmet peer dependency "webpack@4.x.x || 5.x.x".
warning "webpack-cli > @webpack-cli/configtest@1.1.1" has unmet peer dependency "webpack@4.x.x || 5.x.x".
warning " > webpack-dev-server@4.7.3" has unmet peer dependency "webpack@^4.37.0 || ^5.0.0".
warning "webpack-dev-server > http-proxy-middleware@2.0.2" has unmet peer dependency "@types/express@^4.17.13".
warning "webpack-dev-server > webpack-dev-middleware@5.3.0" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
success Uninstalled packages.
✨  Done in 3.52s.
d
$ yarn add eslint-webpack-plugin
yarn add v1.22.18
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > vue-loader@15.9.8" has unmet peer dependency "css-loader@*".
warning " > vue-loader@15.9.8" has unmet peer dependency "webpack@^3.0.0 || ^4.1.0 || ^5.0.0-0".
warning " > eslint-plugin-vue-libs@4.0.0" has incorrect peer dependency "eslint@^5.11.1 || ^6.0.0".
warning "eslint-plugin-vue-libs > eslint-plugin-vue@5.2.3" has incorrect peer dependency "eslint@^5.0.0".
warning "eslint-plugin-vue-libs > eslint-plugin-vue > vue-eslint-parser@5.0.0" has incorrect peer dependency "eslint@^5.0.0".
warning " > webpack-cli@4.9.2" has unmet peer dependency "webpack@4.x.x || 5.x.x".
warning "webpack-cli > @webpack-cli/configtest@1.1.1" has unmet peer dependency "webpack@4.x.x || 5.x.x".
warning " > webpack-dev-server@4.7.3" has unmet peer dependency "webpack@^4.37.0 || ^5.0.0".
warning "webpack-dev-server > http-proxy-middleware@2.0.2" has unmet peer dependency "@types/express@^4.17.13".
warning "webpack-dev-server > webpack-dev-middleware@5.3.0" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning " > eslint-webpack-plugin@3.1.1" has unmet peer dependency "webpack@^5.0.0".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 4 new dependencies.
info Direct dependencies
└─ eslint-webpack-plugin@3.1.1
info All dependencies
├─ @types/eslint@7.29.0
├─ @types/estree@0.0.51
├─ eslint-webpack-plugin@3.1.1
└─ jest-worker@27.5.1
✨  Done in 1.40s.

config/webpack/loaders/eslint.jsでeslint-loaderを使うよう設定をしていたので、その記述も削除した。

では、引き続き後者のエラーの解決をする。
ERROR in chunk application [entry] js/[name]-[contenthash].js Cannot use [chunkhash] or [contenthash] for chunk in .... | GoRailsを参考に以下のように記述を追加した。

1
2
3
4
5
6
7

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

const environment = require('./environment')
const config = environment.toWebpackConfig();

config.output.filename = "js/[name]-[hash].js"
module.exports = config

これでbin/webpack-dev-serverは成功し、ビルドはできたものの、画面は真っ白。
コンソールに以下のエラーが出る。

lazy-result.js:841 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
    at Module.<anonymous> (lazy-result.js:841:1)
    at Module../node_modules/sanitize-html/node_modules/postcss/lib/lazy-result.js (lazy-result.js:844:1)
    at __webpack_require__ (bootstrap:19:1)
    at Object../node_modules/sanitize-html/node_modules/postcss/lib/postcss.js (postcss.js:7:1)
    at __webpack_require__ (bootstrap:19:1)
    at Object../node_modules/sanitize-html/index.js (index.js:18:1)
    at __webpack_require__ (bootstrap:19:1)
    at Module../app/javascript/packs/application.js (application.js:1:1)
    at __webpack_require__ (bootstrap:19:1)
    at bootstrap:83:1

Webpack 4 で Cannot assign to read only property &rsquo;exports&rsquo; of object エラー - かもメモ
Webpacker 3.x -&gt; 5.x-&gt; jsbundling-rails - Qiitaを参考に
を参考に、node_modulesを読み込まないようにした。

1
2
3
4
5
6
7
8

const { environment } = require("@rails/webpacker")
const { VueLoaderPlugin } = require("vue-loader")
const vue = require("./loaders/vue")

environment.plugins.prepend("VueLoaderPlugin", new VueLoaderPlugin())
environment.loaders.append("vue", vue)
environment.loaders.delete('nodeModules') // この行を追加
module.exports = environment

これでようやくローカルでJSを読み込むことができた。

Share on
END
END
@aiandrox
 

関連記事

目次