Skip to content

Instantly share code, notes, and snippets.

@lithrel

lithrel/log.org Secret

Created January 9, 2024 18:36
Show Gist options
  • Save lithrel/c1001e68d907b293f8b239dbf16f6fbe to your computer and use it in GitHub Desktop.
Save lithrel/c1001e68d907b293f8b239dbf16f6fbe to your computer and use it in GitHub Desktop.
Download ZIP
webpack 5 update log
Raw
log.org

Update Webpack 5

Update webpack to 5.89

  • update ok
  • error on npm start : 
    (node:64508) [DEP_WEBPACK_WATCH_WITHOUT_CALLBACK] DeprecationWarning: A 'callback' argument needs to be provided to the 'webpack(options, callback)' function when the 'watch' option is set. There is no way to handle the 'watch' option without a callback.
(Use `node --trace-deprecation ...` to show where the warning was created)
Live Reload listening on port 35729

/home/flhz/Batcave/greenpeace/planet4-develop-default/planet4/themes/planet4-master-theme/node_modules/@wordpress/dependency-extraction-webpack-plugin/node_modules/webpack/lib/ExternalModuleFactoryPlugin.js:17
                normalModuleFactory.hooks.factory.tap(
                                                  ^

TypeError: Cannot read properties of undefined (reading 'tap')
    at ExternalModuleFactoryPlugin.apply (/home/flhz/Batcave/greenpeace/planet4-develop-default/planet4/themes/planet4-master-theme/node_modules/@wordpress/dependency-extraction-webpack-plugin/node_modules/webpack/lib/ExternalModuleFactoryPlugin.js:17:37)
    at /home/flhz/Batcave/greenpeace/planet4-develop-default/planet4/themes/planet4-master-theme/node_modules/@wordpress/dependency-extraction-webpack-plugin/node_modules/webpack/lib/ExternalsPlugin.js:16:63
    at Hook.eval [as call] (eval at create (/home/flhz/Batcave/greenpeace/planet4-develop-default/planet4/themes/planet4-master-theme/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (/home/flhz/Batcave/greenpeace/planet4-develop-default/planet4/themes/planet4-master-theme/node_modules/tapable/lib/Hook.js:14:14)
    at /home/flhz/Batcave/greenpeace/planet4-develop-default/planet4/themes/planet4-master-theme/node_modules/webpack/lib/Compiler.js:1168:23
    at Hook.eval [as callAsync] (eval at create (/home/flhz/Batcave/greenpeace/planet4-develop-default/planet4/themes/planet4-master-theme/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/flhz/Batcave/greenpeace/planet4-develop-default/planet4/themes/planet4-master-theme/node_modules/tapable/lib/Hook.js:18:14)
    at Compiler.compile (/home/flhz/Batcave/greenpeace/planet4-develop-default/planet4/themes/planet4-master-theme/node_modules/webpack/lib/Compiler.js:1165:28)
    at /home/flhz/Batcave/greenpeace/planet4-develop-default/planet4/themes/planet4-master-theme/node_modules/webpack/lib/Watching.js:218:19
    at eval (eval at create (/home/flhz/Batcave/greenpeace/planet4-develop-default/planet4/themes/planet4-master-theme/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:12:1)
    at cllbck (/home/flhz/Batcave/greenpeace/planet4-develop-default/planet4/themes/planet4-master-theme/node_modules/remove-files-webpack-plugin/src/plugin.js:569:17)
    at method (/home/flhz/Batcave/greenpeace/planet4-develop-default/planet4/themes/planet4-master-theme/node_modules/remove-files-webpack-plugin/src/plugin.js:594:13)
    at _next0 (eval at create (/home/flhz/Batcave/greenpeace/planet4-develop-default/planet4/themes/planet4-master-theme/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:8:1)
    at eval (eval at create (/home/flhz/Batcave/greenpeace/planet4-develop-default/planet4/themes/planet4-master-theme/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:21:1)
    at LiveReloadPlugin.serverStarted (/home/flhz/Batcave/greenpeace/planet4-develop-default/planet4/themes/planet4-master-theme/node_modules/webpack-livereload-plugin/index.js:89:9)
    at Object.onceWrapper (node:events:627:28)
    at Server.emit (node:events:513:28)
    at emitListeningNT (node:net:1497:10)
    at processTicksAndRejections (node:internal/process/task_queues:82:21)

Looking for source of error

❯ npm list @wordpress/dependency-extraction-webpack-plugin                                                          ─╯
planet4-master-theme@ /home/flhz/Batcave/greenpeace/planet4-develop-default/planet4/themes/planet4-master-theme
└─┬ @wordpress/scripts@3.3.0
  └── @wordpress/dependency-extraction-webpack-plugin@1.2.0

Update @wordpress/scripts to 26.19.0

  • update ok
  • error on npm start 
    [webpack-cli] Failed to load '/home/flhz/Batcave/greenpeace/planet4-develop-default/planet4/themes/planet4-master-theme/webpack.config.js' config
[webpack-cli] Error: Cannot find module 'ajv/dist/compile/codegen'

Fix ajv version 8.7.1

  • version used by gutenberg
  • update ok
  • error on npm start 
    ERROR in ./assets/src/scss/bootstrap-build.scss (css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[9].use[1]!./node_modules/postcss-loader/src/index.js??ruleSet[1].rules[9].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[9].use[3]!./assets/src/scss/bootstrap-build.scss)
Module.updateHash: There was no ChunkGraph assigned to the Module for backward-compat (Use the new API)
 @ ./assets/src/scss/bootstrap-build.scss.webpack[javascript/auto]!=!./node_modules/@wordpress/scripts/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/@wordpress/scripts/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/@wordpress/scripts/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[9].use[1]!./node_modules/postcss-loader/src/index.js??ruleSet[1].rules[9].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[9].use[3]!./assets/src/scss/bootstrap-build.scss
 @ ./assets/src/scss/bootstrap-build.scss

ERROR in ./assets/src/scss/editorStyle.scss (css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[9].use[1]!./node_modules/postcss-loader/src/index.js??ruleSet[1].rules[9].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[9].use[3]!./assets/src/scss/editorStyle.scss)
Module.updateHash: There was no ChunkGraph assigned to the Module for backward-compat (Use the new API)
 @ ./assets/src/scss/editorStyle.scss.webpack[javascript/auto]!=!./node_modules/@wordpress/scripts/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/@wordpress/scripts/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/@wordpress/scripts/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[9].use[1]!./node_modules/postcss-loader/src/index.js??ruleSet[1].rules[9].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[9].use[3]!./assets/src/scss/editorStyle.scss
 @ ./assets/src/scss/editorStyle.scss

ERROR in ./assets/src/scss/layout/_gravity-forms.scss (css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[9].use[1]!./node_modules/postcss-loader/src/index.js??ruleSet[1].rules[9].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[9].use[3]!./assets/src/scss/layout/_gravity-forms.scss)
Module.updateHash: There was no ChunkGraph assigned to the Module for backward-compat (Use the new API)
 @ ./assets/src/scss/layout/_gravity-forms.scss.webpack[javascript/auto]!=!./node_modules/@wordpress/scripts/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/@wordpress/scripts/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/@wordpress/scripts/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[9].use[1]!./node_modules/postcss-loader/src/index.js??ruleSet[1].rules[9].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[9].use[3]!./assets/src/scss/layout/_gravity-forms.scss
 @ ./assets/src/scss/layout/_gravity-forms.scss

ERROR in ./assets/src/scss/partials/country-selector.scss (css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[9].use[1]!./node_modules/postcss-loader/src/index.js??ruleSet[1].rules[9].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[9].use[3]!./assets/src/scss/partials/country-selector.scss)
Module.updateHash: There was no ChunkGraph assigned to the Module for backward-compat (Use the new API)
 @ ./assets/src/scss/partials/country-selector.scss.webpack[javascript/auto]!=!./node_modules/@wordpress/scripts/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/@wordpress/scripts/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/@wordpress/scripts/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[9].use[1]!./node_modules/postcss-loader/src/index.js??ruleSet[1].rules[9].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[9].use[3]!./assets/src/scss/partials/country-selector.scss
 @ ./assets/src/scss/partials/country-selector.scss

ERROR in ./assets/src/scss/post.scss (css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[9].use[1]!./node_modules/postcss-loader/src/index.js??ruleSet[1].rules[9].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[9].use[3]!./assets/src/scss/post.scss)
Module.updateHash: There was no ChunkGraph assigned to the Module for backward-compat (Use the new API)
 @ ./assets/src/scss/post.scss.webpack[javascript/auto]!=!./node_modules/@wordpress/scripts/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/@wordpress/scripts/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/@wordpress/scripts/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[9].use[1]!./node_modules/postcss-loader/src/index.js??ruleSet[1].rules[9].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[9].use[3]!./assets/src/scss/post.scss
 @ ./assets/src/scss/post.scss

ERROR in ./assets/src/scss/style.scss (css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[9].use[1]!./node_modules/postcss-loader/src/index.js??ruleSet[1].rules[9].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[9].use[3]!./assets/src/scss/style.scss)
Module.updateHash: There was no ChunkGraph assigned to the Module for backward-compat (Use the new API)
 @ ./assets/src/scss/style.scss.webpack[javascript/auto]!=!./node_modules/@wordpress/scripts/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/@wordpress/scripts/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/@wordpress/scripts/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[9].use[1]!./node_modules/postcss-loader/src/index.js??ruleSet[1].rules[9].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[9].use[3]!./assets/src/scss/style.scss
 @ ./assets/src/scss/style.scss

Update postcss-loader to 6.2.1

  • version used by gutenberg
  • update ok
  • error on npm start 
    ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'plugins'

Update postcss-loader config

  • update ok
  • error on npm start 
    Error: PostCSS plugin autoprefixer requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

Install postcss 8.4.16

  • version used by gutenberg
  • install ok
  • error on npm start 
    ERROR in ./assets/src/scss/bootstrap-build.scss (css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[9].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[9].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[9].use[3]!./assets/src/scss/bootstrap-build.scss)
Module.updateHash: There was no ChunkGraph assigned to the Module for backward-compat (Use the new API)

Update sass to 1.35.2 and sass-loader to 12.1.0 and css-loader to 6.2.0

  • versions used by gutenberg

Using –stats-error-details to find culprit

ERROR in ./assets/src/scss/bootstrap-build.scss (css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[9].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[9].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[9].use[3]!./assets/src/scss/bootstrap-build.scss)
Module.updateHash: There was no ChunkGraph assigned to the Module for backward-compat (Use the new API)
Error: Module.updateHash: There was no ChunkGraph assigned to the Module for backward-compat (Use the new API)
    at /home/flhz/Batcave/greenpeace/planet4-develop-default/planet4/themes/planet4-master-theme/node_modules/webpack/lib/ChunkGraph.js:1715:12
    at deprecated (node:internal/util:127:12)
    at Function.getChunkGraphForModule (/home/flhz/Batcave/greenpeace/planet4-develop-default/planet4/themes/planet4-master-theme/node_modules/webpack/lib/ChunkGraph.js:1706:18)
    at CssModule.updateHash (/home/flhz/Batcave/greenpeace/planet4-develop-default/planet4/themes/planet4-master-theme/node_modules/webpack/lib/Module.js:751:27)
    at CssModule.updateHash (/home/flhz/Batcave/greenpeace/planet4-develop-default/planet4/themes/planet4-master-theme/node_modules/mini-css-extract-plugin/dist/index.js:94:11)
    at Compilation._createModuleHash (/home/flhz/Batcave/greenpeace/planet4-develop-default/planet4/themes/planet4-master-theme/node_modules/webpack/lib/Compilation.js:3962:11)
    at /home/flhz/Batcave/greenpeace/planet4-develop-default/planet4/themes/planet4-master-theme/node_modules/webpack/lib/Compilation.js:4849:11
    at processQueue (/home/flhz/Batcave/greenpeace/planet4-develop-default/planet4/themes/planet4-master-theme/node_modules/webpack/lib/util/processAsyncTree.js:61:4)
    at processTicksAndRejections (node:internal/process/task_queues:78:11)
 @ ./assets/src/scss/bootstrap-build.scss.webpack[javascript/auto]!=!./node_modules/@wordpress/scripts/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/@wordpress/scripts/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[9].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[9].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[9].use[3]!./assets/src/scss/bootstrap-build.scss
 @ ./assets/src/scss/bootstrap-build.scss

Update mini-css-extract-plugin to 2.7.6

  • last version
  • update ok
  • compilation ok, but no css on site
  • compiled as style-style.min.css

Change –webpack-src-dir=assets/src

ll assets/build/*.css                                                                                             ─╯
-rw-r--r--. 1 flhz flhz 1.7K Jan  8 16:23 assets/build/bootstrap.css
-rw-r--r--. 1 flhz flhz 1.7K Jan  8 16:23 assets/build/bootstrap.min.css
-rw-r--r--. 1 flhz flhz 1.8K Jan  8 16:23 assets/build/country-selector.css
-rw-r--r--. 1 flhz flhz 1.8K Jan  8 16:23 assets/build/country-selector.min.css
-rw-r--r--. 1 flhz flhz 1.7K Jan  8 16:23 assets/build/editorStyle.css
-rw-r--r--. 1 flhz flhz 1.7K Jan  8 16:23 assets/build/editorStyle.min.css
-rw-r--r--. 1 flhz flhz 1.8K Jan  8 16:23 assets/build/gravity-forms.css
-rw-r--r--. 1 flhz flhz 1.8K Jan  8 16:23 assets/build/gravity-forms.min.css
-rw-r--r--. 1 flhz flhz 1.7K Jan  8 16:23 assets/build/post.css
-rw-r--r--. 1 flhz flhz 1.7K Jan  8 16:23 assets/build/post.min.css
-rw-r--r--. 1 flhz flhz 1.7K Jan  8 16:23 assets/build/style-style.css
-rw-r--r--. 1 flhz flhz 1.7K Jan  8 16:23 assets/build/style-style.min.css
  • same issue, and no css in files

Remove defaultConfig module declaration, integrate first rule

  • also add babel-loader
  • content compiles
  • still some weird header in css 
    /*!***************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./assets/src/scss/style.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************/

Trace deprecation messages with –trace-deprecation

  • add ~NODE_OPTIONS=’–trace-deprecation’~ before command

Update webpack-fix-style-only-entries to 0.6.1

  • not working, removing call
  • no more deprecated messages

Remove defaultConfig.plugins declaration

  • break on @wordpress/element dep, adding it 5.25.0
  • adding @wordpress/block-editor 12.16.0
  • still weird headers and style-style.min.css file

Remove defaultConfig declaration

  • deprecation message, update terser-webpack-plugin@5.3.9
  • deprecation message, update optimize-css-assets-webpack-plugin
    • can’t, for webpack 5 use css-minimizer-webpack-plugin
    • removing optimize and adding css
  • it’s working !

Sourcemaps are not generated

  • add devtool declaration
  • it’s working !
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment