トップ > webpackerって何〜(後編）

webpackerって何〜(後編）

Webpacker手強かった、、

でも倒せた！成長！ここ二日間すごい足踏みしたけど、

また明日からVueの学習に戻れるから気持ち新たに頑張るぞいっ＃ぞい

webpackの概要

webpackとはウェブコンテンツを構成するファイルをまとめてしまうツールです。一番多い使い方は、複数のJavaScriptを1つにまとめることでしょう。複数のJavaScriptをまとめるのは、いろんな利点があります。

(参考文献: https://ics.media/entry/12140/)

webpackerはwebpackをrails仕様にしたもの。

モジュールが使える

複数のJSファイルを1つにまとめるだけなら他のツールでもできますが、webpackの場合は標準仕様のES Modulesが使えたり、node_modulesのモジュールを結合できるといったメリットがあります。

標準のES Modulesを使うと変数の競合やグローバル汚染を防げるので開発時の安全性が高まります。さらには、コードの可読性が上がり、開発作業の分担やテストがしやすくなり、再利用性や保守性があがります。

(参考文献: https://ics.media/entry/12140/)

 

 

エラーとの戦い(終結 \^^/)

結論

  • yarn.lockとpackage.jsonのバージョンは同じにした方がいい。
  • css-loaderやsass-loaderなどのloaderとwebpackのバージョンの互換性が正しいかyarn checkを使って確認した方がいい。
  • エラー文をコピペしてググる前に、エラー文をよく見て、どこが真因なのか検討をつけておくと、エラー解決に役立つ記事を見つけやすい。

所感

謎解き感を楽しめてよかった！今後はこまめにデプロイをしていく。

エラーログ

The engine "node" is incompatible with this module. Expected version "^12.22.0 || ^14.17.0 || >=16.0.0". Got "12.16.2"

12.22.0か14.17.0か16.0.0を使って欲しい。現在のバージョンは12.16.2になってる

remote: -----> Installing node-v12.16.2-linux-x64
remote: -----> Installing yarn-v1.22.4
remote: -----> Detecting rake tasks
remote: -----> Preparing app for Rails asset pipeline
remote:        Running: rake assets:precompile
remote:        yarn install v1.22.4
remote:        [1/4] Resolving packages...
remote:        [2/4] Fetching packages...
remote:        info fsevents@2.3.2: The platform "linux" is incompatible with this module.
remote:        info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        info fsevents@1.2.13: The platform "linux" is incompatible with this module.
remote:        info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        error eslint@8.0.0: 

remote:        error Found incompatible module.
remote:        info Visit <https://yarnpkg.com/en/docs/cli/install> for documentation about this command.
remote:        Compiling...
remote:        Compilation failed:
remote:        yarn run v1.22.4
remote:        info Visit <https://yarnpkg.com/en/docs/cli/run> for documentation about this command.
remote:        
remote:        
remote:        error Command "webpack" not found.
remote:        
remote: 
remote:  !
remote:  !     Precompiling assets failed.
remote:  !
remote:  !     Push rejected, failed to compile Ruby app.
remote: 
remote:  !     Push failed

デプロイ時のエラーをnode version変更で対処v14.17.0⇨v12.16.2

この記事を参考にして下記コマンドを実行したところ、先のエラーは解消できた。

heroku buildpacks:add --index 1 heroku/nodejs

次に引っかかったエラーは以下の通り。

Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.


remote:        Compilation failed:
remote:        [webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
remote:         - configuration.node should be one of these:
remote:           false | object { __dirname?, __filename?, global? }
remote:           -> Include polyfills or mocks for various node stuff.
remote:           Details:
remote:            * configuration.node has an unknown property 'dgram'. These properties are valid:
remote:              object { __dirname?, __filename?, global? }
remote:              -> Options object for node compatibility features.
remote:            * configuration.node has an unknown property 'fs'. These properties are valid:
remote:              object { __dirname?, __filename?, global? }
remote:              -> Options object for node compatibility features.
remote:            * configuration.node has an unknown property 'net'. These properties are valid:
remote:              object { __dirname?, __filename?, global? }
remote:              -> Options object for node compatibility features.
remote:            * configuration.node has an unknown property 'tls'. These properties are valid:
remote:              object { __dirname?, __filename?, global? }
remote:              -> Options object for node compatibility features.
remote:            * configuration.node has an unknown property 'child_process'. These properties are valid:
remote:              object { __dirname?, __filename?, global? }
remote:              -> Options object for node compatibility features.
remote:        
remote: 
remote:  !
remote:  !     Precompiling assets failed.
remote:  !
remote:  !     Push rejected, failed to compile Ruby app.
remote: 
remote:  !     Push failed

この記事を参考にして下記コードをconfig/webpack/development.jsに追記したら解決した。

#config/webpack/development.js

const environment = require('./environment')
const customConfig = {
    resolve: {
      fallback: {
        dgram: false,
        fs: false,
        net: false,
        tls: false,
        child_process: false
      }
    }
  };
  
  environment.config.delete('node.dgram')
  environment.config.delete('node.fs')
  environment.config.delete('node.net')
  environment.config.delete('node.tls')
  environment.config.delete('node.child_process')
  
  environment.config.merge(customConfig);

今度は下記エラーに当たる。

ERROR in application. Module not found: Error: Can't resolve 'babel-loader' in '/Users/subaru/Portfolio/Preliquo'


ERROR in application
Module not found: Error: Can't resolve 'babel-loader' in '/Users/subaru/Portfolio/Preliquo'
resolve 'babel-loader' in '/Users/subaru/Portfolio/Preliquo'
  Parsed request is a module
  using description file: /Users/subaru/Portfolio/Preliquo/package.json (relative path: .)
    resolve as module
      looking for modules in /Users/subaru/Portfolio/Preliquo/node_modules
        single file module
          using description file: /Users/subaru/Portfolio/Preliquo/package.json (relative path: ./node_modules/babel-loader)
            no extension
              /Users/subaru/Portfolio/Preliquo/node_modules/babel-loader doesn't exist
            .js
          
ERROR in hello_vue
Module not found: Error: Can't resolve 'babel-loader' in '/Users/subaru/Portfolio/Preliquo'
resolve 'babel-loader' in '/Users/subaru/Portfolio/Preliquo'
  Parsed request is a module
  using description file: /Users/subaru/Portfolio/Preliquo/package.json (relative path: .)
    resolve as module
      looking for modules in /Users/subaru/Portfolio/Preliquo/node_modules
        single file module
         
webpack 5.58.2 compiled with 2 errors in 159 ms

この記事を参考にして下記手順を順を追って実行した。

  1. node_modulesを削除
  2. yarn addを実行
  3. yarn add babel-loader
  4. yarn add style-loader
  5. yarn add css-loader
  6. yarn add file-loader

その後bin/webpackを実行したところエラーが消えた。

bin/webpack
(node:79201) [DEP_WEBPACK_MAIN_TEMPLATE_RENDER_MANIFEST] DeprecationWarning: MainTemplate.hooks.renderManifest is deprecated (use Compilation.hooks.renderManifest instead)
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:79201) [DEP_WEBPACK_CHUNK_TEMPLATE_RENDER_MANIFEST] DeprecationWarning: ChunkTemplate.hooks.renderManifest is deprecated (use Compilation.hooks.renderManifest instead)
(node:79201) [DEP_WEBPACK_MAIN_TEMPLATE_HASH_FOR_CHUNK] DeprecationWarning: MainTemplate.hooks.hashForChunk is deprecated (use JavascriptModulesPlugin.getCompilationHooks().chunkHash instead)
(node:79201) [DEP_WEBPACK_COMPILATION_NORMAL_MODULE_LOADER_HOOK] DeprecationWarning: Compilation.hooks.normalModuleLoader was moved to NormalModule.getCompilationHooks(compilation).loader
(node:79201) [DEP_WEBPACK_CHUNK_MODULES_ITERABLE] DeprecationWarning: Chunk.modulesIterable: Use new ChunkGraph API
(node:79201) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
assets by status 35 KiB [cached] 2 assets
assets by chunk 2.88 MiB (auxiliary name: hello_vue)
  assets by status 395 bytes [emitted]
    asset 7c3f6e0fddc471ce8015.woff2?v=6.2.95 100 bytes [emitted] [immutable] [from: node_modules/@mdi/font/fonts/materialdesignicons-webfont.woff2?v=6.2.95] (auxiliary name: hello_vue)
    asset d21ae6085a4cb737be2c.woff?v=6.2.95 99 bytes [emitted] [immutable] [from: node_modules/@mdi/font/fonts/materialdesignicons-webfont.woff?v=6.2.95] (auxiliary name: hello_vue)
    asset 31c7fca795826a24c2fb.ttf?v=6.2.95 98 bytes [emitted] [immutable] [from: node_modules/@mdi/font/fonts/materialdesignicons-webfont.ttf?v=6.2.95] (auxiliary name: hello_vue)
    asset 9c0cf49af7dc5d9ad039.eot 98 bytes [emitted] [immutable] [from: node_modules/@mdi/font/fonts/materialdesignicons-webfont.eot] (auxiliary name: hello_vue)
  assets by status 2.88 MiB [compared for emit]
    asset media/fonts/materialdesignicons-webfont-5126326b.eot 1.04 MiB [compared for emit] (auxiliary name: hello_vue)
    asset media/fonts/materialdesignicons-webfont-aa2aa539.ttf 1.04 MiB [compared for emit] (auxiliary name: hello_vue)
    asset media/fonts/materialdesignicons-webfont-ca644a1a.woff 482 KiB [compared for emit] (auxiliary name: hello_vue)
    asset media/fonts/materialdesignicons-webfont-9d0c9ec4.woff2 336 KiB [compared for emit] (auxiliary name: hello_vue)
asset js/hello_vue-98d9baf8b3d9ef940414.js 4.15 MiB [emitted] [immutable] (name: hello_vue) 1 related asset
asset manifest.json 857 bytes [emitted]
runtime modules 2.86 KiB 15 modules
javascript modules 4.07 MiB
  modules by path ./node_modules/ 4.04 MiB 45 modules
  modules by path ./app/frontend/ 38.9 KiB 28 modules
asset modules 355 bytes (javascript) 493 bytes (asset)
  modules by path ./node_modules/@mdi/font/fonts/*.eot 84 bytes (javascript) 196 bytes (asset)
    ./node_modules/@mdi/font/fonts/materialdesignicons-webfont.eot?v=6.2.95 42 bytes (javascript) 98 bytes (asset) [built] [code generated]
    ./node_modules/@mdi/font/fonts/materialdesignicons-webfont.eot 42 bytes (javascript) 98 bytes (asset) [built] [code generated]
  data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGElEQVQYlWNgYGCQwoKxgqGgcJA5h3yFAAs8BRWVSwooAAAAAElFTkSuQmCC 145 bytes [built] [code generated]
  ./node_modules/@mdi/font/fonts/materialdesignicons-webfont.woff2?v=6.2.95 42 bytes (javascript) 100 bytes (asset) [built] [code generated]
  ./node_modules/@mdi/font/fonts/materialdesignicons-webfont.woff?v=6.2.95 42 bytes (javascript) 99 bytes (asset) [built] [code generated]
  ./node_modules/@mdi/font/fonts/materialdesignicons-webfont.ttf?v=6.2.95 42 bytes (javascript) 98 bytes (asset) [built] [code generated]
./node_modules/vee-validate/dist/locale/ja.json 1.07 KiB [built] [code generated]
webpack 5.58.2 compiled successfully in 6028 ms

今度は下記エラーが生じた。

TypeError: Cannot read property 'tap' of undefined

こちらの記事を参考にして下記手順を実行。

  1. package.jsonからwebpackを削除
  2. yarn.lockを削除
  3. node_modulesを削除
  4. yarn installを実行

さらに下記エラーが生じたので、こちらの記事を参考にしてファイルを編集。またしても下記エラーに直面。

     [5/5] Building fresh packages...
remote:        Done in 38.60s.
remote:        Compiling...
remote:        Compilation failed:
remote:        [webpack-cli] Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
remote:         - configuration.resolve has an unknown property 'fallback'. These properties are valid:
remote:           object { alias?, aliasFields?, cachePredicate?, cacheWithContext?, concord?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, ignoreRootsErrors?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, preferAbsolute?, resolver?, roots?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }
remote:           -> Options for the resolver

resolveにfallbackというプロパティは含まれていません。

こちらの記事には確かにfallbackに関する説明があることから、fallbackというプロパティは存在すると考えた。

よくよくみてみると、fallbackはwebpack5から導入されているプロパティだと気づいた。webpacknのバージョンを下記の通り5以上に変更。

 "dependencies": {
..omit..
    "webpack": "5.54.0",
    "webpack-cli": "4.8.0"
..omit..
}

今度は下記注意書きが発生。おそらくcompileには成功したみたい。


WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  hello_vue (2.58 MiB)
      js/hello_vue-bf9a6870745ffdd2935a.js

WARNING in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit <https://webpack.js.org/guides/code-splitting/>

それでは、デプロイしてみる。

Subarunookpuro3:Preliquo subaru$ git push heroku main:main
<--omit-->
Discovering process types
remote:        Procfile declares types     -> rails, webpack
remote:        Default types for buildpack -> console, rake, web
remote: 
remote: -----> Compressing...
remote:        Done: 140.8M
remote: -----> Launching...
remote:        Released v22
remote:        <https://preliquo.herokuapp.com/> deployed to Heroku
remote: 
remote: Verifying deploy... done.
To <https://git.heroku.com/preliquo.git>
   e7fae38..d86d40e  main -> main

今の感情

\ (^^) /\ (^^) /\ (^^) /\ (^^) /\ (^^) /\ (^^) /\ (^^) /\ (^^) /\ (^^) /\ (^^) /\ (^^) /\ (^^) /\ (^^) /