Unable to resolve "@vercel/blob/client"

[tryzeno]

Using React Native with Expo and ran yarn add @vercel/blob. When I try to do:

import { upload } from "@vercel/blob/client";
 const newBlob = await upload(name, buffer....

I get:

Unable to resolve "@vercel/blob/client" from "screens/HomeScreen.tsx"

Version:

"@vercel/blob": "^0.15.1",

[correttojs]

hey @tryzeno, I just tested "@vercel/blob": "^0.15.1" and it seems to work well. Could you please share a full repro? The issue could be in the tscofing.json or in other configuration settings

[tryzeno]

Steps:

1. Create new expo ts project: yarn create expo-app -t expo-template-blank-typescript
2. Install "@vercel/blob": "^0.15.1"
3. Change App.tsx to this

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import { upload } from "@vercel/blob/client";

export default function App() {
  return (
    <View style={styles.container}>
      <Text
        onPress={() => {
          upload(...);
        }}
      >
        Open up App.tsx to start working on your app!
      </Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

Just writing upload in there causes the error, you don't need to setup a whole api route or anything. Let me know if you are unable to replicate.

[correttojs]

I successfully executed expo start --web, I even uploaded some content

[luismeyer]

closing this since no update since 2 months. If the issue still exists feel free to reopen

[olivierlesnicki]

@correttojs it doesn't work with ios though

[luismeyer]

I found if you add:

"resolver": {
    "unstable_enablePackageExports": true
}

to your metro config, the bundler can correctly resolve the @vercel/blob/client import. This is needed because @vercel/blob relies on the exports field in the pjson.

This leads to a different error for me though where import * as crypto from "crypto" can't be resolved. Here it seems like the module resolution is wrong again. It's trying to import from node_modules/@vercel/dist/crypto-browser.js where the real path would be node_modules/@vercel/blob/dist/crypto-browser.js.

If you also run into this issue it might be worth opening an issue in expo or metro

[sajeeIfonix]

Using React Native with Expo and ran yarn add @vercel/blob. When I try to do:

import { upload } from "@vercel/blob/client";
 const newBlob = await upload(name, buffer....

I get:

Unable to resolve "@vercel/blob/client" from "screens/HomeScreen.tsx"

Version:

"@vercel/blob": "^0.15.1",

I too am getting this error in my react-native project (Expo CNG)

[vvo]

@sajeeIfonix Can you bring this issue over to the expo repository? Our package.json is correct as per https://arethetypeswrong.github.io/?p=%40vercel%2Fblob%400.22.3 so I suspect something is wrong with expo/expo setup here. It would be awesome to find out what 🙏

[kevtechi]

@sajeeIfonix Can you bring this issue over to the expo repository? Our package.json is correct as per https://arethetypeswrong.github.io/?p=%40vercel%2Fblob%400.22.3 so I suspect something is wrong with expo/expo setup here. It would be awesome to find out what 🙏

Thanks for looking into this. I guess we'll use AWS S3 until this issue is resolved.

[60pfennig]

Hey, this problem still persists and it doesn't look like anyone is working on it on metro side. Just as hint for the vercel team that this issue leads to unuseablity of vercel/blob for all expo users who want to upload from their app via the vercel/blob package.

Edit: The linked issue describes excactly the problem I have while the initial issue seems to differ. So I'm not sure if this are different causes. For completness my error log:

Metro error: Unable to resolve module undici from node_modules/@vercel/blob/dist/chunk-RHJI2NPC.cjs:

None of these files exist:
  * node_modules/@vercel/dist/undici-browser.js(.web.ts|.ts|.web.tsx|.tsx|.web.js|.js|.web.jsx|.jsx|.web.json|.json|.web.cjs|.cjs|.web.mjs|.mjs|.web.scss|.scss|.web.sass|.sass|.web.css|.css)
  * node_modules/@vercel/dist/undici-browser.js
  31 |
  32 | // src/api.ts
> 33 | var _undici = require('undici');