`Unable to resolve module 'url'` when using `algoliasearch` in React Native with Metro bundler #1547

bruhmaa · 2024-09-06T04:31:24Z

🐛 Current behavior

I'm encountering an issue while using the algoliasearch package in a React Native app. The error occurs when Metro bundler tries to resolve the url module, which is not found within the project or node_modules.

Error:

Error: Unable to resolve module url from /Users/user/Documents/myapp/node_modules/@algolia/requester-node-http/src/echoRequester.ts: url could not be found within the project or in these directories:
  node_modules
  ../../../node_modules
> 1 | import { URL } from 'url';
    |                      ^
  2 |
  3 | import { createEchoRequester } from '@algolia/client-common';
  4 | import type { Requester } from '@algolia/client-common';
    at ModuleResolver.resolveDependency (/Users/user/Documents/myapp/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:178:15)
    at DependencyGraph.resolveDependency (/Users/user/Documents/myapp/node_modules/metro/src/node-haste/DependencyGraph.js:264:43)
    at Object.resolve (/Users/user/Documents/myapp/node_modules/metro/src/lib/transformHelpers.js:170:21)
    at resolveDependencies (/Users/user/Documents/myapp/node_modules/metro/src/DeltaBundler/graphOperations.js:466:33)
    at processModule (/Users/user/Documents/myapp/node_modules/metro/src/DeltaBundler/graphOperations.js:232:31)
    at async addDependency (/Users/user/Documents/myapp/node_modules/metro/src/DeltaBundler/graphOperations.js:361:18)
    at async Promise.all (index 0)
    at async processModule (/Users/user/Documents/myapp/node_modules/metro/src/DeltaBundler/graphOperations.js:279:3)
    at async addDependency (/Users/user/Documents/myapp/node_modules/metro/src/DeltaBundler/graphOperations.js:361:18)
    at async Promise.all (index 2)

The issue seems to be that React Native's Metro bundler cannot resolve the url module, which is part of Node.js' core modules. This problem occurs specifically in the file echoRequester.ts from the @algolia/requester-node-http package, which imports the URL class from url.

🔍 Steps to reproduce

Install dependencies:

yarn add algoliasearch react-instantsearch-core

Attempt to run a React Native app with Metro bundler on iOS.
The error appears during the bundling process, specifically when trying to resolve the url module.

Live reproduction

React InstantSearch

💭 Expected behavior

The algoliasearch package should not rely on Node.js core modules like url, which are not available in React Native environments.

Package version

algoliasearch Version: 5.2.5 - react-instantsearch-core Version: 7.13.0

Operating system

macOS 14.6.1

Browser

Google Chrome

Code of Conduct

I agree to follow this project's Code of Conduct

The text was updated successfully, but these errors were encountered:

dhayab · 2024-09-06T07:41:16Z

Hi, thanks for your report. I've transferred the issue to the relevant repository so the team can look at it.

In the meantime, you should be able to use algoliasearch@^4 without any issues.

shortcuts · 2024-09-06T08:20:06Z

Hey @bruhmaa do you use an old metro version maybe? It seems related to expo/expo#21896

Metro shouldn't resolve the node export but the browser one https://github.com/algolia/algoliasearch-client-javascript/blob/main/packages/algoliasearch/package.json#L30

alexphiev · 2024-09-07T13:15:34Z

Hi,

I have the same issue following the React Native tutorial and running the app using Expo Go inside an iOS simulator.

algoliasearch Version: 5.3.0 - react-instantsearch-core Version: 7.13.0

charithnidarsha · 2024-09-10T01:59:54Z

Im also facing the same issue in latest react native 0.75.2. Is there any solution?

