環境
- 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 ’exports’ of object エラー - かもメモ
Webpacker 3.x -> 5.x-> 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を読み込むことができた。
