[bug]: React Native: Unable to resolve module http from node_modules/@algolia/requester-node-http/src/createHttpRequester.ts:

[giantslogik]

Description

With
"algoliasearch": "^5.4.3",
"react-instantsearch-core": "^7.13.1",
"react-native": "0.73.6"

the algolia client fails with:

Unable to resolve module http from src/mobile-app/node_modules/@algolia/requester-node-http/src/createHttpRequester.ts: http could not be found within the project or in these directories:
  node_modules
  ../../node_modules
> 1 | import http from 'http';
    |                   ^
  2 | import https from 'https';
  3 | import { URL } from 'url';
  4 |

This worked previously with "algoliasearch": "^4.23.3" and "react-instantsearch-hooks": "^6.33.0"

It appears that the algoliasearch 5 , package is no longer compatible with react native.

This is the same error as #1547 which is incorrectly closed.

Client

Search

Version

5.4.3

Relevant log output

Unable to resolve module http from src/mobile-app/node_modules/@algolia/requester-node-http/src/createHttpRequester.ts: http could not be found within the project or in these directories:
  node_modules
  ../../node_modules
> 1 | import http from 'http';
    |                   ^
  2 | import https from 'https';
  3 | import { URL } from 'url';
  4 |

[shortcuts]

Hey, the client should still be compatible but it leverages package.json#exports field, which is an opt-in metro option

Does it make it work if you enable it?

[giantslogik]

Does not work. It crashes elsewhere which isn't surprising, given that is an unstable and experimental feature.
Does "algoliasearch": "^4.23.3" have better react-native support ? Is this on the roadmap for 5.x ?

[Haroenv]

@shortcuts, you can probably add a react-native (same as browser probably, XHR works in RN) entry point as for some reason the browser entry point isn't taken any more.

as a workaround for now you can of course use v4 still @giantslogik or add an alias to the browser entry point

[giantslogik]

@Haroenv can you elaborate on add an alias to the browser entry point.

I'm migrating away from v4 as it subtly broke my React Native environment by introducing dom types into the react native typescript environment.

[shortcuts]

Does "algoliasearch": "^4.23.3" have better react-native support ?

Yes, it uses the old package.json entrypoints so it should work by default with rn

Is this on the roadmap for 5.x ?

Definitely, mostly @Haroenv suggested, but I was wondering it this could just stay on the bundler side rather than the library side

you can probably add a react-native (same as browser probably, XHR works in RN) entry point as for some reason the browser entry point isn't taken any more.

yup it seems like a requirement, I'll try to see on the expo side as well if there's a consensus before

[giantslogik]

@shortcuts It can't stay on the bundler side, as any bundler options would need to be compatible with every commonly used react native library out there. And it shouldn't need an experimental /unstable feature .

There are other issues with React native support that i will ticket as well. (that have existed from 4.x atleast )

[InefableKoumba]

I am experiencing the same bug.

[InefableKoumba]

Downgrading to "algoliasearch": "^5.2.3" has resolved the issue.

[shortcuts]

hey @InefableKoumba thanks for reporting :)

as per their doc, the browser field at the root is looked up when resolving modules, so algolia/api-clients-automation#3767 should provide a fix for this!

[shortcuts]

Hey, 5.5.0 should have this fixed :)

[FXStreetDeveloper]

Hey there! 5.5.0 version does not fix the bug for me

[Haroenv]

@FXStreetDeveloper, do you still get the same error message? maybe a repo that can be reproduced?

[FXStreetDeveloper]

@FXStreetDeveloper, do you still get the same error message? maybe a repo that can be reproduced?

This is the error I have:

Unable to resolve module http from
/Users/user/development/App/node_modules/@algolia/requester-node-http/src/createHttpRequester.ts: http could
not be found within the project or in these directories:
node_modules
../../node_modules
\^[[0m\^[[31m\^[[1m>\^[[22m\^[[39m\^[[90m 1 |\^[[39m \^[[36mimport\^[[39m http \^[[36mfrom\^[[39m
\^[[32m'http'\^[[39m\^[[33m;\^[[39m
\^[[90m   |\^[[39m                   \^[[31m\^[[1m^\^[[22m\^[[39m
\^[[90m 2 |\^[[39m \^[[36mimport\^[[39m https \^[[36mfrom\^[[39m \^[[32m'https'\^[[39m\^[[33m;\^[[39m
\^[[90m 3 |\^[[39m \^[[36mimport\^[[39m { \^[[33mURL\^[[39m } \^[[36mfrom\^[[39m
\^[[32m'url'\^[[39m\^[[33m;\^[[39m
\^[[90m 4 |\^[[39m\^[[0m
The package at "node_modules/@algolia/requester-node-http/src/createHttpRequester.ts" attempted to import the Node standard library module "http".
It failed because the native React runtime does not include the Node standard library.
Learn more: https://docs.expo.dev/workflow/using-libraries/#using-third-party-libraries

The code:

import { liteClient as algoliasearch } from 'algoliasearch/lite';

// Other piece of code...

const searchClient = useMemo(() => {
	return algoliasearch(algoliaConfig.appId, algoliaConfig.key);
}, [algoliaConfig.appId, algoliaConfig.key]);

And the dependencies:

{
	"@algolia/client-search": "^5.5.0",
	"instantsearch.css": "^8.5.1",
	"react-instantsearch-core": "^7.13.1",
	"react-native": "0.74.5",
	"expo": "~51.0.32"
}

[shortcuts]

ahhhhh I guess this https://github.com/algolia/algoliasearch-client-javascript/blob/main/packages/algoliasearch/package.json#L62 should be

{
  "react-native": {
    ".": "./dist/browser.js",
    "./lite": "./dist/lite/builds/browser.js"
  }
}

[FXStreetDeveloper]

ahhhhh I guess this https://github.com/algolia/algoliasearch-client-javascript/blob/main/packages/algoliasearch/package.json#L62 should be

{
  "react-native": {
    ".": "./dist/browser.js",
    "./lite": "./dist/lite/builds/browser.js"
  }
}

Alright, so a new fix must be submitted I guess? Thanks for the quick reply!

[shortcuts]

yup I think algolia/api-clients-automation#3771 should do it, thanks for testing it :D

[shortcuts]

hey, i'm releasing the fix in 5.5.1

[FXStreetDeveloper]

It works like a charm! Just had to clean the ios/android/node_modules folders to make it work. Thanks for the quick fix!