I was upgrading my Gatsby (v2 to v4) application and was successfully upgraded the dependencies.
while running npm run develop, Im getting error that window is not defined
current node version is 16.17.0.
according to documentation after adding these into gatsby-node.js file
plugins: [
plugins.provide({ process: 'process/browser' })
]
process reference error has been solved now getting WebpackError: ReferenceError: window is not defined and it should be solved by adding this into gatsby-node.js file
{
test: /bad-module/,
use: loaders.null(),
},
but still getting same error that window is not defined
this is package.json dependencies
"dependencies": {
"@amcharts/amcharts4": "~4.10.27",
"@ant-design/icons": "^4.7.0",
"@apollo/react-hooks": "^4.0.0",
"@apollo/react-testing": "4.0.0",
"@storybook/addon-info": "^5.3.21",
"antd": "^4.22.8",
"apollo-boost": "^0.4.9",
"apollo-cache-inmemory": "^1.6.6",
"array-move": "^4.0.0",
"aws-amplify": "^4.3.33",
"aws-amplify-react": "^5.1.9",
"babel-plugin-import": "^1.13.5",
"babel-plugin-styled-components": "^2.0.7",
"canvas": "^2.9.3",
"core-js": "^3.25.0",
"crypto": "npm:crypto-browserify",
"crypto-browserify": "^3.12.0",
"crypto-js": "^3.1.9-1",
"firebase": "^9.9.3",
"gatsby": "^4.21.1",
"gatsby-plugin-antd": "^2.2.0",
"gatsby-plugin-fullstory": "^4.21.0",
"gatsby-plugin-google-analytics": "^4.21.0",
"gatsby-plugin-less": "^6.21.0",
"gatsby-plugin-polyfill-io": "^1.1.0",
"gatsby-plugin-react-svg": "^3.1.0",
"gatsby-plugin-s3": "^0.3.8",
"gatsby-plugin-styled-components": "^5.21.0",
"html-react-parser": "^3.0.4",
"humanize-duration": "^3.27.3",
"i18next": "^21.9.1",
"jsdom": "^20.0.0",
"jsonwebtoken": "^8.5.1",
"less": "^4.1.3",
"less-loader": "^11.0.0",
"moment": "^2.29.4",
"moment-timezone": "^0.5.37",
"react": "^18.2.0",
"react-compound-slider": "^3.4.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.34.2",
"react-i18next": "^11.18.5",
"react-infinite-scroller": "^1.2.6",
"react-linkify": "^1.0.0-alpha",
"react-phone-number-input": "^3.2.10",
"react-social-icons": "^5.14.0",
"react-sortable-hoc": "^2.0.0",
"react-star-ratings": "^2.3.0",
"rxjs": "^7.5.6",
"socket.io-client": "4.5.1",
"steam": "^1.4.1",
"stream": "^0.0.2",
"styled-components": "^5.3.5",
"typescript": "^4.8.2",
"xmldom": "^0.6.0"
},
"devDependencies": {
"@babel/core": "^7.18.13",
"@babel/plugin-proposal-optional-chaining": "^7.18.9",
"@storybook/addon-actions": "^6.5.10",
"@storybook/addon-links": "^6.5.10",
"@storybook/addon-storysource": "^6.5.10",
"@storybook/addons": "^6.5.10",
"@storybook/preset-ant-design": "^0.0.2",
"@storybook/react": "^6.5.10",
"@testing-library/dom": "^8.17.1",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"babel-jest": "^29.0.1",
"babel-loader": "^8.2.5",
"babel-preset-gatsby": "^2.21.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^29.0.1",
"prettier": "^2.7.1",
"process": "^0.11.10",
"react-test-renderer": "^18.2.0",
"webpack": "^5.74.0"
},
this is gatsby-config.js
siteMetadata: {
title: "SocialMiningAi",
},
plugins: [
`gatsby-plugin-styled-components`,
{
resolve: `gatsby-plugin-antd`,
options: {
style: true
}
},
{
resolve: `gatsby-plugin-less`,
options: {
lessOptions: {
javascriptEnabled: true,
},
modifyVars: {
"primary-color": "#00648D",
"font-family": "Arial",
"layout-body-background": "#66ff79",
"table-row-hover-bg": "#E6F0FF",
"primary-1": "#E6F0FF",
},
},
},
{
resolve: "gatsby-plugin-react-svg",
options: {
rule: {
include: /static/,
},
},
},
],
this is gatsby-node.js file
exports.onCreateBabelConfig = ({ actions }) => {
actions.setBabelPlugin({
name: "babel-plugin-import",
options: {
libraryName: "antd",
style: true,
},
})
}
exports.onCreateWebpackConfig = ({
stage,
rules,
loaders,
plugins,
actions,
}) => {
if (stage === "build-html" || stage === "develop-html") {
actions.setWebpackConfig({
module: {
rules: [
{
test: /canvas/,
use: loaders.null(),
},
{
test: /canvg/,
use: loaders.null(),
},
{
test: /firebase/,
use: loaders.null(),
},
{
test: /bad-module/,
use: loaders.null(),
},
{
test: /offending-module/,
use: loaders.null(),
},
],
},
plugins: [
plugins.provide({ process: 'process/browser' })
]
})
}
if (stage === "build-javascript" || stage === "develop-javascript") {
actions.setWebpackConfig({
module: {
rules: [
{
test: /canvg/,
use: loaders.null(),
}
],
},
plugins: [
plugins.provide({ process: 'process/browser' })
]
})
}
}
}
