[gatsby-plugin-netlify] depracated webpack-assets-manifest causing errors during build

[talohana]

Description

I am upgrading to gatsby v3 and I am using gatsby-plugin-netlify, during build time I get the following errors:

ERROR

(node:17164) [DEP_WEBPACK_COMPILATION_NORMAL_MODULE_LOADER_HOOK] DeprecationWarning: Compilation.hooks.normalModuleLoader was moved to NormalModule.> getCompilationHooks(compilation).loader
(Use node --trace-deprecation ... to show where the warning was created)

ERROR

(node:17164) [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.PROCESSASSETS_STAGE*.

I have drilled down a bit and found that cause of the problem was a deprecated webpack-assets-manifest dependency.

webpack-assets-manifest is compatible with webpack v5 as described here

Steps to reproduce

• Create a project with gatsby v3
• Add gatsby-plugin-netlify
• run npm run build

Environment

System:
OS: Windows 10 10.0.19042
CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
Binaries:
Node: 14.15.1 - C:\Program Files\nodejs\node.EXE
npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.19041.423.0), Chromium (88.0.705.81)
npmPackages:
gatsby: ^3.0.1 => 3.0.1
gatsby-plugin-google-analytics: ^3.0.0 => 3.0.0
gatsby-plugin-image: ^1.0.0 => 1.0.0
gatsby-plugin-manifest: ^3.0.0 => 3.0.0
gatsby-plugin-mdx: ^2.0.0 => 2.0.0
gatsby-plugin-netlify: ^3.0.0 => 3.0.0
gatsby-plugin-offline: ^4.0.0 => 4.0.0
gatsby-plugin-react-helmet: ^4.0.0 => 4.0.0
gatsby-plugin-robots-txt: ^1.5.5 => 1.5.5
gatsby-plugin-sharp: ^3.0.0 => 3.0.0
gatsby-plugin-sitemap: ^3.0.0 => 3.0.0
gatsby-plugin-styled-components: ^4.0.0 => 4.0.0
gatsby-remark-autolink-headers: ^3.0.0 => 3.0.0
gatsby-remark-copy-linked-files: ^3.0.0 => 3.0.0
gatsby-remark-embedder: ^4.1.0 => 4.1.0
gatsby-remark-images: ^4.0.0 => 4.0.0
gatsby-remark-prismjs: ^4.0.0 => 4.0.0
gatsby-source-filesystem: ^3.0.0 => 3.0.0
gatsby-transformer-sharp: ^3.0.0 => 3.0.0

I would be happy to submit a PR if needed 🚀

[pieh]

Hey @talohana - PR with upgrade would be most welcome! I can't tell from release notes of webpack-assets-manifest is this is just matter of upgrading or there will be any additional changes needed 🤔

[talohana]

Working on it right now. I'm stumbling an error while running yarn upgrade webpack-plugin-manifest --latest:

error An unexpected error occurred: "expected workspace package to exist for "retext"".

There is a whole discussion about it here yarnpkg/yarn#7807, which the solutions are:

• Re-create yarn.lock
• Downgrade yarn to 1.18.0

Seems a bit hacky, has anyone else encountered this before?

[spencersmb]

+1 for this issue. I just migrated to Gatsby v3 and updated all my plugins - one of which is the gatsby-plugin-netlify and am also seeing this issue when running the build command. I'm assuming it will get fixed by their team but wondering if there is anything we need to do in the mean time?

Thanks for writing this up @talohana
Spencer

[kimbaudi]

I can't tell from release notes of webpack-assets-manifest is this is just matter of upgrading or there will be any additional changes needed

@pieh - upgrading to webpack-assets-manifest ^4.0.0 seems fine, but upgrading to ^5.0.0 throws error. After running yarn jest gatsby-plugin-netlify, I get a failed test w/ error message: `TypeError: Cannot read property 'RawSource' of undefined. (see diff here)

Working on it right now. I'm stumbling an error while running yarn upgrade webpack-plugin-manifest --latest

@talohana - you should just be able to run yarn remove webpack-assets-manifest and yarn add webpack-assets-manifest to update webpack-assets-manifest to the latest v5.0.1. This should update the package.json file under gatsby-plugin-netlify folder and update yarn.lock file in root of gatsby repo.

[talohana]

I can't tell from release notes of webpack-assets-manifest is this is just matter of upgrading or there will be any additional changes needed

@pieh - upgrading to webpack-assets-manifest ^4.0.0 seems fine, but upgrading to ^5.0.0 throws error. After running yarn jest gatsby-plugin-netlify, I get a failed test w/ error message: `TypeError: Cannot read property 'RawSource' of undefined. (see diff here)

