warn WebpackError: Unsafe builtin usage https.Agent [requester-node-http]

[epbarger]

Just upgraded a project to webpack 5.16 (via going from Gatsby 2 -> 3), and just started seeing this warning in the console.

warn Unsafe builtin method was used, future builds will need to rebuild all pages
warn WebpackError: Unsafe builtin usage https.Agent
    at docs/node_modules/@algolia/requester-node-http/dist/requester-node-http.esm.js:10:1
    at docs/webpack/bootstrap:19:1
    at docs/node_modules/algoliasearch/dist/algoliasearch.cjs.js:10:25
    at docs/webpack/bootstrap:19:1
    at docs/node_modules/algoliasearch/index.js:2:23
    at docs/webpack/bootstrap:19:1
    at docs/webpack/bootstrap:19:1
    at docs/.cache/_this_is_virtual_fs_path_/$virtual/sync-requires.js:7:49
    at docs/webpack/bootstrap:19:1
    at docs/.cache/static-entry.js:11:22
    at docs/node_modules/@algolia/client-search/dist/client-search.esm.js:576:10
    at docs/node_modules/@algolia/client-search/dist/client-search.esm.js:605:1
    at docs/node_modules/@algolia/client-search/dist/client-search.esm.js:441:1

   8 | const agentOptions = { keepAlive: true };
   9 | const defaultHttpAgent = new Agent(agentOptions);
> 10 | const defaultHttpsAgent = new Agent$1(agentOptions);
     | ^
  11 | function createNodeHttpRequester({ agent: userGlobalAgent, httpAgent: userHttpAgent, httpsAgent: userHttpsAgent, requesterOptions = {}, } = {}) {
  12 |     const httpAgent = userHttpAgent || userGlobalAgent || defaultHttpAgent;
  13 |     const httpsAgent = userHttpsAgent || userGlobalAgent || defaultHttpsAgent;

Also seeing the equivalent warning for http.Agent.

[daysm]

I'm experiencing the same after upgrading to Gatsby v3 / webpack 5.26

[Haroenv]

This really seems like a bug related to gabby / webpack trying to use the node version of algoliasearch for its browser build. Do you have a reproducible example?

I also saw this issue here https://github.com/algolia/gatsby-plugin-algolia where people suggested lazy-loading the algoliasearch (although that doesn't seem like a full solution)

Thanks for giving a reproducible example!

[graysonhicks]

Just a note that this is more that just a warning for Gatsby. Unsafe builtin usage will result in the loss of incremental builds. So if a site updates one page, the entire Gatsby site will have to rebuild instead of just that page because of axios here. I know on other Gatsby sites with this error, say using axios directly, the solution is to use native fetch.

[graysonhicks]

Also, this link describes the other way to fix this. (loadable-components to skip SSR being the other)

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html" || stage === "develop-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /algoliasearch/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

Then, you need to check if it's the browser before initializing Algolia. Exact usage depends on your componet.

const isBrowser = typeof window !== "undefined"

[Haroenv]

There's no axios usage, but it seems that the node version of algoliasearch is used instead of the browser version (if that was the one that you expect). Manually resolving to the dist browser version could help?

[graysonhicks]

The full error message as I was seeing is slightly different that the original posted above:

warning WebpackError: Unsafe builtin usage https.request
    at my_project-gatsby/node_modules/@algolia/client-search/dist/client-search.esm.js:129:1
    at my_project-gatsby/node_modules/@algolia/cache-in-memory/dist/cache-in-memory.esm.js:18:1
    at my_project-gatsby/node_modules/@algolia/client-recommendation/dist/client-recommendation.esm.js:9:18
    at my_project-gatsby/node_modules/axios/node_modules/follow-redirects/index.js:265:1
    at my_project-gatsby/node_modules/axios/node_modules/follow-redirects/index.js:387:1
    at my_project-gatsby/node_modules/axios/node_modules/follow-redirects/index.js:57:1
  264 |   var request = this._currentRequest =
    at my_project-gatsby/node_modules/@algolia/client-common/dist/client-common.esm.js:26:1
    at my_project-gatsby/node_modules/@algolia/client-recommendation/dist/client-recommendation.esm.js:9:18
    at my_project-gatsby/node_modules/@algolia/client-common/dist/client-common.esm.js:51:1
    at my_project-gatsby/node_modules/@algolia/client-analytics/dist/client-analytics.esm.js:59:1

Which looks like axios being brought in through Algolia. Not sure resolving to the browser version would help, as this is throwing the error while Gatsby is running SSR so anything that is client-side only in the browser version would also fail. Lazy-loading it, or not loading it at all during SSR via the webpack config above works for now.