Repository navigation
fix: replace buffer decoding with atob - #2808
Conversation
- Remove Buffer dependency to avoid polyfill issues - Use atob() and TextDecoder for base64 decoding - Improve React Native compatibility
|
Would be nice to get this merged, just ran into #2701 as well on the latest Expo (55 preview 8) and React Native. In my case it was triggered by heroui-native using I've manually patched the files this PR updated for now, which got it working again. |
|
@Tehnix one hour behind you. experiencing the same exact issue. Would you mind sharing your patch? |
|
I'm experiencing the same issue. Using iOS Bundling failed 1058ms index.ts (1996 modules)
The package at "node_modules/react-native-svg/src/utils/fetchData.ts" attempted to import the Node standard library module "buffer".
It failed because the native React runtime does not include the Node standard library.
Learn more
1 | import { Platform } from 'react-native';
> 2 | import { Buffer } from 'buffer';
| ^
3 |
4 | export async function fetchText(uri?: string): Promise<string | null> {
5 | if (!uri) {
Import stack:
node_modules/react-native-svg/src/utils/fetchData.ts
| import "buffer"
|
|
@branaust here's the patch file I created from the changes in this PR. It fixes the issue on my side. |
|
It seems like this issue was obscured by the phantom dependency. I believe this needs to be addressed. |
|
Hey, @jakex7 Could you review this PR ? |
same |
|
@branaust for sure (sorry, only just saw this now)! In package.json (at least if using bun): // ..rest of your content..
"patchedDependencies": {
"react-native-svg@15.15.2": "patches/react-native-svg@15.15.2.patch"
},
}You may need to adjust the version The patch, put into diff --git a/lib/commonjs/utils/fetchData.js b/lib/commonjs/utils/fetchData.js
index 207b2937d048ca9c22b58dd7be3641b5a7262274..ccfe0bf6e54eb9c68146bae1a0cec0592c1a14a1 100644
--- a/lib/commonjs/utils/fetchData.js
+++ b/lib/commonjs/utils/fetchData.js
@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
});
exports.fetchText = fetchText;
var _reactNative = require("react-native");
-var _buffer = require("buffer");
async function fetchText(uri) {
if (!uri) {
return null;
@@ -21,9 +20,8 @@ async function fetchText(uri) {
const decodeBase64Image = uri => {
const decoded = decodeURIComponent(uri);
const splitContent = decoded.split(';')[1].split(',');
- const dataType = splitContent[0];
const content = splitContent.slice(1).join(',');
- return _buffer.Buffer.from(content, dataType).toString('utf-8');
+ return atob(content);
};
function dataUriToXml(uri) {
try {
diff --git a/lib/module/utils/fetchData.js b/lib/module/utils/fetchData.js
index 12b68966cbcfd9a18cae66824dfe7aec60d14a80..2dbfd8e2c00abdf878d9ca931b7f97919945d1df 100644
--- a/lib/module/utils/fetchData.js
+++ b/lib/module/utils/fetchData.js
@@ -1,5 +1,4 @@
import { Platform } from 'react-native';
-import { Buffer } from 'buffer';
export async function fetchText(uri) {
if (!uri) {
return null;
@@ -15,9 +14,8 @@ export async function fetchText(uri) {
const decodeBase64Image = uri => {
const decoded = decodeURIComponent(uri);
const splitContent = decoded.split(';')[1].split(',');
- const dataType = splitContent[0];
const content = splitContent.slice(1).join(',');
- return Buffer.from(content, dataType).toString('utf-8');
+ return atob(content);
};
function dataUriToXml(uri) {
try {
diff --git a/src/utils/fetchData.ts b/src/utils/fetchData.ts
index d141be31c924bd1d3ec287ad4e291db018b4bb72..afbe59fd8ad946d02db3a2bbf27d0e808811c9f0 100644
--- a/src/utils/fetchData.ts
+++ b/src/utils/fetchData.ts
@@ -1,5 +1,4 @@
import { Platform } from 'react-native';
-import { Buffer } from 'buffer';
export async function fetchText(uri?: string): Promise<string | null> {
if (!uri) {
@@ -17,10 +16,9 @@ export async function fetchText(uri?: string): Promise<string | null> {
const decodeBase64Image = (uri: string) => {
const decoded = decodeURIComponent(uri);
const splitContent = decoded.split(';')[1].split(',');
- const dataType = splitContent[0] as BufferEncoding;
const content = splitContent.slice(1).join(',');
- return Buffer.from(content, dataType).toString('utf-8');
+ return atob(content);
};
function dataUriToXml(uri: string): string | null { |
jakex7
left a comment
jakex7
left a comment
There was a problem hiding this comment.
Thank you for your contribution!
Same issue on my side with SDK 55 beta: Edit: OK with version 15.15.3. |
Summary
Fixed #2701
First of all, buffer is a built-in API in Node.js, so it cannot be used in React Native.
However, it seems to be used here.
But if someone has installed the buffer package, it would still be imported successfully even if react-native-svg doesn’t explicitly declare it as a dependency (a so-called “phantom dependency”).
Still, it’s strange that react-native-svg has buffer as a dependency.
Therefore, we should replace it with atob (a built-in API) for the conversion, and remove buffer from the code
If you are using an older version of React Native, atob might not be available in Hermes.
However, since there are already many polyfill implementations for atob, it’s still better than having no buffer at all.
Test Plan
https://github.com/Nodonisko/hermesx
i have test hermesx
mkdir buffer-test cd buffer-test npm init npm install -g hermesx npm install bufferCreate test code
test.tsDemonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI.
What's required for testing (prerequisites)?
What are the steps to reproduce (after prerequisites)?
Compatibility
Checklist
README.md__tests__folder