Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Unable to construct a new Blob() #35042

Closed
cshfang opened this issue Oct 21, 2022 · 5 comments
Closed

Unable to construct a new Blob() #35042

cshfang opened this issue Oct 21, 2022 · 5 comments
Labels
Resolution: PR Submitted A pull request with a fix has been provided. Stale There has been a lack of activity on this issue and it may be closed soon. Type: New Architecture Issues and PRs related to new architecture (Fabric/Turbo Modules)

Comments

@cshfang
Copy link

cshfang commented Oct 21, 2022

Description

After creating a React Native app with the new architecture enabled, using the global Blob() constructor resulted in the following error: Invariant Violation: NativeBlobModule is available. This was reproducible in the following combinations:

Platform React Native version New architecture enabled? Blob() available?
iOS 0.70.3 Yes ❌
Android 0.70.3 Yes ✅
iOS 0.68.4 Yes ❌
iOS 0.70.3 No ✅
Android 0.70.3 No ✅
iOS 0.68.4 No ✅

As a result of this global Blob() being unavailable, the blob() method in whatwg-fetch polyfill is also now missing from Requests/Responses since the library first checks for Blob support.

Version

0.70.3, 0.68-stable

Output of npx react-native info

info Fetching system and libraries information...
System:
OS: macOS 12.5.1
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 2.47 GB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.18.0 - ~/.nvm/versions/node/v16.18.0/bin/node
Yarn: 1.22.17 - ~/.yarn/bin/yarn
npm: 8.19.2 - ~/.nvm/versions/node/v16.18.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.11.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 21.4, iOS 16.0, macOS 12.3, tvOS 16.0, watchOS 9.0
Android SDK:
API Levels: 28, 30, 31, 32
Build Tools: 28.0.3, 29.0.2, 30.0.2, 30.0.3, 31.0.0
System Images: android-30 | Google APIs Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 2021.3 AI-213.7172.25.2113.9123335
Xcode: 14.0.1/14A400 - /usr/bin/xcodebuild
Languages:
Java: 12.0.2 - /Library/Java/JavaVirtualMachines/jdk-12.0.2.jdk/Contents/Home/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.1.0 => 18.1.0
react-native: 0.70.3 => 0.70.3
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

  1. Create a new React Native application via the CLI
  2. Enable the new architecture
  3. Try to create a new Blob()

Snack, code example, screenshot, or link to a repository

const App = () => {
  useEffect(() => {
    try {
      new Blob();
    } catch (e) {
      console.log(e); // [Invariant Violation: NativeBlobModule is available.]
    }
  });

  return null;
};
@cshfang cshfang added Needs: Triage 🔍 Type: New Architecture Issues and PRs related to new architecture (Fabric/Turbo Modules) labels Oct 21, 2022
@cshfang cshfang mentioned this issue Oct 21, 2022
Closed
3 tasks
@ecreeth
Copy link
Contributor

ecreeth commented Oct 21, 2022

#35047

@andrestone andrestone mentioned this issue Oct 21, 2022
Closed
@cortinico cortinico added Resolution: PR Submitted A pull request with a fix has been provided. and removed Needs: Triage 🔍 labels Oct 24, 2022
facebook-github-bot pushed a commit that referenced this issue Oct 27, 2022
@andrestone @facebook-github-bot
feat: make RCTBlobManager TurboModule-compatible (#35047)
279cfec 
Summary:
Currently, RCTBlobManager (the native module for Blob support) cannot be loaded on iOS when the new architecture is enabled.

## Changelog

[General] [Added] - `BlobModule` to `RCTCoreModulesClassProvider`

Pull Request resolved: #35047

Test Plan:
The snippet below can be used to test Blob support with the new architecture enabled.

```
// App.tsx
import { useEffect } from 'react';
import { View } from 'react-native';
function uriToBlob(uri: any) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = () => {
      const blob = xhr.response;
      resolve(blob);
    };
    xhr.onerror = err => {
      reject(err);
    };
    xhr.open('GET', uri);
    xhr.send();
  });
}

export default function App() {
  useEffect(() => {
    uriToBlob('https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');
  });
  return <View />;
}

```

Related issue: #35042

Reviewed By: NickGerleman

Differential Revision: D40716048

Pulled By: cipolleschi

fbshipit-source-id: 17643d230fa7ea83baee363d137d51f87818baa8
@cshfang
Copy link
Author

cshfang commented Dec 8, 2022

Since the above PR was merged and reverted, can someone confirm that this is still being looked at for 0.71 per this comment by @cipolleschi ?

@cipolleschi
Copy link
Contributor

The right fix has been merged in 0.71 (which will be released in a few weeks). From the OSS perspective, the commit looks the same, but we have to update an internal script to properly generate those lines.

OlimpiaZurek pushed a commit to OlimpiaZurek/react-native that referenced this issue May 22, 2023
@andrestone @OlimpiaZurek
feat: make RCTBlobManager TurboModule-compatible (facebook#35047)
d0b49a6 
Summary:
Currently, RCTBlobManager (the native module for Blob support) cannot be loaded on iOS when the new architecture is enabled.

## Changelog

[General] [Added] - `BlobModule` to `RCTCoreModulesClassProvider`

Pull Request resolved: facebook#35047

Test Plan:
The snippet below can be used to test Blob support with the new architecture enabled.

```
// App.tsx
import { useEffect } from 'react';
import { View } from 'react-native';
function uriToBlob(uri: any) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = () => {
      const blob = xhr.response;
      resolve(blob);
    };
    xhr.onerror = err => {
      reject(err);
    };
    xhr.open('GET', uri);
    xhr.send();
  });
}

export default function App() {
  useEffect(() => {
    uriToBlob('https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');
  });
  return <View />;
}

```

Related issue: facebook#35042

Reviewed By: NickGerleman

Differential Revision: D40716048

Pulled By: cipolleschi

fbshipit-source-id: 17643d230fa7ea83baee363d137d51f87818baa8
@github-actions
Copy link

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

@github-actions github-actions bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Jul 27, 2023
@github-actions
Copy link

github-actions bot commented Aug 3, 2023

This issue was closed because it has been stalled for 7 days with no activity.

@github-actions github-actions bot closed this as completed Aug 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Resolution: PR Submitted A pull request with a fix has been provided. Stale There has been a lack of activity on this issue and it may be closed soon. Type: New Architecture Issues and PRs related to new architecture (Fabric/Turbo Modules)
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@cortinico @cshfang @cipolleschi @ecreeth