Expo SDK39: Unable to resolve "module" from "node_modules/esm/esm.js"

Expo SDK
1

Hi,

I just upgraded to SDK 39 from SDK38, I tried to run my app in the iOS emulator and I get a red screen with this error message:

Failed building JavaScript bundle.
Unable to resolve “module” from “node_modules/esm/esm.js”

I have tried to upgrade or downgrade different versions but I just can’t get it to work. I have not installed esm myself, and the only piece that requires it is “blob” which is not something I installed but I assume is a dependency on something else. Seems to be something around webpack or so…(I lack knowledge here though, so I don’t know).

Does anyone know what I can do to solve this?

These are my package.json:

“dependencies”: {
“@apollo/client”: “^3.2.1”,
“@react-native-community/async-storage”: “~1.12.0”,
“@react-native-community/datetimepicker”: “^3.0.0”,
“@react-native-community/masked-view”: “0.1.10”,
“@react-navigation/drawer”: “^5.9.1”,
“@react-navigation/material-bottom-tabs”: “^5.2.17”,
“@react-navigation/native”: “^5.7.4”,
“@react-navigation/stack”: “^5.9.1”,
“apollo-cache-persist”: “^0.1.1”,
“axios”: “^0.20.0”,
“esm”: “^3.2.25”,
“expo”: “^39.0.3”,
“expo-blur”: “~8.2.0”,
“expo-image-picker”: “~9.1.1”,
“expo-notifications”: “~0.7.2”,
“expo-secure-store”: “~9.2.0”,
“expo-splash-screen”: “~0.6.1”,
“expo-updates”: “~0.3.4”,
“fuse.js”: “^6.4.1”,
“graphql”: “^15.3.0”,
“jwt-decode”: “^2.2.0”,
“lodash”: “^4.17.20”,
“nhost-js-sdk”: “^2.2.3”,
“react”: “16.13.1”,
“react-dom”: “16.13.1”,
“react-native”: “https://github.com/expo/react-native/archive/sdk-39.0.0.tar.gz”,
“react-native-expo-image-cache”: “^4.1.0”,
“react-native-fast-toast”: “^1.0.9”,
“react-native-gesture-handler”: “^1.7.0”,
“react-native-keyboard-aware-scroll-view”: “^0.9.2”,
“react-native-paper”: “^4.2.0”,
“react-native-progress”: “^4.1.2”,
“react-native-reanimated”: “~1.13.1”,
“react-native-safe-area-context”: “^3.1.4”,
“react-native-screens”: “^2.10.1”,
“react-native-svg”: “12.1.0”,
“react-native-svg-transformer”: “^0.14.3”,
“react-native-swiper”: “next”,
“react-native-switch-selector”: “^2.0.6”,
“react-native-vector-icons”: “^7.1.0”,
“react-native-web”: “~0.13.14”,
“react-navigation”: “^4.4.1”,
“sentry-expo”: “^2.1.2”
},
“devDependencies”: {
“@babel/core”: “^7.11.6”,
“babel-preset-expo”: “^8.3.0”
},

2

Have you tried deleting your node_modules folder and then re-installing all npms with npm install?

Also, when running expo you might try: expo start -c to force a clear of the Metro cache.

3

Thanks a lot for the reply Greg! I tried your suggestions, both of them, unfortunately no difference. I still get the red screen error and can’t build the bundle to run it on the iOS emulator…

image
image626×1234 191 KB

4

Have you tried following the 4 steps that the red box suggests?

5

Hi Greg,

I did, didn’t work unfortunately. This was my mistake though, it was another package that started using Blob in the recent patch and it got updated when I upgraded to SDK 39. So I reverted back to pre-Blob version and now it works. I am following up with the author of that package to figure out how to fix this.

Thank you so much for your help!

6

I was working on blob-related code last night. I ended up moving to the expo/examples approach for converting images from ImagePicker and from Expo-Pixi. That example code is seen here.

Prior to this I had tried fetch() with varying results on iOS vs. Android, on SDK38 vs. SDK39, etc. With this code, all is working consistently (and so far correctly) :slight_smile:

1 Like
7

@greg.fenton
Your code in iOS with sdk 39 returns [Unhandled promise rejection: TypeError: Network request failed], in android it works fine, however with this function urlToBlob

export const urlToBlob = (url) => {
  return new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.onerror = reject;
      xhr.onreadystatechange = () => {
          if (xhr.readyState === 4) {
              resolve(xhr.response);
          }
      };
      xhr.open('GET', url);
      xhr.responseType = 'blob';
      xhr.send();
  })
}

introduces the image in firebase storage but with application/octet-stream format and 0 byte and it is displayed on the client as a transparent image.
Do you know any solution for this?

8

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.