Skip to content

Commit a217661

Browse files
LekoArtsgatsbybot
andauthored
chore(docs): Add version mismatch info to migration guide (#30091)
Co-authored-by: gatsbybot <[email protected]>
1 parent ff6f56a commit a217661

File tree

1 file changed

+12
-2
lines changed

1 file changed

+12
-2
lines changed

docs/docs/reference/release-notes/migrating-from-v2-to-v3.md

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,16 @@ The specific resolutions we recommend at this time are found below:
119119
}
120120
```
121121

122+
### Handling version mismatches
123+
124+
When upgrading an already existing project (that has an existing `node_modules` folder and `package-lock.json` file) you might run into version mismatches for your packages as npm/yarn don't resolve to the latest/correct version. An example would be a version mismatch of `webpack@4` and `webpack@5` that can throw an error like this:
125+
126+
```shell
127+
Error: NormalModuleFactory.afterResolve (ReactRefreshPlugin) is no longer a waterfall hook, but a bailing hook instead.
128+
```
129+
130+
An effective way to get around this issue is deleting `node_modules` and `package-lock.json` and then running `npm install` again. Alternatively, you can use `npm dedupe`.
131+
122132
## Handling Breaking Changes
123133

124134
This section explains breaking changes that were made for Gatsby v3. Most, if not all, of those changes had a deprecation message in v2. In order to successfully update, you'll need to resolve these changes.
@@ -400,7 +410,7 @@ const Layout = ({ children, font }) => (
400410
export default Layout
401411
```
402412
403-
### Webpack 5 node configuration changed (node.fs, node.path, ...)
413+
### webpack 5 node configuration changed (node.fs, node.path, ...)
404414
405415
Some components need you to patch/disable node APIs in the browser, like `path` or `fs`. webpack removed these automatic polyfills. You now have to manually set them in your configurations:
406416
@@ -427,7 +437,7 @@ If it's still not resolved, the error message should guide you on what else you
427437
428438
#### process is not defined
429439
430-
A common error is `process is not defined`. Webpack 4 polyfilled process automatically in the browser, but with v5 it's not the case anymore.
440+
A common error is `process is not defined`. webpack 4 polyfilled process automatically in the browser, but with v5 it's not the case anymore.
431441
432442
If you're using `process.browser` in your components, you should switch to a window is not undefined check.
433443

0 commit comments

Comments
 (0)