Gatsby - ERROR #98123 WEBPACK I cant build my app - reactjs

Question

So I couldn't build my gatsby app because it has quite a lot of dependencies on window. Many components are built depending on the width of the browser window.
After the "gatsby build" command I got WebpackError: ReferenceError: window is not defined.
I found a solution on the internet to paste the following code into gatsby-node.js:
exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
if (stage === 'build-html' || stage === 'develop-html') {
actions.setWebpackConfig({
module: {
rules: [
{
test: /node_modules/,
use: loaders.null(),
},
],
},
});
}
};
but when rebuilding the app I get this error:
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|json|C:\Users\Damian\Documents\Ossolinsky\app\node_modules\null-loader\dist\cjs.js??ruleSet[1].rules[13].use!C:\Users\Damian\Documents\Ossolinsky\app\node_modules\gatsby\package.json': No serializer registered for JSONParseError
ERROR #98123 WEBPACK
Generating SSR bundle failed
Unexpected end of JSON input while parsing empty string
File: node_modules\gatsby\package.json
not finished Building HTML renderer - 1.257s

Answer 1

I found a solution on the internet to paste the following code into
gatsby-node.js
This is the recipe of the devil. With the following snippet:
{
test: /node_modules/,
use: loaders.null(),
},
You are adding a null loader to all node_modules folder and the idea here is to add only instances that need to be ignored in the server because they had a window dependency. Since rules is an array you can do:
exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
if (stage === 'build-html' || stage === 'develop-html') {
actions.setWebpackConfig({
module: {
rules: [
{
test: /some_package_1/,
use: loaders.null(),
},
{
test: /some_package_2/,
use: loaders.null(),
},
{
test: /some_package_3/,
use: loaders.null(),
},
],
},
});
}
};
Keep in mind that /some_package_3/ is a regular expression (hence the test key and that's why is between slashes) that needs to match the folder name inside node_modules.
To know which string should be placed as a regular expression, normally if you import { some_package_1 } from 'some_package_1' means that some_package_1 is the folder inside node_modules that needs to be added.
There's a chance that some_package_1 is not using a window per se, and it's a dependency of the dependency: in that case, you need to find out which one is it and apply the same reasoning ignoring it.
Many components are built depending on the width of the browser
window.
If those are internal components, you should check first if there's a window available when the component is being rendered/parsed, as the docs suggests, with the following condition:
export default function MyComponent() {
if (typeof window !== "undefined") {
return <div>Component that can use window and will bypass SSR</div>
}
return <div>Component that can't use window</div>
}