React native : Failed to construct transformer: Error: Cannot create a string longer than 0x1fffffe8 characters

Question

package.json

{
  "name": "project",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/async-storage": "^1.12.0",
    "@react-native-community/clipboard": "^1.2.3",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/drawer": "^5.9.0",
    "@react-navigation/native": "^5.7.3",
    "@react-navigation/stack": "^5.9.0",
    "@twotalltotems/react-native-otp-input": "^1.3.11",
    "jetifier": "^1.6.6",
    "react": "16.13.1",
    "react-native": "^0.63.2",
    "react-native-barcode-builder": "^2.0.0",
    "react-native-biometrics": "^2.1.4",
    "react-native-chart-kit": "^6.6.1",
    "react-native-gesture-handler": "^1.7.0",
    "react-native-image-picker": "^2.3.3",
    "react-native-localization": "^2.1.6",
    "react-native-paper": "^4.0.1",
    "react-native-reanimated": "^1.13.0",
    "react-native-safe-area-context": "^3.1.6",
    "react-native-screens": "^2.10.1",
    "react-native-splash-screen": "^3.2.0",
    "react-native-svg": "^12.1.0",
    "react-native-swipe-list-view": "^3.2.3",
    "react-native-vector-icons": "^7.0.0"
  },
  "devDependencies": {
    "@babel/core": "7.11.4",
    "@babel/runtime": "7.11.2",
    "@react-native-community/eslint-config": "1.1.0",
    "babel-jest": "25.5.1",
    "eslint": "6.8.0",
    "jest": "25.5.4",
    "metro-react-native-babel-preset": "0.59.0",
    "miragejs": "^0.1.40",
    "react-test-renderer": "16.13.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

i did't fonund any answers related this except this : https://github.com/facebook/react-native/issues/28189

but it won't work for me...

myapp successfully install on android emulator but stuck at splash screen ...

the app works fine in my office computer but it did't work on my own computer

my node version : v14.10.0

so please help me.

You can probably add full error stack as well in your question. — Bhuro, Nov 18 '20 at 05:04
actually i have create whole project from scratch, but i would love to see solution if anyone have — Mitesh K, Nov 19 '20 at 08:39

score 19 · Answer 1 · answered Apr 13 '21 at 06:16

19

I've tried to log the file that causing the error, but console.log wasn't working. I come up with a quick hack to throw filePath then I've saw that a zip file, that I keeped as a backup, was the issue.

For some way react doesn't liked it so I have to move it outside of the project folder

answered Apr 13 '21 at 06:16

Domotor Zsolt

586
5
10

Where did you place this throw filePath? Inside worker.js from jest-haste-map module? Or..? – Dirk Sep 23 '21 at 10:05
1

@Dirk, If you have any zip folder inside your project folder just remove it from there and save it somewhere else. I had same issue and this helped me. – Said Suleiman Juma Nov 02 '21 at 13:44
For me it was the android folder somehow. I removed it and the build worked for iOS. – H.Gndgn Dec 20 '22 at 13:39
Thanks! I too had a zip file, which got created for me in android/app/build/intermediates/module_bundle/productionRelease/base.zip – Baseless Jun 26 '23 at 10:33

Dirk · Answer 2 · 2021-10-04T07:39:27.567

For others having the same problem, and looking for a way to debug:

Edit /node_modules/jest-haste-map/build/worker.js
Wrap readFileSync in a try...catch, like this:

  const getContent = () => {
    if (content === undefined) {
      try {
        content = fs().readFileSync(filePath, 'utf8');
      } catch (err) {
        throw new Error(`error readFileSync ${filePath} : ${err.message}`);
      }
    }

    return content;
  };

(re)start metro bundler:

/node_modules/react-native/scripts/launchPackager.command; exit

My output:

To reload the app press "r"
To open developer menu press "d"

Failed to construct transformer:  Error: error readFileSync <my project path>/some/big/file/that/caused/error : Cannot create a string longer than 0x1fffffe8 characters
    at getContent (<my project path>/node_modules/jest-haste-map/build/worker.js:133:15)
    at Object.worker (<my project path>/node_modules/jest-haste-map/build/worker.js:162:23)
    at execFunction (<my project path>/node_modules/jest-worker/build/workers/processChild.js:145:17)
    at execHelper (<my project path>/node_modules/jest-worker/build/workers/processChild.js:124:5)
    at execMethod (<my project path>/node_modules/jest-worker/build/workers/processChild.js:128:5)
    at process.messageListener (<my project path>/node_modules/jest-worker/build/workers/processChild.js:46:7)
    at process.emi

Hope this helps others having the same problem!

Thank you - this revealed a ZIP file in my Android build directory that I have no clue (yet) how it ended up there. — Elliot Rodriguez, Mar 17 '22 at 16:32
Super thanks, this revealed a zip file in my Android build directory too, and same here, no clue how it got there. Following was its location (if it help anyone) android/app/build/intermediates/module_bundle/productionRelease/base.zip — Baseless, Jun 26 '23 at 10:35

score 3 · Answer 3 · edited Jan 06 '21 at 08:34

I was running into the same problem.

 warning: the transform cache was reset.                                                                          
                 Welcome to React Native!                                                                        
                Learn once, write anywhere 
Failed to construct transformer:  Error: Cannot create a string longer than 0x1fffffe8 characters                
    at Object.slice (buffer.js:608:37)                                                                           
    at Buffer.toString (buffer.js:805:14)                                                                        
    at Object.readFileSync (fs.js:421:41)                                                                        
    at getContent (J:\expoProjects\rn-cnn\node_modules\metro\node_modules\jest-haste-map\build\worker.js:149:41) 
    at Object.<anonymous> (J:\expoProjects\rn-cnn\node_modules\metro\node_modules\jest-haste-map\build\worker.js:
199:9)                                                                                                           
    at Generator.next (<anonymous>)                                                                              
    at asyncGeneratorStep (J:\expoProjects\rn-cnn\node_modules\metro\node_modules\jest-haste-map\build\worker.js:
78:24)                                                                                                           
    at _next (J:\expoProjects\rn-cnn\node_modules\metro\node_modules\jest-haste-map\build\worker.js:98:9)        
    at J:\expoProjects\rn-cnn\node_modules\metro\node_modules\jest-haste-map\build\worker.js:103:7               
    at new Promise (<anonymous>) {                                                                               
  type: 'Error',                                                                                                 
  code: 'ERR_STRING_TOO_LONG'

I solved the error by changing the node version to v14+ and then reverting back to the old version of node v10.15.3.

I recreated the project and add all screens and files manually because at that time I don't find any answers. by the way, thank you for the answer it helps someone who faces this type of error — Mitesh K, Jan 06 '21 at 05:34

score 3 · Answer 4 · edited Jan 08 '21 at 19:16

3

I've run into the exact same error. Turns out it was an auto-generated big file from gradle (> 700MB) inside "android.gradle\6.0.1\executionHistory"

edited Jan 08 '21 at 19:16

Dharman

30,962
25
85
135

answered Jan 08 '21 at 19:10

Monteiro4

31
2

score 3 · Answer 5 · answered Dec 24 '21 at 06:06

To figure out what file caused an error I used @dirk approach. I don't sure why but my App_name.app.dSYM.zip became too large (536MB) so the node was unable to read it because of the 512MB limitation. It might be some different file in your case. Here is a patch-package to get more information about the file which caused this error

diff --git a/node_modules/jest-haste-map/build/worker.js b/node_modules/jest-haste-map/build/worker.js
index 1996d4a..1f17f11 100644
--- a/node_modules/jest-haste-map/build/worker.js
+++ b/node_modules/jest-haste-map/build/worker.js
@@ -146,7 +146,11 @@ function _worker() {
 
     const getContent = () => {
       if (content === undefined) {
-        content = _gracefulFs().default.readFileSync(filePath, 'utf8');
+        try {
+          content = _gracefulFs().default.readFileSync(filePath, 'utf8');
+        } catch (err) {
+          throw new Error(`error readFileSync ${filePath} : ${err.message}`);
+        }
       }
 
       return content;

score 2 · Answer 6 · answered Jan 12 '22 at 07:22

2

Check if there any unrelated file or zip in your project structure/folder if yes then delete file and error will be resolved

answered Jan 12 '22 at 07:22

faraz naeem

91
1
5

score 2 · Answer 7 · answered May 25 '22 at 10:31

2

Make sure you don't have any large files in your root project including (mp4, images, .zip, etc)?

answered May 25 '22 at 10:31

Mr.shakeel

284
2
5

score 1 · Answer 8 · answered Oct 20 '21 at 09:06

1

In my own case I noticed I was using an mp4 video file for my react native application which was too large in size. I had to delete it and that was the fix for me

answered Oct 20 '21 at 09:06

Onyebuchi Kingsley Omerenma

29
2

score 1 · Answer 9 · answered Nov 15 '21 at 15:32

1

It took me the whole day but I solved it. I still can't understand why I'm getting this error when I want to launch the app on iOS but:

removing the build directory in android/app fixed it.

answered Nov 15 '21 at 15:32

M_droid

2,447
2
25
35

score 1 · Answer 10 · answered Jul 25 '22 at 09:11

1

In my case there was a zip file of whole project in the project directory which cause the issue when I remove it from the project directory and run

npm start --reset cache

it worked for me.

answered Jul 25 '22 at 09:11

Zeeshan

174
10

score 1 · Answer 11 · answered Oct 19 '22 at 11:32

I had similar issue. After some debugging I found that it crashes because of asset file, which was generated by android build previously.

I don't know why it is trying to import this file (I experience this issue on ios), but when I removed folder ./android/app/build it started working.

Even if issue is not related to this dir in your case, you need to find which asset caused this issue.

score 0 · Answer 12 · answered Jan 05 '21 at 18:59

0

Moving any large asset files [pictures,videos,etc...] up out of the project directory. https://github.com/facebook/react-native/issues/28189#issuecomment-592918995

answered Jan 05 '21 at 18:59

ddaaggeett

149
2
10

score 0 · Answer 13 · answered Sep 30 '22 at 09:05

I got this error when i run build.

But This fix worked for me. I deleted a zip file at the root of my app (I compressed the whole project to zip at end of the previous day for backup)

And i stopped the server with ctr + c command Then restarted the server with npx react-native start

All now works fine after restarting the server and without having to run build again.

score 0 · Answer 14 · answered Nov 07 '22 at 16:29

0

Just delete any zipped file in your project root directory. In my case I had packaged the app and sent it to someone and forgot to remove the zipped file thereafter.

answered Nov 07 '22 at 16:29

Nicholas Mberev

1,563
1
14
14

score 0 · Answer 15 · answered Jan 05 '23 at 09:12

This answer helped me a lot https://stackoverflow.com/a/41963217/2915928

For my case my app had a lot of audio files being included in android app bundle, this was then creating a large zip file in android/build/intermediates. So rather than deleting the build folder this tell the packager to ignore the file causing the issue.

Here is an example of my fix replace asset_pack_bundle with whatever file or directory you are having an issue with.

const exclusionList = require('metro-config/src/defaults/exclusionList');

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
  resolver: {
    blacklistRE: exclusionList([/asset_pack_bundle\/.*/]),
  },
};

score 0 · Answer 16 · answered Feb 21 '23 at 11:37

0

I have followed the below steps and it worked for me:

1. cleared cache and unnecessary space from my mac.

2. cleared npm cache and watchman.

3. cleared gradle.

4. restarted the metro server.

answered Feb 21 '23 at 11:37

amit pandya

1,384
13
22

score 0 · Answer 17 · answered Jun 26 '23 at 05:59

in my android/.gradlew/7.5.1/executionHistory/executionHistory.bin was causing issue as it was 590mbs and was unreadable,

Solved: Deleted executionHistory.bin and rerun the metro server//rebuild the app and it created a new file with smaller file size!

React native : Failed to construct transformer: Error: Cannot create a string longer than 0x1fffffe8 characters

17 Answers17

Linked