Working with:
"react-native": "0.51"
When I console.log in Remote JS Debugger, the source of the log is always:
console.js:35
It ignores the actual line where the log was made from. This used to work as expected. Is there a way to make it work again?
I found that this was actually caused by having React Native Sentry installed.
To resolve this whilst in development mode I disabled Sentry, which arguably makes more sense as I only want to be tracking production errors there.
// Only run Sentry in production
if (!__DEV__) {
Sentry.config(_CONFIG_URL_HERE_).install();
}
If you don't want to disable Sentry, add this to your Sentry init:
Sentry.init({
dsn: '__YOUR_DSN__',
integrations: [new Sentry.Integrations.Breadcrumbs({
console: false
})]
})
Related
Trying to execute any of the tests leads to this error popping up.
I am using Cypress 6.5.0
Really clueless about what to do.
Sorry for the image, but it was much better to show it this way.
And also the StackTrace.
at Object../node_modules/is-ci/node_modules/ci-info/index.js (webpack:///node_modules/is-ci/node_modules/ci-info/index.js:5:1)
at __webpack_require__ (webpack:///webpack/bootstrap:19:1)
at Object../node_modules/is-ci/index.js (webpack:///node_modules/is-ci/index.js:3:18)
at __webpack_require__ (webpack:///webpack/bootstrap:19:1)
at Object.eval (webpack:///node_modules/cypress/lib/util.js:21:14)
at Object../node_modules/cypress/lib/util.js (http://localhost:37869/__cypress/tests?p=test/e2e/support/index.js:87250:31)
at __webpack_require__ (webpack:///webpack/bootstrap:19:1)
at Object.eval (webpack:///node_modules/cypress/index.js:9:14)
at Object../node_modules/cypress/index.js (http://localhost:37869/__cypress/tests?p=test/e2e/support/index.js:82972:31)
at __webpack_require__ (webpack:///webpack/bootstrap:19:1)
From previous event:
at runScriptsFromUrls (http://localhost:37869/__cypress/runner/cypress_runner.js:177985:98)
at Object.runScripts (http://localhost:37869/__cypress/runner/cypress_runner.js:177999:11)
at $Cypress.onSpecWindow (http://localhost:37869/__cypress/runner/cypress_runner.js:167733:19)
This happened for me when I imported cypress within my test, removing that fixed the issue
Sometimes by mistake, Visual Studio Code will auto-import unnecessary libraries. You should delete them. For me it was
import { cli } from 'cypress';
It looks like you have something in /support/index.js (since it's mentioned in the stack trace) that should be in /plugins/index.js (since it has an invalid use of process which is only available in node.js).
Cypress runs both a browser process and a background node.js process.
/support/index.js is used to augment the browser process, and /plugins/index.js is used to augment the node.js process.
If you mix them up when adding a library, a task, or a file preprocessor you get an error of the type you show.
What's in /support/index.js?
If you just updated to react-scripts 5.x and facing this issue, there is currently a PR to fix it but a workaround to get your tests working ASAP is to update the env.js file in the react scripts node module as referenced in this PR.
NB: If you have a private artifact repository manager on jfrog it is advisable to push this fix to your registry and pull react scripts from there until the fix becomes publicly available.
TLDR;
You just updated to react 5.x and your cypress tests show the error below;
Solution
File: node_modules/react-scripts/config/env.js
Change the stringified method to:
// Stringify all values so we can feed into webpack DefinePlugin
const stringified = {
'process':{}, // This is the only line added to the previous method
'process.env': Object.keys(raw).reduce((env, key) => {
env[key] = JSON.stringify(raw[key]);
return env;
}, {}),
};
When we drive out gloval variable from JSON visual studiao automatically Import
import { cli } from 'cypress';
I commented following line from support/command.js and that reso I am using cypress 8.7
const { defineConfig } = require('cypress')
Remove import cypress from "cypress" from your POM fi
I followed the official docs to enable the Hermes engine in my app but the following always returns false:
const isHermes = () => !!global.HermesInternal;
console.log('>>>>>>>>>>>>>', isHermes());
The changes I made are setting the following in android/app/build.gradle:
project.ext.react = [
enableHermes: true, // clean and rebuild if changing
]
Then I did a clean build with:
cd android && ./gradlew clean
yarn android
But the console.log always returns false
I too got false when console.logging isHermes(). I realized it was because I was using the normal Chrome debugger(not sure of the internals of why). When I just console.logged in VSCode, I got true. There is a special way (sorry, my 'Copy link to highlight' isn't working, it's about 1/4 of the way down the page) you have to set up the Chrome debugger when you are using Hermes. There seems to be some trouble with getting it to work with newer versions of Chrome though. My plan right now to verify I'm actually using it is to compare the size of the binary before and after enabling Hermes.
I am trying to install my react-native app on my phone (iPhone). It installs alright but then crashes on start with this error message -
undefined is not an object (evaluating 'navigator.userAgent.indexOf')
<unknown>
:12:71
loadModuleImplementation
require.js:213:12
<unknown>
getScrollPosition.js:12:31
If i then enable remote js debugging, it reloads and everything works fine. I disable remote debugging, the app goes back to crashing. Any idea what might be happening here?
Update - The culprit code is in fbjs package - https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/dom/getDocumentScrollElement.js
They check if navigator is defined or not and then try to access the second level property on it - navigator.userAgent.indexOf.
I can either fake navigator.userAgent somehow or send a PR to fbjs.
navigator is a global Web API available in browsers. This is not available in React Native as it's not a web browser. All of the Web APIs are not part of the global environment. This is why navigator.userAgent.indexOf is throwing the undefined error.
Now the reason why your program runs fine when debugging JS remotely is because React Native will switch to using the JavaScript engine provided by Chrome (or whatever you are debugging through) instead of the core one when you remote debug. So when debugging, you will have access to the global Web API that browsers normally have.
This is a very tricky gotcha that will often trip people up as most people develop with debugging turned on all the time. Rule of thumb: React Native is not a browser. Don't use any of the globals that you would normally use when doing web development and you'll avoid most of these types of gotcha errors.
If you would like to see how these globals are polyfilled (often with empty objects) in React Native's JavaScript engine, you'll want to look at initializeCore.js. Here you can see that React Native will polyfill navigator like this:
// Set up Geolocation
let navigator = global.navigator;
if (navigator === undefined) {
global.navigator = navigator = {};
}
// see https://github.com/facebook/react-native/issues/10881
polyfillObjectProperty(navigator, 'product', () => 'ReactNative');
polyfillObjectProperty(navigator, 'geolocation', () => require('Geolocation'));
Edit: To answer the follow-up and give a workaround.
You can shim it, but you need to do it before importing any of your other files in index.js (the root of your application). This is how it's done in node-libs-react-native with their globals.js file where they too set a default user agent string. Adapting that, you can achieve the same result by doing the following:
Create file to hold your shims, globals.js:
global.navigator.userAgent = 'React Native';
Import/Require it prior to importing any of your other files in index.js:
import { AppRegistry } from "react-native";
import globals from "./globals";
import App from "./App";
AppRegistry.registerComponent("RNSandbox", () => App);
If for some reason you want the userAgent to be different or be dependent on whether you are debugging or not, you can add your own logic to the globals.js.
Basically my issue is that I get an error message, "__DEV__ is not defined" when I run jest. So I have read stackoverflow and other google posts on this. Some have suggested removing my .babelrc, but I actually need that file. Others have suggested adding
"globals": {
"__DEV__": true
}
To my package.json. I did that as well. I even deleted my node modules folder and re-installed. What should I do? Odd thing is that it was working before, but not now.
You can create a jest.config.json file in the root of your react-native project and add this globally as such
{
"jest": {
"globals": {
"__DEV__": true
}
}
}
Just add globals.DEV = true to your test file or set it in globals part of your jest settings
I got this when I was running Detox E2E tests inside of my react native app. Then use to work just fine but then I upgraded my mac OS and xcode and they started throwing Reference error DEV is not defined. Not sure why it was fine before and then broke after that.
My issue was fixed when I removed any code that was being imported from my react native app inside of the detox E2E tests. So the issue was importing any javascript from my app/ folder. I had a simple utility log function that wraps console.log which was the culprit. I did not need to modify any jest configs.
For anyone facing this issue I updated my jest by running in the terminal npm update jest this solved the issue for me.
I have React js installed via NPM and using browserify to manage components in react. When an exception occurs in React, the console shows as
"Uncaught Error: Minified exception occurred; use the non-minified dev
environment for the full error message and additional helpful
warnings."
How do I enable full error messages ?
Setting NODE_ENV to development as Benjamin Gruenbaum pointed out in the comment resolved the issues.
set NODE_ENV=development
If you are encountering this issue with Karma + Webpack, the following Webpack configuration fixed the issue for me when running tests:
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development')
}
})
]
I FINALLY SOLVED THIS.
If you're like me and ran that command to set NODE_ENV and it's literally never worked, check if you're linking to react.min.js instead of the full versions of the files.
Link to the full versions and it should work like a charm. :D
If you are using jspm to bundle your code, note that version 0.16.24 imports the minified "production" version of React, which throws this error. My temporary solution was to downgrade jspm to 0.16.23.
edit Future versions of jspm will allow you to declare production vs. development versions (see jspm beta documentation)
I had this issue, and for me I didn't need to disable minification or use react source. My script was just loading before the root element. So I just moved the script out of the head and below the div in the index file source code and that fixed it.
Changed my index.jade from this:
html
head
title Super coo site
script(src="bundle.js")
body
div#root
To this:
html
head
title Super coo site
body
div#root
script(src="bundle.js")
I got this error when my render method returned undefined eg
render() {
let view;
// Not paying attention and slip a case where view won't get assigned a value
if(this.props.foo == 'hello') {
view = <HelloView />
}
else if(this.props.foo == 'bye') {
view = <ByeView />
}
return view;
}
This will trigger the error when this.props.foo is 'hi'
Have you check the DOM element that you are trying render ? I had this error before due to a silly mistake. The worst part is bundle was minified. The element id is not same
Index.html
<div id="ds-app"></div>
app.jsx
React.DOM.render(<App/>, document.getElementById('app'))
As of version 15.2, production React error messages (NODE_ENV=production) now include a URL that you can visit where you can see the original, unobfuscated error.
https://twitter.com/dan_abramov/status/748969886433546240
You should consider upgrading to React 15.2 in order to get access to these error messages. Additionally, some production crash reporting tools automatically unminify these errors for you.
use the min.js files in production or bundle your application code with process.env.NODE_ENV === 'production' and you should be good to go!
If your package.json scripts has dll， try exec npm run dll or yarn run dll.
I am developing my first Shopify app and using heroku to host it. Nothing worked for me until I discovered this topic and one other. Here is my vite.config.js:
import react from "#vitejs/plugin-react";
import "dotenv/config";
/**
* #type {import('vite').UserConfig}
*/
export default {
define: {
"process.env.SHOPIFY_API_KEY": JSON.stringify(process.env.SHOPIFY_API_KEY),
"process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
},
//plugins: [react()],
plugins: [
process.env.NODE_ENV !== `production` ? react({
jsxRuntime: `classic`,
}) : react(),
],
};
NODE_ENV=development
I hope this helps someone
In my case, it was because of package-lock.json. Delete and redeploy