title: Gatby develop error : Process is not Defined
body: <p>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</p>
  <p>here is the Screenshot of the Error from Developer console
  <a href="https://i.stack.imgur.com/Clo9q.png" rel="nofollow noreferrer">https://i.stack.imgur.com/Clo9q.png</a></p>
  <p>this is package.json dependencies</p>
  <pre><code>  &quot;dependencies&quot;: {
      &quot;@amcharts/amcharts4&quot;: &quot;~4.10.27&quot;,
      &quot;@ant-design/icons&quot;: &quot;^4.7.0&quot;,
      &quot;@apollo/react-hooks&quot;: &quot;^4.0.0&quot;,
      &quot;@apollo/react-testing&quot;: &quot;4.0.0&quot;,
      &quot;@storybook/addon-info&quot;: &quot;^5.3.21&quot;,
      &quot;antd&quot;: &quot;^4.22.8&quot;,
      &quot;apollo-boost&quot;: &quot;^0.4.9&quot;,
      &quot;apollo-cache-inmemory&quot;: &quot;^1.6.6&quot;,
      &quot;array-move&quot;: &quot;^4.0.0&quot;,
      &quot;aws-amplify&quot;: &quot;^4.3.33&quot;,
      &quot;aws-amplify-react&quot;: &quot;^5.1.9&quot;,
      &quot;babel-plugin-import&quot;: &quot;^1.13.5&quot;,
      &quot;babel-plugin-styled-components&quot;: &quot;^2.0.7&quot;,
      &quot;canvas&quot;: &quot;^2.9.3&quot;,
      &quot;core-js&quot;: &quot;^3.25.0&quot;,
      &quot;crypto&quot;: &quot;npm:crypto-browserify&quot;,
      &quot;crypto-browserify&quot;: &quot;^3.12.0&quot;,
      &quot;crypto-js&quot;: &quot;^3.1.9-1&quot;,
      &quot;firebase&quot;: &quot;^9.9.3&quot;,
      &quot;gatsby&quot;: &quot;^4.21.1&quot;,
      &quot;gatsby-plugin-antd&quot;: &quot;^2.2.0&quot;,
      &quot;gatsby-plugin-fullstory&quot;: &quot;^4.21.0&quot;,
      &quot;gatsby-plugin-google-analytics&quot;: &quot;^4.21.0&quot;,
      &quot;gatsby-plugin-less&quot;: &quot;^6.21.0&quot;,
      &quot;gatsby-plugin-polyfill-io&quot;: &quot;^1.1.0&quot;,
      &quot;gatsby-plugin-react-svg&quot;: &quot;^3.1.0&quot;,
      &quot;gatsby-plugin-s3&quot;: &quot;^0.3.8&quot;,
      &quot;gatsby-plugin-styled-components&quot;: &quot;^5.21.0&quot;,
      &quot;html-react-parser&quot;: &quot;^3.0.4&quot;,
      &quot;humanize-duration&quot;: &quot;^3.27.3&quot;,
      &quot;i18next&quot;: &quot;^21.9.1&quot;,
      &quot;jsdom&quot;: &quot;^20.0.0&quot;,
      &quot;jsonwebtoken&quot;: &quot;^8.5.1&quot;,
      &quot;less&quot;: &quot;^4.1.3&quot;,
      &quot;less-loader&quot;: &quot;^11.0.0&quot;,
      &quot;moment&quot;: &quot;^2.29.4&quot;,
      &quot;moment-timezone&quot;: &quot;^0.5.37&quot;,
      &quot;react&quot;: &quot;^18.2.0&quot;,
      &quot;react-compound-slider&quot;: &quot;^3.4.0&quot;,
      &quot;react-dom&quot;: &quot;^18.2.0&quot;,
      &quot;react-hook-form&quot;: &quot;^7.34.2&quot;,
      &quot;react-i18next&quot;: &quot;^11.18.5&quot;,
      &quot;react-infinite-scroller&quot;: &quot;^1.2.6&quot;,
      &quot;react-linkify&quot;: &quot;^1.0.0-alpha&quot;,
      &quot;react-phone-number-input&quot;: &quot;^3.2.10&quot;,
      &quot;react-social-icons&quot;: &quot;^5.14.0&quot;,
      &quot;react-sortable-hoc&quot;: &quot;^2.0.0&quot;,
      &quot;react-star-ratings&quot;: &quot;^2.3.0&quot;,
      &quot;rxjs&quot;: &quot;^7.5.6&quot;,
      &quot;socket.io-client&quot;: &quot;4.5.1&quot;,
      &quot;steam&quot;: &quot;^1.4.1&quot;,
      &quot;stream&quot;: &quot;^0.0.2&quot;,
      &quot;styled-components&quot;: &quot;^5.3.5&quot;,
      &quot;typescript&quot;: &quot;^4.8.2&quot;,
      &quot;xmldom&quot;: &quot;^0.6.0&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.18.13&quot;,
      &quot;@babel/plugin-proposal-optional-chaining&quot;: &quot;^7.18.9&quot;,
      &quot;@storybook/addon-actions&quot;: &quot;^6.5.10&quot;,
      &quot;@storybook/addon-links&quot;: &quot;^6.5.10&quot;,
      &quot;@storybook/addon-storysource&quot;: &quot;^6.5.10&quot;,
      &quot;@storybook/addons&quot;: &quot;^6.5.10&quot;,
      &quot;@storybook/preset-ant-design&quot;: &quot;^0.0.2&quot;,
      &quot;@storybook/react&quot;: &quot;^6.5.10&quot;,
      &quot;@testing-library/dom&quot;: &quot;^8.17.1&quot;,
      &quot;@testing-library/jest-dom&quot;: &quot;^5.16.5&quot;,
      &quot;@testing-library/react&quot;: &quot;^13.3.0&quot;,
      &quot;babel-jest&quot;: &quot;^29.0.1&quot;,
      &quot;babel-loader&quot;: &quot;^8.2.5&quot;,
      &quot;babel-preset-gatsby&quot;: &quot;^2.21.0&quot;,
      &quot;identity-obj-proxy&quot;: &quot;^3.0.0&quot;,
      &quot;jest&quot;: &quot;^29.0.1&quot;,
      &quot;prettier&quot;: &quot;^2.7.1&quot;,
      &quot;process&quot;: &quot;^0.11.10&quot;,
      &quot;react-test-renderer&quot;: &quot;^18.2.0&quot;,
      &quot;webpack&quot;: &quot;^5.74.0&quot;
    },
  </code></pre>
  <p>this is webpack overide file</p>
  <pre><code>const webpack = require(&quot;webpack&quot;);
  
  module.exports = function override(config) {
    const fallback = config.resolve.fallback || {};
    config.resolve.fallback = {
      crypto: require.resolve(&quot;crypto-browserify&quot;),
      stream: require.resolve(&quot;stream-browserify&quot;),
      assert: require.resolve(&quot;assert&quot;),
      http: require.resolve(&quot;stream-http&quot;),
      https: require.resolve(&quot;https-browserify&quot;),
      os: require.resolve(&quot;os-browserify&quot;),
      url: require.resolve(&quot;url&quot;),
      // process: require.resolve(&quot;process/browser&quot;),
    }
  
    config.plugins = (config.plugins || []).concat([
      new webpack.ProvidePlugin({
        process: &quot;process/browser&quot;,
        Buffer: [&quot;buffer&quot;, &quot;Buffer&quot;],
      }),
      new webpack.DefinePlugin({
        'process.env': JSON.stringify(process.env)
      }),
    ]);
    return config;
  };
  </code></pre>
  <p>this is gatsby-config.js</p>
  <pre><code>siteMetadata: {
            title: &quot;SocialMiningAi&quot;,
          },
          plugins: [
            `gatsby-plugin-styled-components`,
            {
              resolve: `gatsby-plugin-antd`,
              options: {
                style: true
              }
            },
            {
              resolve: `gatsby-plugin-less`,
              options: {
                lessOptions: {
                  javascriptEnabled: true,
                },
                modifyVars: {
                  &quot;primary-color&quot;: &quot;#00648D&quot;,
                  &quot;font-family&quot;: &quot;Arial&quot;,
                  &quot;layout-body-background&quot;: &quot;#66ff79&quot;,
                  &quot;table-row-hover-bg&quot;: &quot;#E6F0FF&quot;,
                  &quot;primary-1&quot;: &quot;#E6F0FF&quot;,
                },
              },
            },
            {
              resolve: &quot;gatsby-plugin-react-svg&quot;,
              options: {
                rule: {
                  include: /static/,
                },
              },
            },
          ],
  </code></pre>
  <p>gatsby-node.js file</p>
  <pre><code>exports.onCreateBabelConfig = ({ actions }) =&gt; {
    actions.setBabelPlugin({
      name: &quot;babel-plugin-import&quot;,
      options: {
        libraryName: &quot;antd&quot;,
        style: true,
      },
    })
  }
  
  exports.onCreateWebpackConfig = ({
    stage,
    rules,
    loaders,
    plugins,
    actions,
  }) =&gt; {
    if (stage === &quot;build-html&quot; || stage === &quot;develop-html&quot;) {
      actions.setWebpackConfig({
        module: {
          rules: [
            {
              test: /canvas/,
              use: loaders.null(),
            },
            {
              test: /canvg/,
              use: loaders.null(),
            },
            {
              test: /firebase/,
              use: loaders.null(),
            },
          ],
        },
      })
    }
    if (stage === &quot;build-javascript&quot; || stage === &quot;develop-javascript&quot;) {
      actions.setWebpackConfig({
        module: {
          rules: [
            {
              test: /canvg/,
              use: loaders.null(),
            },
          ],
        },
      })
    }
  }
  
  exports.onCreatePage = async ({ page, actions }) =&gt; {
    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 = &quot;/personalized-ads/*&quot;
  
      // Update the page.
      createPage(page)
    } else if (page.path.match(/^\/life-events/)) {
      page.matchPath = &quot;/life-events/*&quot;
  
      // Update the page.
      createPage(page)
    } else if (page.path.match(/^\/acal/)) {
      page.matchPath = &quot;/acal/*&quot;
      // Update the page.
      createPage(page)
    } else if (page.path.match(/^\/engagements/)) {
      page.matchPath = &quot;/engagements/*&quot;
      // Update the page.
      createPage(page)
    } else if (page.path.match(/^\/user-review/)) {
      page.matchPath = &quot;/user-review/*&quot;
      // Update the page.
      createPage(page)
    } else if (page.path.match(/^\/reviews/)) {
      page.matchPath = &quot;/reviews/*&quot;
      // Update the page.
      createPage(page)
    } else if (page.path.match(/^\/shorten/)) {
      page.matchPath = &quot;/shorten/*&quot;
      // Update the page.
      createPage(page)
    } else if (page.path.match(/^\/chat-bot/)) {
      page.matchPath = &quot;/chat-bot/*&quot;
      // Update the page.
      createPage(page)
    }
  }
  
  </code></pre>
  <p>Can anyone look into it and help me.</p>
  <p>Thankyou in advance</p>