"dependencies": {
  "algoliasearch": "^5.3.2"
  "react-instantsearch": "^7.13.0",
  "react-instantsearch-core": "^7.13.0",
  "react-native": "0.75.2",
},
"devDependencies": {
  "@babel/core": "^7.25.2",
  "@babel/preset-env": "^7.25.4",
  "@babel/runtime": "^7.25.6",
  "@react-native/babel-preset": "^0.75.2",
  "@react-native/eslint-config": "^0.75.2",
  "@react-native/metro-config": "^0.75.2",
  "@react-native/typescript-config": "0.75.2",
  "@tsconfig/react-native": "^3.0.5",
  "@types/jest": "^29.5.12",
  "@types/react": "^18.3.5",
  "@types/react-test-renderer": "^18.3.0",
  "babel-jest": "^29.7.0",
  "eslint": "^9.10.0",
  "jest": "^29.7.0",
  "prettier": "^3.3.3",
  "react-test-renderer": "18.3.1",
  "typescript": "5.6.2"
},
"jest": {
  "preset": "react-native"
},
"engines": {
  "node": ">=18"
},
"packageManager": "yarn@3.6.4"
}

shortcuts · 2024-09-10T17:35:33Z

Hey there, I'm releasing the 5.4.0 which should hopefully resolve this issue, don't hesitate to let me know if it's not the case!

charithnidarsha · 2024-09-11T01:37:49Z

hello , thanks for the update. However issue still remains same.

error: Error: Unable to resolve module http from /Volumes/DATA/projects/pola/app/node_modules/@algolia/requester-node-http/src/createHttpRequester.ts: http could not be found within the project or in these directories:
node_modules

1 | import http from 'http';
| ^
2 | import https from 'https';
3 | import { URL } from 'url';
4 |
at ModuleResolver.resolveDependency (/Volumes/DATA/projects/pola/app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:139:15)
at DependencyGraph.resolveDependency (/Volumes/DATA/projects/pola/app/node_modules/metro/src/node-haste/DependencyGraph.js:232:43)
at /Volumes/DATA/projects/pola/app/node_modules/metro/src/lib/transformHelpers.js:156:21
at resolveDependencies (/Volumes/DATA/projects/pola/app/node_modules/metro/src/DeltaBundler/buildSubgraph.js:42:25)
at visit (/Volumes/DATA/projects/pola/app/node_modules/metro/src/DeltaBundler/buildSubgraph.js:83:30)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Promise.all (index 0)
at async visit (/Volumes/DATA/projects/pola/app/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)
at async Promise.all (index 2)
at async visit (/Volumes/DATA/projects/pola/app/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)
BUNDLE ./index.js

