What I am seeing is adding the react-native-reanimated babel plugin (react-native-reanimated/plugin) is causing source maps to be invalid when bundling. I am using Bugsnag and it is saying my source map does not match my code.
Is anyone else using reanimated 2 and experiencing this? Does anyone have any suggestions for workarounds for this? I cannot solve some bugs reported on Bugsnag because of this.
Thanks for the help!
I validated the source map using the npm package sourcemap-validator and it indeed throws an error saying the source map doesn't match the bundle.
I have reproduced this with a new react-native init project. This error occurs in my project using react-native 0.66.4 and in the sample app with react-native 0.70.6
Sample App
https://github.com/MorganTrudeau/rn-sample
There is a README in the repo with steps to reproduce the invalid source map.
Short explanation of what I have done to verify map sourcemap and why I think it is the reanimated babel plugin.
Steps to verify sourcemap
All this code is in the repo provided above to test yourself.
// babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: ['react-native-reanimated/plugin'],
};
// Create the bundle and sourcemap
npx react-native bundle --platform android --dev false --entry-file index.js --reset-cache --bundle-output index.android.bundle --sourcemap-output index.android.bundle.map --minify false
// validate_sourcemap.js
// Sourcemap validation code using sourcemap-validator library
var validate = require('sourcemap-validator'),
fs = require('fs'),
assert = require('assert'),
min = fs.readFileSync('index.android.bundle', 'utf-8'),
map = fs.readFileSync('index.android.bundle.map', 'utf-8');
assert.doesNotThrow(function () {
validate(min, map);
}, 'The sourcemap is not valid');
console.log('Valid source map');
The verification above fails with react-native-reanimated/plugin. If you remove the react-native-reanimated/plugin and re-bundle and run the verification again it passes.
I have tested on a fresh react-native init project. I am assuming this is why my sourcemaps are not working on Bugsnag.
Thanks.
My React Native (0.66.3) app today pops up an error with a stable code which hasn't had any change for quite some time. It is on macOS Big Sur. Here is the error:
ERROR TypeError: undefined is not a function, js engine: hermes
Error: ENOENT: no such file or directory, open '/Users/macair/Documents/code/js/xyz_app5/http:/localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.xyz-app5'
at Object.openSync (fs.js:498:3)
at Object.readFileSync (fs.js:394:35)
at getCodeFrame (/Users/macair/Documents/code/js/xyz_app5/node_modules/metro/src/Server.js:919:18)
at Server._symbolicate (/Users/macair/Documents/code/js/xyz_app5/node_modules/metro/src/Server.js:992:22)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
at async Server._processRequest (/Users/macair/Documents/code/js/xyz_app5/node_modules/metro/src/Server.js:403:7) {
errno: -2,
syscall: 'open',
code: 'ENOENT',
path: '/Users/macair/Documents/code/js/xyz_app5/http:/localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.xyz-app5'
}
Here is the error displayed on IOS simulator:
The error seems related to metro in React Native.
Reinstall node_modules
rm -rf node_modules
Clean your cache
yarn cache clean (or npm cache clean –force)
Unable to load script. Make sure you're either running a Metro server ('run react-native start') or that your bundle 'index.android.bundle' is packaged correctly for release
I could have posted this as a comment, but it requires few elaboration hence...
I tried adding assets folder in projects -> android/app/src/main/
folder
checked if my index.js is fine and has all entry fine
import { AppRegistry } from "react-native";
import App from "./App";
import { name as appName } from "./app.json";
AppRegistry.registerComponent(appName, () => App);
ran this command
react-native bundle --platform android --dev false --entry-file
index.js --bundle-output
android/app/src/main/assets/index.android.bundle --assets-dest
android/app/src/main/res
Now i am able to run the application. All this I tried searching SO, and the reference questions are
1) stack overflow reference 1
2) Stack overflow reference 2
I am learning react native (0.58.5) by coding a very simple chat app. There is one module Chat.js under components. But an error keeps asking for a missing module named Main.js under components. The module Main.js was deleted before I start 'react-native run-android. And the error is the same even if I put theMain.jsback undercomponents`. Here is the error:
DELTA [android, dev] ..\..\../index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1)::ffff:127.0.0.1 - - [27/Feb/2019:03:12:59 +0000] "GET /index.delta?platform=android&dev=true&minify=false HTTP/1.1" 500 - "-" "okhttp/3.12.1"
error: bundling failed: Error: Unable to resolve module `./components/Main` from `C:\D\code\js\emps_app\App.js`: The module `./components/Main` could not be found from `C:\D\code\js\emps_app\App.js`. Indeed, none of these files exist:
* `C:\D\code\js\emps_app\components\Main(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
* `C:\D\code\js\emps_app\components\Main\index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
at ModuleResolver.resolveDependency (C:\D\code\js\emps_app\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:163:15)
at ResolutionRequest.resolveDependency (C:\D\code\js\emps_app\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:52:18)
at DependencyGraph.resolveDependency (C:\D\code\js\emps_app\node_modules\metro\src\node-haste\DependencyGraph.js:273:16)
at Object.resolve (C:\D\code\js\emps_app\node_modules\metro\src\lib\transformHelpers.js:261:42)
at dependencies.map.result (C:\D\code\js\emps_app\node_modules\metro\src\DeltaBundler\traverseDependencies.js:391:31)
at Array.map (<anonymous>)
at resolveDependencies (C:\D\code\js\emps_app\node_modules\metro\src\DeltaBundler\traverseDependencies.js:388:18)
at C:\D\code\js\emps_app\node_modules\metro\src\DeltaBundler\traverseDependencies.js:261:33
at Generator.next (<anonymous>)
at asyncGeneratorStep (C:\D\code\js\emps_app\node_modules\metro\src\DeltaBundler\traverseDependencies.js:87:24)
DELTA [android, dev] ..\..\../index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.
Here is the App.js:
import React, { Component } from "react";
import Chat from "./components/Chat";
export default class App extends Component {
render() {
return <Chat />;
}
}
There is no reference to Main.js at all above. Is the Main.js reserved module in React Native?
search for index.android.bundle and delete from your android folder.
kill all instance of metro bundler.
In cmd or powershell of your project's android folder run gradlew clean
hit react-native run-android
When I run react-native run-android it only installs the old version of the app in simulator and changes are not shown.
Any suggestion is appreciated.
Seems like we have to re-bundle assets every time we compile it to android app. This worked for me:
First run this:
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
Then this:
react-native run-android
Have you tried react-native start --reset-cache ?
Or maybe you can try to reset the MAX_WAIT_TIME (I found it here).
in file \node_modules\node-haste\lib\FileWatcher\index.js
you should increase MAX_WAIT_TIME variable (example : 360000) and change function _createWatcher.
From:
key: '_createWatcher',
value: function _createWatcher(rootConfig) {
var watcher = new WatcherClass(rootConfig.dir, {
glob: rootConfig.globs,
dot: false
});
return new Promise(function (resolve, reject) {
var rejectTimeout = setTimeout(function () {
return reject(new Error(timeoutMessage(WatcherClass)));
}, MAX_WAIT_TIME);
watcher.once('ready', function () {
clearTimeout(rejectTimeout);
resolve(watcher);
});
});
}
To:
key: '_createWatcher',
value: function _createWatcher(rootConfig) {
var watcher = new WatcherClass(rootConfig.dir, {
glob: rootConfig.globs,
dot: false
});
return new Promise(function (resolve, reject) {
const rejectTimeout = setTimeout(function() {
reject(new Error([
'Watcher took too long to load',
'Try running `watchman version` from your terminal',
'https://facebook.github.io/watchman/docs/troubleshooting.html',
].join('\n')));
}, MAX_WAIT_TIME);
watcher.once('ready', function () {
clearTimeout(rejectTimeout);
resolve(watcher);
});
});
}
May it help you! :D
Tried with the solutions above, not sure if they helped for the final version, but what worked at the end was running ./gradlew clean assembleRelease in the /android folder.
Check for any syntax errors that might not be highlighted by VS code.
After three hours of pulling my hairout turns out it hadnt alerted my to an = instead of a : in an object.
I had this happen while working with iOS, and here are the steps I took to get back to working order:
$ react-native start --reset-cache
$ rm -rf ios/build
Doing this much on its own will force RN to rebuild the iOS version from scratch when you run yarn ios, so this could be answer for most anyone else running with iOS.
In my latest encounter of this issue, I found that after forcing a new build, metro-bundler would throw the following error: Metro Bundler has encountered an error: SHA-1 for file < some file in node_modules >
With this, I had to refresh my node_modules in order to resolve the issue completely.
$ rm -r node_modules
$ yarn
For me I simply restarted my system. Or simply stop the react-native server, then re-run your app.
Use reload option from expo, by dragging from icon bar
Another way to fix this problem is to run this command in your web browser console. I had this problem with React Native for Windows and none of the above solutions worked for me.
localStorage.clear()
The problem is that projectroot > ios > main.jsbundle is not updating as it is supposed to with code changes/builds. To get current, delete that file. Then in Terminal ( only here, do not rely on automatic creation ), put:
react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios/assets
This will create a current main.jsbundle which is used to create the app and also what is used for creating an archive. Problem is, if you update your code, you have to do it again.
You can edit main.jsbundle by hand if you need to. I had to tweak it so some of my images showed up when I had multi-layer folders/pages. Not hard, just search for your image name and look at/edit the link.
This is my solution for debug / release
N.B. - if you're using expo - this is probably not applicable.
yarn android:bundle:debug should get latest debug version...
assumes you're using index.js as main entry point.
Add these to your package.json
"scripts": {
"android": "npx react-native run-android",
"android:bundle:debug": "react-native bundle --platform android --dev true --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/",
"android:bundle:release": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/build/intermediates/res/merged/release/",
}
release.sh
yarn android:bundle:release
cd android
./gradlew bundleRelease
cd app/build/outputs/bundle/release
open .
I was creating a staging buildType in my react native project too, the build was fine (after dealing with some problems), but for some reason it was loading an old version of the app too.
After changing the buildType from staging to releaseStaging, it started to build as expected and to load the correct version.
I've answered in another topic too with more specific instructions.