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

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.

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

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!

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'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"

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;

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

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

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.

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

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.

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.

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

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.

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.

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\/.*/]),
},
};

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.

Related

webpack import error with node-postgres ('pg'.Client)

Trying to bundle the following file with Webpack fails with
ERROR in ./~/pg/lib/native/index.js Module not found: Error: Cannot
resolve module 'pg-native' in
.../node_modules/pg/lib/native
# ./~/pg/lib/native/index.js 9:13-33
I tried several ignore statements in the .babelrc but didnt get it running...
The test-file i want to bundle: handler.js
const Client = require('pg').Client;
console.log("done");
webpack.config.js
module.exports = {
entry: './handler.js',
target: 'node',
module: {
loaders: [{
test: /\.js$/,
loaders: ['babel'],
include: __dirname,
exclude: /node_modules/,
}]
}
};
.babelrc
{
"plugins": ["transform-runtime"],
"presets": ["es2015", "stage-1"]
}
package.json
"dependencies": {
"postgraphql": "^2.4.0",
"babel-runtime": "6.11.6"
},
"devDependencies": {
"babel-core": "^6.13.2",
"babel-loader": "^6.2.4",
"babel-plugin-transform-runtime": "^6.12.0",
"babel-preset-es2015": "^6.13.2",
"babel-preset-stage-0": "^6.5.0",
"babel-polyfill": "6.13.0",
"serverless-webpack": "^1.0.0-rc.3",
"webpack": "^1.13.1"
}
Somewhat related github-issues:
https://github.com/brianc/node-postgres/issues/1187
https://github.com/serverless/serverless-runtime-babel/issues/8
This is indeed an old thread, but one that helped me nonetheless.
The solution provided by Steve Schafer 1 is good, but not the simplest.
Instead, the one provided by Marco Lüthy 2 in the linked issue is probably the easiest to set up because it is pure configuration, without even the need for a dummy file to be created.
It consists of modifying your Webpack config plugins array as follows:
const webpack = require('webpack');
const webpackConfig = {
...
resolve: { ... },
plugins: [
new webpack.IgnorePlugin(/^pg-native$/)
// Or, for WebPack 4+:
new webpack.IgnorePlugin({ resourceRegExp: /^pg-native$/ })
],
output: { ... },
...
}
Updated to include a change suggested in the comments.
This is an old thread but the problem still exists, so for anyone experiencing it, there is a workaround. The problem is an interaction between the way that node-postgres is written and how babel rewrites the code, which forces pg-native to be loaded even when you don't explicitly import/require it.
The simplest workaround is to add a couple of aliases to your webpack.config.js to cause it to link in a dummy do-nothing file instead:
{
...
resolve: {
alias: {
...
'pg-native': path-to-dummy-js-file,
'dns': path-to-dummy-js-file
}
}
...
}
where the dummy file contains a single line:
export default null
See https://github.com/brianc/node-postgres/issues/838 for further discussion and alternative workarounds.
I know that this is an old topic but I'm compelled to share how I solved it. It was maddening to deal with.
So, here is the readers digest version as based on the recollection from the last brain cell that I have.
Error:
Webpack Compilation Error ./node_modules/pg/lib/native/client.js Module not found: Error: Can't resolve 'pg-native'
The error above was thrown when attempting to run a Cypress test that required the npm package 'pg'.
Attempting to install the pg-native package was not successful and resulted in another error; namely ->
Call to 'pg_config --libdir' returned exit status 1 while in binding.gyp. while trying to load binding.gyp
I found that executing pg_config --libdir in the VSCode cmd prompt resulted in that command failing.
However, I knew that it should work since running that command from the system command prompt resulted in this -> C:/PROGRA~1/POSTGR~1/9.3/lib
That is the path that contains a required dll.
So, instead of running npm install from the VSCode command prompt, I ran it from the command prompt as launched from windows.
The result...success!!! pg-native was installed successfully.
After, the Cypress test was able to run as well.
Errors in now way helped me to arrive at this solution. It was more just checking that things were installed that were required, etc.
You may have pg-native globally installed locally. Hence the packet manager does not include the pg-native in the lock file. That was a issue i experienced where it did run fine locally but every time i build in the cloud webpack complained about pg-native missing. I solved it by removing the lockfile in the files pushed to the cloud (In this case seed.run).

Grunt or gulp with netbeans and upload on save