"dependencies": {
"@gorhom/bottom-sheet": "^4.6.4",
"@invertase/react-native-apple-authentication": "^2.3.0",
"@payhere/payhere-mobilesdk-reactnative": "^4.0.14",
"@react-native-async-storage/async-storage": "^2.0.0",
"@react-native-community/datetimepicker": "^8.2.0",
"@react-native-community/geolocation": "^3.4.0",
"@react-native-community/netinfo": "^11.3.2",
"@react-native-community/push-notification-ios": "^1.11.0",
"@react-native-community/toolbar-android": "^0.2.1",
"@react-native-firebase/analytics": "20.4.0",
"@react-native-firebase/app": "^20.4.0",
"@react-native-firebase/auth": "^20.4.0",
"@react-native-firebase/crashlytics": "^20.4.0",
"@react-native-firebase/database": "^20.4.0",
"@react-native-firebase/dynamic-links": "^20.4.0",
"@react-native-firebase/firestore": "^20.4.0",
"@react-native-firebase/in-app-messaging": "^20.4.0",
"@react-native-firebase/messaging": "^20.4.0",
"@react-native-firebase/perf": "^20.4.0",
"@react-native-google-signin/google-signin": "^13.0.1",
"@react-native-masked-view/masked-view": "^0.3.1",
"@react-native-segmented-control/segmented-control": "^2.5.2",
"@react-navigation/bottom-tabs": "^6.6.1",
"@react-navigation/core": "^6.4.17",
"@react-navigation/native": "^6.1.18",
"@react-navigation/native-stack": "^6.11.0",
"add": "^2.0.6",
"axios": "^1.7.7",
"babel-plugin-transform-remove-console": "^6.9.4",
"base-64": "^1.0.0",
"formik": "^2.4.6",
"immer": "^9.0.21",
"jwt-decode": "^4.0.0",
"libphonenumber-js": "^1.11.8",
"lodash": "^4.17.21",
"lottie-react-native": "^6.7.2",
"moment": "^2.30.1",
"prop-types": "^15.8.1",
"react": "18.3.1",
"algoliasearch": "^5.4.0",
"react-instantsearch": "^7.13.1",
"react-instantsearch-core": "^7.13.1",
"react-native": "0.75.2",
"react-native-animated-dots-carousel": "^1.0.2",
"react-native-blob-util": "^0.19.11",
"react-native-collapsible": "^1.6.2",
"react-native-config": "^1.5.3",
"react-native-device-info": "^11.1.0",
"react-native-dots-pagination": "^0.3.1",
"react-native-draggable-flatlist": "^4.0.1",
"react-native-elements": "^3.4.3",
"react-native-fast-image": "^8.6.3",
"react-native-fbsdk-next": "^12.2.0",
"react-native-fs": "^2.20.0",
"react-native-gesture-handler": "^2.19.0",
"react-native-get-random-values": "^1.11.0",
"react-native-gifted-charts": "^1.4.33",
"react-native-gifted-chat": "^2.6.2",
"react-native-google-places-autocomplete": "^2.5.6",
"react-native-image-crop-picker": "^0.41.2",
"react-native-image-viewing": "^0.2.2",
"react-native-linear-gradient": "^2.8.3",
"react-native-map-link": "^3.6.1",
"react-native-maps": "^1.18.0",
"react-native-modal-datetime-picker": "^18.0.0",
"react-native-otp-textinput": "^1.1.6",
"react-native-pdf": "^6.7.5",
"react-native-quick-md5": "^3.0.6",
"react-native-rate": "^1.2.12",
"react-native-reanimated": "^3.15.1",
"react-native-reanimated-carousel": "^3.5.1",
"react-native-recaptcha-that-works": "^2.0.0",
"react-native-render-html": "^6.3.4",
"react-native-responsive-fontsize": "^0.5.1",
"react-native-safe-area-context": "^4.11.0",
"react-native-screens": "^3.34.0",
"react-native-share": "^11.0.2",
"react-native-star-rating-widget": "^1.9.1",
"react-native-step-indicator": "^1.0.3",
"react-native-svg": "^15.6.0",
"react-native-toast-message": "^2.2.0",
"react-native-uuid": "^2.0.2",
"react-native-vector-icons": "^10.1.0",
"react-native-walkthrough-tooltip": "^1.6.0",
"react-native-webview": "^13.12.2",
"react-redux": "^9.1.2",
"redux": "^5.0.1",
"redux-saga": "^1.3.0",
"redux-saga-routines": "^3.2.3",
"reselect": "^5.1.1",
"yarn": "^1.22.22",
"yup": "^1.4.0"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@babel/preset-env": "^7.25.4",
"@babel/runtime": "^7.25.6",
"@react-native/babel-preset": "^0.75.2",
"@react-native/eslint-config": "^0.75.2",
"@react-native/metro-config": "^0.75.2",
"@react-native/typescript-config": "0.75.2",
"@tsconfig/react-native": "^3.0.5",
"@types/jest": "^29.5.12",
"@types/react": "^18.3.5",
"@types/react-test-renderer": "^18.3.0",
"babel-jest": "^29.7.0",
"eslint": "^9.10.0",
"jest": "^29.7.0",
"prettier": "^3.3.3",
"react-test-renderer": "18.3.1",
"typescript": "5.6.2"
},

shortcuts · 2024-09-11T09:28:56Z

hello , thanks for the update. However issue still remains same.

error: Error: Unable to resolve module http from /Volumes/DATA/projects/pola/app/node_modules/@algolia/requester-node-http/src/createHttpRequester.ts: http could not be found within the project or in these directories: node_modules

Seems like a resolution issue? https://metrobundler.dev/docs/package-exports/

charithnidarsha · 2024-09-11T16:51:27Z

hello , thanks for the update. However issue still remains same.
error: Error: Unable to resolve module http from /Volumes/DATA/projects/pola/app/node_modules/@algolia/requester-node-http/src/createHttpRequester.ts: http could not be found within the project or in these directories: node_modules

Seems like a resolution issue? https://metrobundler.dev/docs/package-exports/

Hello, i reinstalled all yarn packages and still the issue persists. any suggestions?

shortcuts · 2024-09-11T18:29:38Z

