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');

[manojadams]

I am facing this issue as well in my react-native project:
ERROR [Error: undefined Unable to resolve module @vercel/blob/client

[nikitapilgrim]

[maestrodrew]

Are there any known workarounds for this issue?

[kevtechi]

Still just using S3 instead of Vercel Blob because of this bug.

[luismeyer]

Please be aware that @vercel/blob is not really supporting react-native bundling yet. We are heavily relying on Node and Browser API's. In the future we need to consider adding the react-native export condition to provide valid shims.

That said we can help the Metro Bundler find the correct files by adding this Code to our metro.config.js file. This will work because we stubbed out some Node API's in order for the package to run in the Browser. For some Features (like upload progress) though we are relying on the Browser implementation. These might not work in an IOS or Android Environment.

You can check out a fully working repo here https://github.com/luismeyer/blob-expo-app/tree/main

// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require("expo/metro-config");

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);

config.resolver.resolveRequest = (context, moduleName, platform) => {
  const isBlob = context.originModulePath.includes("@vercel/blob");

  if (isBlob && moduleName === "stream") {
    const lookup = context.fileSystemLookup(
      "./node_modules/@vercel/blob/dist/stream-browser.js"
    );

    return {
      type: "sourceFile",
      filePath: lookup.realPath,
    };
  }

  if (isBlob && moduleName === "undici") {
    const lookup = context.fileSystemLookup(
      "./node_modules/@vercel/blob/dist/undici-browser.js"
    );

    return {
      type: "sourceFile",
      filePath: lookup.realPath,
    };
  }

  if (isBlob && moduleName === "crypto") {
    const lookup = context.fileSystemLookup(
      "./node_modules/@vercel/blob/dist/crypto-browser.js"
    );

    return {
      type: "sourceFile",
      filePath: lookup.realPath,
    };
  }

  return context.resolveRequest(context, moduleName, platform);
};

config.resolver.unstable_enablePackageExports = true;

module.exports = config;

[maestrodrew]

@luismeyer I tried your suggestion but I am seeing the attached error

[luismeyer]

@maestrodrew that might be the expo/metro version you are using. I am using the latest version for the working example. That said you don't necessarily need the fileSystemLookup function. You could also use fs to craft the absolute path to the file or use the relative path directly

if (isBlob && moduleName === "stream") {
  return {
    type: "sourceFile",
    filePath: "./node_modules/@vercel/blob/dist/stream-browser.js",
  };
}

if (isBlob && moduleName === "undici") {
  return {
    type: "sourceFile",
    filePath: "./node_modules/@vercel/blob/dist/undici-browser.js",
  };
}

if (isBlob && moduleName === "crypto") {
  return {
    type: "sourceFile",
    filePath: "./node_modules/@vercel/blob/dist/crypto-browser.js",
  };
}