Module Not Found (possible Polyfill webpack 5) 将react app部署到heroku时出错

Question

I'm trying to deploy my react app to Heroku. The build is successful locally but when I try to deploy to Heroku I get a module not found error even though the module has been installed already.

Also using SerpApi which is the google-search-results-nodejs module (which I think is giving the polyfill needed error in the first place).

The error is apparently a missing https-browserify module

 -----> Build
remote:        Running build
remote:
remote:        > Worthly@1.0.0 build /tmp/build_513e53e9
remote:        > cd client && npm run build
remote:
remote:
remote:        > client@0.1.0 build /tmp/build_513e53e9/client
remote:        > react-scripts build
remote:
remote:        Creating an optimized production build...
remote:        Failed to compile.
remote:
remote:        Module not found: Error: Can't resolve 'https' in '/tmp/build_513e53e9/client/node_modules/google-search-results-nodejs/lib'
remote:        BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
remote:        This is no longer the case. Verify if you need this module and configure a polyfill for it.
remote:
remote:        If you want to include a polyfill, you need to:
remote:         - add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }'
remote:         - install 'https-browserify'
remote:        If you don't want to include a polyfill, you can use an empty module like this:
remote:         resolve.fallback: { "https": false }

I've included a fallback in the client node module react-scripts webpack config

resolve: {

      fallback: { "https": require.resolve("https-browserify") },
...other webpack stuff
}

And the client package.json has the https-browserify module in the dependencies

"dependencies": {
    "@apollo/client": "^3.5.8",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.1.3",
    "dotenv": "^15.0.0",
    "google-search-results-nodejs": "^2.1.0",
    "graphql": "^15.0.0",
    "https-browserify": "^1.0.0",
    "jwt-decode": "^3.1.2",
    "node-polyfill-webpack-plugin": "^1.1.4",
    "react": "^17.0.2",
    "react-bootstrap": "^1.3.0",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "5.0.0",
    "styled-components": "^5.3.3",
    "typescript": "^4.5.5",
    "web-vitals": "^2.1.3"
  },

Is there something else I'm missing from the webpack config?

Answer 1

I've solved the issue by abandoning SerpApi (couldn't resolve the specific webpack error) and using another web scraper api called Countdown (has more reliable results data and no extra polyfills needed for deploying to Heroku and the like).