Gatby develop error : Process is not Defined

Question

I was upgrading my gatsby application and was successful in upgrading the dependencies and running the development server successfully. But on browser, the app crashes abnormally by getting this error

here is the Screenshot of the Error from Developer console https://i.sstatic.net/Clo9q.png

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 webpack overide file

const webpack = require("webpack");

module.exports = function override(config) {
  const fallback = config.resolve.fallback || {};
  config.resolve.fallback = {
    crypto: require.resolve("crypto-browserify"),
    stream: require.resolve("stream-browserify"),
    assert: require.resolve("assert"),
    http: require.resolve("stream-http"),
    https: require.resolve("https-browserify"),
    os: require.resolve("os-browserify"),
    url: require.resolve("url"),
    // process: require.resolve("process/browser"),
  }

  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: "process/browser",
      Buffer: ["buffer", "Buffer"],
    }),
    new webpack.DefinePlugin({
      'process.env': JSON.stringify(process.env)
    }),
  ]);
  return config;
};

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/,
              },
            },
          },
        ],

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(),
          },
        ],
      },
    })
  }
  if (stage === "build-javascript" || stage === "develop-javascript") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /canvg/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions

  // page.matchPath is a special key that's used for matching pages
  // only on the client.
  if (page.path.match(/^\/personalized-ads/)) {
    page.matchPath = "/personalized-ads/*"

    // Update the page.
    createPage(page)
  } else if (page.path.match(/^\/life-events/)) {
    page.matchPath = "/life-events/*"

    // Update the page.
    createPage(page)
  } else if (page.path.match(/^\/acal/)) {
    page.matchPath = "/acal/*"
    // Update the page.
    createPage(page)
  } else if (page.path.match(/^\/engagements/)) {
    page.matchPath = "/engagements/*"
    // Update the page.
    createPage(page)
  } else if (page.path.match(/^\/user-review/)) {
    page.matchPath = "/user-review/*"
    // Update the page.
    createPage(page)
  } else if (page.path.match(/^\/reviews/)) {
    page.matchPath = "/reviews/*"
    // Update the page.
    createPage(page)
  } else if (page.path.match(/^\/shorten/)) {
    page.matchPath = "/shorten/*"
    // Update the page.
    createPage(page)
  } else if (page.path.match(/^\/chat-bot/)) {
    page.matchPath = "/chat-bot/*"
    // Update the page.
    createPage(page)
  }
}

Can anyone look into it and help me.

Thankyou in advance

Answer 1

Your webpack override file looks odd and I think this is where the issue is. I think you are trying to do something like the following in your gatsby-node.js:

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      fallback: {
        crypto: require.resolve("crypto-browserify"),
        stream: require.resolve("stream-browserify"),
        assert: require.resolve("assert"),
        http: require.resolve("stream-http"),
        https: require.resolve("https-browserify"),
        os: require.resolve("os-browserify"),
        url: require.resolve("url"),
        process: require.resolve("process/browser"),
      },
    },
  });
};

You can read more about customizing webpack config at: https://www.gatsbyjs.com/docs/how-to/custom-configuration/add-custom-webpack-config/

To override Gatsby's webpack default configuration you need to use onCreateWebpackConfig API, you can read more about it at: https://www.gatsbyjs.com/docs/reference/config-files/gatsby-node/#onCreateWebpackConfig