I've been using netbeans for a long time. I mostly work with php, html, css and javascript primarily in relation to wordpress theme and plugin development. I run Netbeans 8.0.2 (and for testing gulp the latest nightly build) under windows 7.
I'm just getting started with grunt and / or gulp (leaning towards the latter so far), at the moment to take advantage of autoprefixer - but I see a million other potential benefits of these systems.
There is one showstopper though. I got addicted to the "Upload files on save" feature years ago, and I'm not about to kick that habbit - the instant upload is a very central part of my workflow on almost all projects...
So far it has just silently handled anything I threw at it, and automatically uploaded any changed files no matter if I used netbeans, photoshop, windows explorer or any other external program to modify or move files around... but it doesn't play nice with the recently introduced gulp and grunt support.
If I run a gulp (or grunt) task and files are updated, netbeans doesn't detect the changes until the changed files are opened (or tabbed to if already open)... and so the updated files aren't uploaded.
If the task runs as a watch it doesn't seem to matter if I run it from CLI or from netbeans. If it's a "normal" task (ie. not a watch - I'm not quite comfortable with the lingo yet) and I run it manually by right-clicking the Gruntfile.js -> Grunt Tasks -> whatever then the changes are detected... but this isn't very convenient (compared to my usual "deployment procedure" of pushing CTRL+S). So far this built-in way of running tasks works for grunt - but not (yet?) gulp.
Only options I see is to:
use an FTP plugin for grunt or gulp - very undesirable for a number of reasons
run gulp on the server side - which would mean a major disruption of the normal workflow when full control of the server is not possible, which is often the case on external projects - it would also mean a lot of extra initial work to set up each new project serverside even when it is possible
Has anyone managed to get this working in a similar scenario?
-Any other suggestions / pointers are welcome too, if I'm simply going about it completely wrong.
More or less minimal (based on my so far limited knowledge) files to reproduce:
package.json:
{
"name": "grunt_gulp_test",
"version": "0.0.1",
"description": "",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Mikkel",
"license": "ISC",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-sass": "^0.9.2",
"grunt-contrib-watch": "^0.6.1",
"gulp": "^3.8.11",
"gulp-autoprefixer": "^2.3.0",
"gulp-load-plugins": "^0.10.0",
"gulp-sass": "^2.0.1",
"gulp-sourcemaps": "^1.5.2",
"gulp-util": "^3.0.4"
}
}
Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
sass: { // Task
dist: { // Target
options: { // Target options
style: 'expanded'
},
files: { // Dictionary of files
'test_grunt.css': 'test.scss'
}
}
},
watch: {
scripts: {
files: ['test.scss'],
tasks: ['sass'],
options: {
spawn: false
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['sass']);
grunt.registerTask('watch_it', ['sass', 'watch']);
};
gulpfile.js:
'use strict';
var gulp = require('gulp');
var gutil = require( 'gulp-util' );
var $ = require('gulp-load-plugins')();
gulp.task('styles', function () {
return gulp.src([
'test.scss'
])
.pipe($.sourcemaps.init())
.pipe($.sass({
precision: 10,
onError: console.error.bind(console, 'Sass error:')
}))
.pipe($.autoprefixer({browsers: ['> 5%']}))
.pipe($.sourcemaps.write())
.pipe(gulp.dest('.'));
});
gulp.task('default', ['styles']);
gulp.task('watch', ['styles'], function () {
gulp.watch(['test.scss'], ['styles']);
});
test.css:
div {
div {
display: flex;
background: #445552;
}
}
This was confirmed to be a bug for users running on windows.
The bug has been resolved, and until it is included in a stable release, anyone else who is affected by the problem can simply use a nightly build >= 201508060002

Dustjs custom filters stopped working

For some reason my dustjs custom filters have just stopped working on the production server, even though they work fine on my local machine. Anyone have any thoughts as to why this might be happening? I am using dustjs-linkedin v. 2.3.5.
What my filters look like (located in my main server.js file):
dust.filters.uppercase = function (value) {
return String(value).toUpperCase();
};
dust.filters.ucwords = function (value) {
return String(value).replace(/^([a-z\u00E0-\u00FC])|\s+([a-z\u00E0-\u00FC])/g, function($1) {
return $1.toUpperCase();
});
};
dust.filters.money = function (value) {
return parseFloat(value).toFixed(2);
};
UPDATE: I really need this fixed, and am at a loss as to why this would work locally, but not on my server (this used to work just fine). Unfortunately, I didn't notice when it stopped working and have made MANY updates. Any ideas would be GREATLY appreciated.
Here are the app dependencies from my package.json:
"dependencies": {
"express": "3.4.8",
"socket.io": "0.9.16",
"dustjs-linkedin": "2.3.x",
"dustjs-helpers": "1.2.0",
"consolidate": "0.10.0",
"mongoose": "3.8.x",
"node-uuid": "1.4.1",
"express-form": "0.10.1",
"bcrypt-nodejs": "0.0.3",
"subdomain": "0.1.0",
"gm": "1.14.x",
"connect-mongo": "0.4.1",
"nodemailer": "0.6.5"
}
ANOTHER UPDATE: I have added a console.log('money'); to the money filter and it logs every time it is run locally just fine, but never logs anything to the console on the production end. This leads me to believe that the custom filters are not being added on the production server for some reason.
YET ANOTHER UPDATE: I literally added the filters to the dust source code, and they still wont run on the production server, but work fine locally. Could using NODE_ENV somehow be causing something to mess up in dust?
Inspect the node_modules directory tree. My guess is you will find two instances of dustjs-linkedin. Your filters will be in one but you are using the other one. Something else is dragging in the other copy based on a different version.
I think it happened because you have updated some packages to more recent versions.
I have similiar thing with nodemailer package upgrade from 0.7.1 to 1.0.2 versions
Can you prodive the dependecies hash of package.json file?

Have you got nightmareJS working properley on c9.io IDE

NightmareJS on c9.io is literally a nightmare.
i cannot get it to work at all i am going to run through the whole process from start to finish.
Step 1
I create a new workspace
Hosted
Node.js
Step 2
Start Editing my new workspace
I open Package.json and add what i need heres my file.
{
"name": "chat-example",
"version": "0.0.0",
"description": "A chat example to showcase how to use `socket.io` with a static `express` server",
"main": "server.js",
"repository": "",
"author": "Mostafa Eweda <mostafa#c9.io>",
"dependencies": {
"async": "~0.2.8",
"express": "~3.2.4",
"socket.io": "~0.9.14",
"phantomjs": "*",
"casperjs": "*",
"nightmarejs": "*",
"utils": "*",
"crypto": "*"
}
}
i then run 'npm install' in the console.
Step 3
this is where it does not work i try all theses diffrent commands to get the examples running and the errors i get.
#stackoverflow:~/828481 $ cd node_modules/nightmarejs/examples/
#stackoverflow:~/828481/node_modules/nightmarejs/examples $ node server.js casper.js
Error: Cannot find module 'crypto'
phantomjs://bootstrap.js:289
phantomjs://bootstrap.js:254 in require
/var/lib/stickshift/5345392f50044693d40008de/app-root/data/828481/node_modules/utils/utils.js:7
/var/lib/stickshift/5345392f50044693d40008de/app-root/data/828481/node_modules/utils/utils.js:117
/var/lib/stickshift/5345392f50044693d40008de/app-root/data/828481/node_modules/utils/utils.js:118
Error: Cannot find module 'casper'
phantomjs://bootstrap.js:289
phantomjs://bootstrap.js:254 in require
/var/lib/stickshift/5345392f50044693d40008de/app-root/data/828481/node_modules/nightmarejs/lib/nightmareClient.js:4
/var/lib/stickshift/5345392f50044693d40008de/app-root/data/828481/node_modules/nightmarejs/lib/nightmareClient.js:83
TypeError: 'undefined' is not a function (evaluating 'require(phantom.args[3].slice(13)+'nightmareClient.js').Nightmare({
exitOnError: false
})')
/var/lib/stickshift/5345392f50044693d40008de/app-root/data/828481/node_modules/nightmarejs/lib/nightmareTest.js:16
I have it working. I also had trouble at first. I tried downloading the prebuilt package, but I can't seem to get that working. I ended up just adding the following to my package.json file and ran npm update and all was well:
"nightmare": "^1.5.0",
"phantomjs": "~1.9.7"
Probably they've updated the npm repo and everything since you've posted this. I bet it was frustrating. I don't have those examples in my install, but I would guess you could run them if you had all of the right pre-req's installed.

Working Node.js modules into an application directory structure

I've begun using Node.js to make web applications. It's really awesome. I've come across a few modules that I want to incorporate into my build. I can work with the modules in Terminal after a global npm install. When it comes time to add them to my application, I have no idea how to go about placing them in my directory structure and I haven't found any good documentation on this. My typical node.js directory is:
ROOT
Server
server.js
node-modules
Client
index.html
css
-main.css
javascript
-main.js
-jquery.js
My process for installing the modules has been:
I cd into my Server file and run npm install
Then I go to my package.json file and include the module in the dependencies
{
"name": "application-name",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node app"
},
"dependencies": {
"express": "3.1.0",
"jade": "*",
"stylus": "*",
"<node-module-here>": "1.0.x",
},
"engines": {
"node": "0.10.0",
"npm": "1.2.14"
},
}
After that, I head over to the server.js file I add:
module.exports = require('<path_to_node-module_lib>');
When I run functions that are dependent on the modules on the Client side (functions that work in Terminal), I don't receive an error but the function won't run. Because I'm not receiving errors I have no idea about how to debug. If anyone can recognize some fatal flaw in my structure or implementation and can offer some recommendations, I offer my first born.

Resources