[fix] node -v 変更 #36

subaru-hello · 2021-10-17T23:19:27Z

デプロイ時のエラーをnode version変更で対処
v14.17.0⇨v12.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 [email protected]: The platform "linux" is incompatible with this module.
remote:        info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        info [email protected]: The platform "linux" is incompatible with this module.
remote:        info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        error [email protected]: The engine "node" is incompatible with this module. Expected version "^12.22.0 || ^14.17.0 || >=16.0.0". Got "12.16.2"
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
remote:  !
remote:  ! ## Warning - The same version of this code has already been built: 10e66777b2d5ddb2e7e54e647a48fe60acb73c84
remote:  !
remote:  ! We have detected that you have triggered a build from source code with version 10e66777b2d5ddb2e7e54e647a48fe60acb73c84
remote:  ! at least twice. One common cause of this behavior is attempting to deploy code from a different branch.
remote:  !
remote:  ! If you are developing on a branch and deploying via git you must run:
remote:  !
remote:  !     git push heroku <branchname>:main
remote:  !
remote:  ! This article goes into details on the behavior:
remote:  !   https://devcenter.heroku.com/articles/duplicate-build-version
remote: 
remote: Verifying deploy...
remote: 
remote: !       Push rejected to preliquo.
remote: 
To https://git.heroku.com/preliquo.git
 ! [remote rejected] main -> main (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/preliquo.git'

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

heroku buildpacks:add --index 1 heroku/nodejs

だが、10/18 8:54現在のエラーログはこのようになっている

 Bundle completed (4.90s)
remote:        Cleaning up the bundler cache.
remote: -----> Detecting rake tasks
remote: -----> Preparing app for Rails asset pipeline
remote:        Running: rake assets:precompile
remote:        yarn install v1.22.17
remote:        [1/5] Validating package.json...
remote:        [2/5] Resolving packages...
remote:        [3/5] Fetching packages...
remote:        [4/5] Linking dependencies...
remote:        warning " > [email protected]" has unmet peer dependency "css-loader@*".
remote:        [5/5] Building fresh packages...
remote:        Done in 44.58s.
remote:        Compiling...
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
remote: Verifying deploy...
remote: 
remote: !       Push rejected to preliquo.
remote: 
To https://git.heroku.com/preliquo.git

subaru-hello · 2021-10-17T23:55:54Z

次はこの問題に引っかかった。

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

subaru-hello · 2021-10-18T21:46:42Z

この記事を参考にして下記コードを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);

subaru-hello · 2021-10-18T21:47:31Z

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

(node:70762) [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:70762) [DEP_WEBPACK_CHUNK_TEMPLATE_RENDER_MANIFEST] DeprecationWarning: ChunkTemplate.hooks.renderManifest is deprecated (use Compilation.hooks.renderManifest instead)
(node:70762) [DEP_WEBPACK_MAIN_TEMPLATE_HASH_FOR_CHUNK] DeprecationWarning: MainTemplate.hooks.hashForChunk is deprecated (use JavascriptModulesPlugin.getCompilationHooks().chunkHash instead)
(node:70762) [DEP_WEBPACK_COMPILATION_NORMAL_MODULE_LOADER_HOOK] DeprecationWarning: Compilation.hooks.normalModuleLoader was moved to NormalModule.getCompilationHooks(compilation).loader
(node:70762) [DEP_WEBPACK_CHUNK_MODULES_ITERABLE] DeprecationWarning: Chunk.modulesIterable: Use new ChunkGraph API
(node:70762) [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_*.
asset manifest.json 367 bytes [emitted]
asset js/application-496c2d03fd5ad488a14c.js 189 bytes [emitted] [immutable] (name: application)
asset js/hello_vue-496c2d03fd5ad488a14c.js 189 bytes [emitted] [immutable] (name: hello_vue)
runtime modules 0 bytes 2 modules

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
              /Users/subaru/Portfolio/Preliquo/node_modules/babel-loader.js doesn't exist
        /Users/subaru/Portfolio/Preliquo/node_modules/babel-loader doesn't exist
      /Users/subaru/Portfolio/node_modules doesn't exist or is not a directory
      looking for modules in /Users/subaru/node_modules
        single file module
          No description file found in /Users/subaru/node_modules or above
          no extension
            /Users/subaru/node_modules/babel-loader doesn't exist
          .js
            /Users/subaru/node_modules/babel-loader.js doesn't exist
        /Users/subaru/node_modules/babel-loader doesn't exist
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory

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
          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
              /Users/subaru/Portfolio/Preliquo/node_modules/babel-loader.js doesn't exist
        /Users/subaru/Portfolio/Preliquo/node_modules/babel-loader doesn't exist
      /Users/subaru/Portfolio/node_modules doesn't exist or is not a directory
      looking for modules in /Users/subaru/node_modules
        single file module
          No description file found in /Users/subaru/node_modules or above
          no extension
            /Users/subaru/node_modules/babel-loader doesn't exist
          .js
            /Users/subaru/node_modules/babel-loader.js doesn't exist
        /Users/subaru/node_modules/babel-loader doesn't exist
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory

webpack 5.58.2 compiled with 2 errors in 159 ms

subaru-hello · 2021-10-18T22:04:10Z

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

node_modulesを削除
yarn addを実行
yarn add babel-loader
yarn add style-loader
yarn add css-loader
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

subaru-hello · 2021-10-19T07:59:36Z

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

     TypeError: Cannot read property 'tap' of undefined

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

package.jsonからwebpackを削除
yarn.lockを削除
node_modulesを削除
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/

こちらの記事を参考にして対処を試みたい。

こちらの記事を参考にして、現在のyarnのver.と互換性のあるファイルをインストール。

config/environment.jsに下記記述を追加。

  module:{
      rules:[
        {
          test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
          use: 'file-loader?name=assets/[name].[hash].[ext]'
        }
      ]
    }

ブランチを[ e7fae3 ]まで戻して再度開発環境でwebpackerの修理に当たった。
おそらく原因はwebpackerとcss-loader,sass-loaderの互換性が合わなかったことだった。
[ d86d40 ]で対応。
デプロイ完了。

[fix] node -v 変更

d1e5c7d

subaru-hello merged commit 3399db4 into main Oct 17, 2021

subaru-hello deleted the change_node_ver branch October 25, 2021 13:42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[fix] node -v 変更 #36

[fix] node -v 変更 #36

subaru-hello commented Oct 17, 2021 •

edited

Loading

subaru-hello commented Oct 17, 2021

subaru-hello commented Oct 18, 2021

subaru-hello commented Oct 18, 2021

subaru-hello commented Oct 18, 2021

subaru-hello commented Oct 19, 2021 •

edited

Loading

[fix] node -v 変更 #36

[fix] node -v 変更 #36

Conversation

subaru-hello commented Oct 17, 2021 • edited Loading

subaru-hello commented Oct 17, 2021

subaru-hello commented Oct 18, 2021

subaru-hello commented Oct 18, 2021

subaru-hello commented Oct 18, 2021

subaru-hello commented Oct 19, 2021 • edited Loading

subaru-hello commented Oct 17, 2021 •

edited

Loading

subaru-hello commented Oct 19, 2021 •

edited

Loading