I've gone through the 3 main causes of the infamous invalid hook call warning, and have determined that I have multiple versions of React in my app. I've confirmed this by this step:
// Add this in node_modules/react-dom/index.js
window.React1 = require('react');
// Add this in your component file
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2);
Based on my research, I understand that it is probably a dependency I have that is listing react as a dependency instead of a peer dependency, and that there are a few ways to solve this problem. However, I don't know how to figure out which package it is that is causing the issue.
There are lots of solutions online that are relevant to react (such as adding a webpack alias), but unfortunately are not for react-native. I have (perhaps naively) tried to add an alias with module-resolver to babel.config.js, but that did not work:
plugins: [
[
'module-resolver',
{
alias: path.resolve('node_modules/react'),
},
],
]
Figured this out after a long while. The issue was having react-dom library listed as a dependency. I'd read somewhere to do this to support jest testing, but I suppose that advice was dated.
Nonetheless the error was an obvious red herring, so hoping this can help someone out in the future
Related
I followed the laravel-mix documentation to reduce the size of my vue application by using the extract(['vue]) method, it works well, however when i try using async components it won't work properly.
i already added babel to enable the promise syntax
mix.js('resources/js/app.js', 'public/js').version().extract(['vue'])
{
"presets": ["#babel/preset-env"],
"plugins": ["#babel/plugin-syntax-dynamic-import"]
}
i'm hoping there is something i am missing here and its not a actual bug that i will have to wait for a patch, has anyone seen this issue before?
I just red this:
Warning: you can’t currently combine mix.extract() and async components. According to Laravel Mix this will be fixed when Webpack 5 gets released.
source: https://medium.com/maatwebsite/reducing-vue-application-file-size-with-laravel-mix-e483f746d836
I have upgraded to my app to react-native 60.4 which support Autolinking all packages so that you dont have to manually go about setting things up and thus lowers the chances of error.
The problem is most of the packages have still not gotten compatible with this process and henceforth the app completely breaks.
my error is with https://github.com/corymsmith/react-native-fabric
referring to an issue on the repo for the same -> https://github.com/corymsmith/react-native-fabric/issues/225, which still remains unanswered.
I started giving it a try by forking the repo and understanding the auto link process given by react native.
In the package.json of the node_module package i replaced
"rnpm": {
"android": {
"packageInstance": "new FabricPackage()"
}
},
with file in the package root react-native.config.js
module.exports = {
dependencies: {
'react-native-fabric': {
platforms: {
android: {
"packageImportPath": "import com.smixx.fabric.FabricPackage;",
"packageInstance": "new FabricPackage()"
}
}
}
}
};
I also updated the build gradle to 3.4.1 from 3.1.0
My react native app is able to now find the package.
But when i call the package in my react component i get NoClassDefFoundError, which means that class is not found.
Anybody else gave this a try and have a solution please let me know.
Try to unlink with react-native unlink and then re run your code again.
Putting it here from the above comment to make it more clear:
Ok i got this to work by changing the forked repo -> (adding a react-native.config.js in the root of the package with with auto discovery and link configurations), but i think the only scalable solution i see right now is to degrade to RN ^59.0 as not a lot of packages have auto link config changes. So will wait for RN 60.4 to mature and then upgrade to it in about a month. In addition to this fabric is currently migrating to firebase and plans to complete by year end. This mean that anyways the sdk integration is going to be obsolete and hence this package too.
Also this issue is majorly related to react-native-fabric and not RN itself.
After using #react-native-community/async-storage and transpile it with the following npm command in my react-native environment.
"test": "NODE_ENV=test ./node_modules/.bin/mocha --timeout 5000 --require #babel/register \"./src/shared/__tests__/**/*.spec.js\""
I did some research and in no vain. But I found it happens to Jest too.
jest test fails after installing react-native-async-storage
this is my babel.config.js
module.exports = {
env: {
production: {
},
test: {
presets: [
'#babel/preset-env'
],
},
},
};
I'm only testing non-jsx code only so #babel/preset-env seems to be working alright.
node_modules/#react-native-community/async-storage/lib/index.js:5
import AsyncStorage from './AsyncStorage';
^^^^^^^^^^^^
SyntaxError: Unexpected identifier
It seems like no one likes to answer jest newbie questions....
anyway, when starting to learn jest, I encountered some funny error messages that doesn't reflect the actual error. There are some possible situations a developer can consider.
You didn't to mock your module say A_module that is inside node_modules so one of the modules say B_modules inside A_modules uses a NativeModules from react so Jest cannot performa a test. Please look at stack trace or use a debugger to find out which one you prefer to mock.
Mock a module that uses NativeModules (similar to point 1, but more direct and concise )
You need to understand jest more thoroughly before you proceed. Reading documentation is good but jump to example when you think fit. especially check out the examples that you really need and read related ones. Many of the time, either your Babel setting or mocking methods is incorrect.
use jest.mock instead of jest.genMockFromModule. Why? there are some functions or init function that causes your test to crash at this statement. Because it calls NativeModules or something jest doesn't allow. use mock instead.
Solutions to this question: please refer to this most updated solution.
thanks
Currently, React Native dynamically requires a file for the running platform with an specific file extension, *.ios.js or *.android.js. However, when running this code inside a test environment, we get a require error because the module require('./module') cannot be found in the file tree, which looks like:
module.ios.js
module.android.js
How can we handle this issues in a test environment?
Adding platform specific extensions to moduleFileExtensions fixed the problem for me with jest.14.1. Credits to : github link
Here is a snippet from sample package.json which will run all files including scene.jest.js(x).
...
"jest": {
"verbose": true,
"preset": "jest-react-native",
"moduleFileExtensions": ["js", "android.js", "ios.js"],
"testRegex": "\\.scene\\.jest\\.jsx$"
}
...
As of Jest 17.0.0 you can use the defaultPlatform configuration for this - see the very bottom of the Jest React Native tutorial.
As it shows there, you would configure something like this:
"haste": {
"defaultPlatform": "ios",
"platforms": ["android", "ios"],
},
Naturally, this will mean your tests only load the iOS version of your component (or only Android, depending how you choose to configure it).
If you find it important to test both versions, you'll probably need to do something more like the solution mentioned in this issue, possibly manipulating Platform.OS and using require.requireActual directly.
(Might also want to track this issue, in case a less hacky solution is eventually found.)
It's kind of ugly and maybe there is a better solution but it seems that you can create a module.js file that will be used in tests but in platform environment it will still use the module.ios.js or module.android.js.
You need to create a custom compiler to resolve the platform specific dependencies in your tests. If you are using mocha, this will probably help you:
http://lidatang.com/setup-mocha-testing-react-native/
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