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.
Related
I need to scrape some data from transfermarkt.com using parsehub, but when i try to load the website with parse hub I'm only met with:
This Stencil app is disabled for this browser.
Developers:
ES5 builds are disabled during development to take advantage of 2x faster build times.
Please see the example below or our config docs if you would like to develop on a browser that does not fully support ES2017 and custom elements.
Note that as of Stencil v2, ES5 builds and polyfills are disabled during production builds. You can enable these in your stencil.config.ts file.
When testing browsers it is recommended to always test in production mode, and ES5 builds should always be enabled during production builds.
This is only an experiment and if it slows down app development then we will revert this and enable ES5 builds during dev.
Enabling ES5 builds during development:
npm run dev --es5
For stencil-component-starter, use:
npm start --es5
Enabling full production builds during development:
npm run dev --prod
For stencil-component-starter, use:
npm start --prod
Current Browser's Support:
ES Module Imports: false
ES Dynamic Imports: false
Custom Elements: false
Shadow DOM: false
fetch: true
CSS Variables: true
Current Browser:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:65.0) Gecko/20100101 Firefox/65.0
I tried following the steps to enable ES5, but it does not work.
If i go to the website on the standard firefox browser it works like normal, but not in parsehub
That message indicates that the browser does not support JS modules. Looking at parsehub's FAQ they are using Firefox v54 which was released in 2017 and does not support JS modules.
Starting with version 2 Stencil has changed legacy browser support to be opt-in.
If you have access to the source code you can add legacy browser support using the following config:
export const config: Config = {
buildEs5: 'prod',
extras: {
cssVarsShim: true,
__deprecated__dynamicImportShim: true,
shadowDomShim: true,
safari10: true,
scriptDataOpts: true,
appendChildSlotFix: false,
cloneNodeFix: false,
slotChildNodesFix: true,
}
};
The only other options are:
ask the site to add those config changes and publish a new version
use a different scraper with a more recent version
I've got an existing code base in which Vue.js has performance problems. I also see this notice in the browser console:
so I guess an easy fix could be to put Vue into production mode.
In the suggested link I try to follow the instructions for webpack. We're on Webpack version 2.7 (current stable version is 4.20). In the instructions it says that in Webpack 3 and earlier, you’ll need to use DefinePlugin:
var webpack = require('webpack')
module.exports = {
// ...
plugins: [
// ...
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
}
So in my package.json I've got a build script defined:
To build for production I run yarn run build and it runs a build.js file (paste here) which in turn calls webpack.base.conf.js (paste here) and webpack.prod.conf.js (paste here).
As you can see in the paste I use the DefinePlugin as suggested by the docs.
I also found a file called vue-loader.conf.js (paste here) and to be sure I also added the DefinePlugin in there as well.
I can run yarn run build which ends without errors, but when serve the site over Apache and open the browser it still shows the notification that we're in development mode.
To be sure it actually uses the files created by webpack I completely removed the folder /public/webpack/ and checked that the webinterface didn't load correctly without the missing files and then built again to see if it loaded correctly after the command finished. So it does actually use the files built by this webpack process. But Vue is actually not created in production mode.
What am I doing wrong here?
The problem may be in your 'webpack.base.conf.js' as i suspected, thank you for sharing it, upon searching i've found an issue resolving your 'production not being detected' problem on github here
The solution requires that you change 'vue$': 'vue/dist/vue' to 'vue$': vue/dist/vue.min in production.
You will find the original answer as:
#ozee31 This alias 'vue$': 'vue/dist/vue' cause the problem, use vue/dist/vue.min in production environment.
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
})]
})
I upgraded my app from react-native 0.15 to 0.16 but after that I'm getting an error and I don't know how to solve it.
TypeError:undefined is not an object (evaluating 'GLOBAL.Text={
get defaultProps(){
throw getInvalidGlobalUseError('Text')}}')
In Chrome Debugger:
Uncaught Error: Uncaught TypeError: Cannot set property 'Text' of undefined
Thanks
OBS: I'm running on Android.
I notice that changing app name solves the problem, I'm using Evently as app name today. I tried to recreate my virtual machine but didn't solve it.
In my case, I was able to narrow the cause down to one item in my .babelrc file:
{
"presets": ["es2015"]
}
As soon as I removed that and restarted the packager (making sure to also use the --reset-cache flag), I stopped getting the error.
Update 2:
It looks like React Native is making some changes to their .babelrc in version 0.20.0. So, if you are using that version or newer, you should follow the instructions at: https://github.com/facebook/react-native/tree/master/babel-preset in order to specify your .babelrc settings.
Update:
I've narrowed this down further to transform-es2015-modules-commonjs, which React-Native sets some options on, specifically {"strict": false, "allowTopLevelThis": true}. The es2015 preset does not set this option, and it seems that the React-Native .babelrc does not override it. If you want to use es6 modules and transform them to commonjs, you'll need to put the following in your .babelrc:
{
"plugins": [
["transform-es2015-modules-commonjs", {"strict": false, "allowTopLevelThis": true}]
]
}
Note, Babel 6, which I updated to along with react-native 0.16.0, no longer contains any transforms by default. What I didn't initially realize is that the React-Native packager provides most of the transforms you might ever need (listed in their docs at: https://facebook.github.io/react-native/docs/javascript-environment.html#javascript-syntax-transformers), and I'm thinking that the "es2015" plugin interferes with some of those transformers.
I also tried using "babel-preset-react" (http://babeljs.io/docs/plugins/preset-react/), and that plugin did not seem to cause any errors.
I solve the problem. I think it was because permissions in project folder. I ran chown in my folder to correct the permissions problems and now all are working.
Thanks
In my case the problem was a rogue .babelrc two folders up (my root code folder); I had initiated a yeoman generator to scaffold out a new project using babel-6...accidentally running yeoman from the root code folder. Apparently babel traversed upwards from my project folders until it hit this .babelrc which borked the react-native babel configs...
^ this was originally an edit to my initial answer, which was deleted WHILE I WAS UPDATING IT
We're writing an app using webpack and babel-core 5.8.25.
At one point in time, this happens:
someArray.map(item => {
const updatedItem = Object.assign({}, item); // silently fails here... doesn't even continue the code
updatedItem.prop = 'something cool';
});
This is obviously compiled before hitting the browser. It works in the latest version of Chrome and the latest version of iOS Safari, but in Safari 8.0.7, it fails silently (no error thrown... just doesn't go past that line).
This, however, works as expected (using lodash):
someArray.map(item => {
const updatedItem = _.extend({}, item); // the important part
updatedItem.prop = 'something cool';
});
Any idea? I tried poking around the internet regarding this, but to no avail.
Object.assign works in Chrome because Chrome supports it natively. babel-loader on its own only converts ES6 syntax to ES5 syntax, it does not do anything to make ES6 library functionality available. The easiest way to do that with Webpack is to change your config from something like
entry: 'app.js'
to
entry: ['babel-core/polyfill', 'app.js']
// Or with Babel 6:
entry: ['babel-polyfill', 'app.js']
so that Webpack will also bundle and run the polyfill before executing your application. Babel provides /polyfill as an easy way to load the polfill, but it is optional because not everyone wants to use it, and because there are many polyfills available and the one Babel uses, core-js is just one of many.