Working on it right now. I'm stumbling an error while running yarn upgrade webpack-plugin-manifest --latest

@talohana - you should just be able to run yarn remove webpack-assets-manifest and yarn add webpack-assets-manifest to update webpack-assets-manifest to the latest v5.0.1. This should update the package.json file under gatsby-plugin-netlify folder and update yarn.lock file in root of gatsby repo.

I can remove the dependency, but re-adding it raises the same error

[kimbaudi]

@talohana - that is strange. I'm able to:

cd packages/gatsby-plugin-manifest
yarn remove webpack-assets-manifest
yarn add webpack-assets-manifest

in order to upgrade webpack-assets-manifest

[kalwalt]

Not sure if it is related but i have a similar issue. I'm migrating from gatsby v2.0 to v3.0 in my project gatsby-starter-i18n-bulma related PR: kalwalt/gatsby-starter-i18n-bulma#139.
I have the gatsby-plugin-netlify too in my dependencies and i get this error:

6:39:21 PM: error (node:1852) [DEP_WEBPACK_COMPILATION_NORMAL_MODULE_LOADER_HOOK] DeprecationWarning: Compilation.hooks.normalModuleLoader was moved to NormalModule.getCompilationHooks(compilation).loader
6:39:49 PM: error (node:1852) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
6:39:49 PM: BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
6:39:49 PM: 	Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
6:39:49 PM: 	Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.

you can look at the log here
I will try to upgrade webpack-assets-manifest as suggested by @kimbaudi

[kalwalt]

@kimbaudi the solution you provided

cd packages/gatsby-plugin-manifest
yarn remove webpack-assets-manifest
yarn add webpack-assets-manifest

doesn't work for me. First, webpack-asset-manifest is installed in node_modules and not in the gatsby-plugin-netlify/node_modules, second, because there isn't a yarn.lock file i need to run yarn install but not sure if it can work.

[joelvarty]

Same problem here in this repo agility/agility-website-gatsby#50

package.json:
"gatsby": "^3.0.4",
"gatsby-plugin-netlify": "^3.0.0",

build error

22:14:08 PM:
ERROR (node:2597) [DEP_WEBPACK_COMPILATION_NORMAL_MODULE_LOADER_HOOK] DeprecationWarning: Compilation.hooks.normalModuleLoader was moved to NormalModule.getCompilationHooks(compilation).loader

22:14:19 PM:
ERROR (node:2597) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.

22:14:19 PM:
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.

22:14:19 PM:
	Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.

[kimbaudi]

@kalwalt - i'm talking about updating gatsby-plugin-netlify dependency on webpack-assets-manifest from current version 3.1.1 (which is causing the error) to a more recent version. unfortunately, i'm really busy right now so I won't be making any PR for this plugin. I just disable it for now.

[kalwalt]

@kimbaudi i see my error. Watching the PR #30217 by @pedrolamas, sound interesting, i will test this last if i can. 😃

[pedrolamas]

@kimbaudi tests are passing fine for me... am I missing something here?

[talohana]

For me tests are passing locally, but when I try to build my site (after npm linking) I get the following error:

ERROR #98123 WEBPACK

Generating SSR bundle failed

The 'compilation' argument must be an instance of Compilation

[kimbaudi]

@pedrolamas - I tested again and the tests are passing. My mistake.

[pedrolamas]

@talohana indeed, I too am seeing the same error from yarn linking... Back to the drawing board I guess... 😕

[pedrolamas]

@talohana I now know what is the problem and that is with how yarn link (and probably npm link) work, not with the upgrade per si...

I noticed that even after updating the "webpack-assets-manifest" dependency and linking the file to the main project, it was still using the wrong version of the dependency as the link process doesn't actually update the dependencies, it just points to the folder contents.

In my case, using yalc to do the linking and local tests did the trick and I now see the build passing without any errors.

As such, and unless someone finds any other problem, I consider the PR worth to merge as it is right now!

[pieh]

I'm on the PR review right now, just trying to get to the bottom of failing type check there, but from manual testing it seemed to be working just all right

[pieh]

For folks that want workaround right now - if you use yarn you can add:

"resolutions": {
  "webpack-assets-manifest": "5.0.1"
}

to your package.json to force yarn to install that instead of what plugin has specified right now (unfortunaly there is no reliable equivalent workaround in npm)

[dsebastien]

I've tried the above workaround without success, unfortunately.

[panzacoder]

After much upgrading and cleaning, this worked for me:
#33969 (comment)