Hey @charithnidarsha, have you enabled the option here https://metrobundler.dev/docs/package-exports/#configuration-options?

charithnidarsha · 2024-09-12T01:31:25Z

Hey @charithnidarsha, have you enabled the option here https://metrobundler.dev/docs/package-exports/#configuration-options?

my metro.config file is as below.

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

/**

Metro configuration
- https://reactnative.dev/docs/metro
@type {import('metro-config').MetroConfig}
*/

const config = {
resolver: {
unstable_enablePackageExports: true,
unstable_conditionNames: ['react-native', 'require', 'import'],
unstable_conditionsByPlatform: ['ios'],
},
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

Now the error is

error: Error: Unable to resolve module url from /Volumes/DATA/projects/pola/app/node_modules/axios/dist/node/axios.cjs: url could not be found within the project or in these directories:
node_modules
3 |
4 | const FormData$1 = require('form-data');

5 | const url = require('url');
| ^
6 | const proxyFromEnv = require('proxy-from-env');
7 | const http = require('http');
8 | const https = require('https');
at ModuleResolver.resolveDependency (/Volumes/DATA/projects/pola/app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:139:15)
at DependencyGraph.resolveDependency (/Volumes/DATA/projects/pola/app/node_modules/metro/src/node-haste/DependencyGraph.js:232:43)
at /Volumes/DATA/projects/pola/app/node_modules/metro/src/lib/transformHelpers.js:156:21
at resolveDependencies (/Volumes/DATA/projects/pola/app/node_modules/metro/src/DeltaBundler/buildSubgraph.js:42:25)
at visit (/Volumes/DATA/projects/pola/app/node_modules/metro/src/DeltaBundler/buildSubgraph.js:83:30)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Promise.all (index 2)
at async visit (/Volumes/DATA/projects/pola/app/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)
at async Promise.all (index 3)
at async visit (/Volumes/DATA/projects/pola/app/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)

shortcuts · 2024-09-17T12:57:43Z

Hey @charithnidarsha, we don't use axios in this repository so I guess it's related to an other package?

dhayab transferred this issue from algolia/instantsearch Sep 6, 2024

shortcuts mentioned this issue Sep 10, 2024

feat(javascript): add requester-testing package algolia/api-clients-automation#3684

Merged

shortcuts closed this as completed in algolia/api-clients-automation#3684 Sep 10, 2024

giantslogik mentioned this issue Sep 17, 2024

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

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`Unable to resolve module 'url'` when using `algoliasearch` in React Native with Metro bundler #1547

`Unable to resolve module 'url'` when using `algoliasearch` in React Native with Metro bundler #1547

bruhmaa commented Sep 6, 2024

dhayab commented Sep 6, 2024

shortcuts commented Sep 6, 2024

alexphiev commented Sep 7, 2024

charithnidarsha commented Sep 10, 2024

shortcuts commented Sep 10, 2024

charithnidarsha commented Sep 11, 2024

shortcuts commented Sep 11, 2024

charithnidarsha commented Sep 11, 2024

shortcuts commented Sep 11, 2024

charithnidarsha commented Sep 12, 2024

shortcuts commented Sep 17, 2024

Unable to resolve module 'url' when using algoliasearch in React Native with Metro bundler #1547

Unable to resolve module 'url' when using algoliasearch in React Native with Metro bundler #1547

Comments

bruhmaa commented Sep 6, 2024

🐛 Current behavior

🔍 Steps to reproduce

Live reproduction

💭 Expected behavior

Package version

Operating system

Browser

Code of Conduct

dhayab commented Sep 6, 2024

shortcuts commented Sep 6, 2024

alexphiev commented Sep 7, 2024

charithnidarsha commented Sep 10, 2024

shortcuts commented Sep 10, 2024

charithnidarsha commented Sep 11, 2024

shortcuts commented Sep 11, 2024

charithnidarsha commented Sep 11, 2024

shortcuts commented Sep 11, 2024

charithnidarsha commented Sep 12, 2024

shortcuts commented Sep 17, 2024

`Unable to resolve module 'url'` when using `algoliasearch` in React Native with Metro bundler #1547

`Unable to resolve module 'url'` when using `algoliasearch` in React Native with Metro bundler #1547