I tried to install react-bootstrap and followed these instructions:
https://react-bootstrap.github.io/getting-started/introduction
However after starting the app (simulated device via Android Studio) I receive this error:
error: bundling failed: Error: Unable to resolve module `bootstrap/dist/css/bootstrap.min.css` from `index.js`: bootstrap/dist/css/bootstrap.min.css could not be found within the project.
My dependencies are as follows:
"dependencies": {
"bootstrap": "^4.4.1",
"react": "16.9.0",
"react-bootstrap": "^1.0.0-beta.16",
"react-native": "0.61.5"
And both modules are within node_modules and so is the file bootstrap.min.css.
I tried things like
import 'bootstrap/dist/css/bootstrap.min.css';
import './node_modules/bootstrap/dist/css/bootstrap.min.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; (should be wrong anyways);
(in index.js and also App.js like mentioned in the instructions)
I also read here:
https://github.com/reactstrap/reactstrap/issues/1325
and here:
Can't resolve '../node_modules/bootstrap/dist/css/bootstrap.min.css'?
but I have the import like in the given answer.
I tried an older version of react-bootstrap and bootstrap and I deleted all node_modules and resinstalled them even though the "missing" file is there.
My project is basically a vanilla react-native project.
I just started with npx react-native init name and tried to add bootstrap, so nothing has changed.
What is the issue here?
Problem is you are trying to use react bootstrap with react-native project.
react-bootstrap : only support react.js projects not in react-native
Related
Adding react-native-web package to existing RN app (made with react-native init). Following the setup from this site:
https://arry.medium.com/how-to-add-react-native-web-to-an-existing-react-native-project-eb98c952c12f
The project compiles successfully, but in the browser I get a blank white screen and an error that loops:
Uncaught TypeError: Cannot read properties of undefined (reading 'isBatchingLegacy')
I can't find anything about this error, I have traced the relevant files and am not sure how to proceed.
I had the same error message while running test after upgrading react-test-renderer package from v17 to v18. So in my case, I had to downgrade react-test-renderer from v18 to v17 or upgrading react from v17 to v18 also worked to correct this error.
According to this discussion, isBatchingLegacy is a deprecated function in react-test-renderer.
So, I'm not sure about it, because I don't know which packages do you have in your existing RN app, but you can maybe check the packages version you have in order to see if the error could come from here.
I run into the same problem. Make sure all React dependencies are on the same version in your package.json.
"react": "~18.0.0",
"react-dom": "^18.0.0",
"react-test-renderer": "^18.0.0"
Thanks for this, I just spent 4 hours trying to figure out why I got the same error as you with react-native-testing-library
import { render } from "#testing-library/react-native";
I downgraded the types on my package.json
"devDependencies": {
"#testing-library/react-native": "^9.1.0",
"jest": "26",
...
--"#types/react-test-renderer": "18.0.0",
++"#types/react-test-renderer": "17.0.1",
}
It's working now
I am trying to include tests in my App created with Expo, but I am facing errors with AsyncStorage module
Could not find module '#react-native-async-storage/async-storage' from 'src/pages/Welcome.tsx'
I tested some configurations of the jest/expo to avoid this error, as downgrade the jest to version 26 as suggested in a GitHub issue of the project, using a mock directory as suggested here and in the official documentation here, and using jest setup file. Details below.
When I try with mock directory nothing changes in the error. The execution ignores the mock directory. When using the jest setup file the only change in the error message is that the message point to the jest setup file instead of the welcome.tsx.
The page tested is the "Welcome.tsx" that import the AsyncStorage
The test has nothing, only a a console log (code below) and don't use the AsyncStorage
The test code
const {getAllByTestId} = renderer.create(<Welcome />);
console.log(getAllByTestId);
The Welcome.tsx
...
<Image source=... testID="WelcomeImage" />
...
package.json
...
"scripts": { ... "test": "jest" ...},
"jest:" {
"preset": "jest-expo",
"globals": { "DEV": true
}
...
Installed versions
React: 17.0.1
React native: 0.64.3
React native testing library: 6.0.0
React test renderer: 17
Jest: 27.4.5
Follow the directions at - https://react-native-async-storage.github.io/async-storage/docs/advanced/jest/
Here is what I did:
Setup jestSetupFile.js as mentioned.
Setup mocks/#react-native-async-storage directory as mentioned
(I know it mentions to use either of two but I did both)
Cleared npm cache, deleted node-modules folder, deleted package-lock.json and did npm i again.(The usual steps to a clean start)
And it works now. Although I get error for enzyme but that is not within the scope of this question.
React Native version:
0.64.0
Steps To Reproduce
[Repo-code]https://github.com/rsoni5519/lerna-react-native
Please use above link and follow the steps described in README.
Expected Results
The App should work when we are clicking on Track buttons. it should console values for respective button events.
userAgent and screenSize should work for DeviceInfo and Dimensions.
Module_JsTimer_Issue
steps to reproduce
Error occurred because of cyclic dependency of react-native pakcage.
Use this repository for solution [a link] (https://github.com/vishalkhoje/cyclicImportReactNative)!
Here problem is install react-native-device-info package as
dependency into your root project not in your custom package.
In your custom package use react-native-device-info adn react-native as a peer dependancy.
Ex. This is in your custom package.json file, important is version of package is same as root project package.json file.
"peerDependencies": {
"react-native": "^0.64.1",
"#types/react-native": "^0.64.5",
"react-native-device-info": "^8.1.2"
}
This will solve your problem.
![Output screenshot:]
I am trying to communicate from react native to native by following this
I am able to generate the library without any issues, but when I am referencing that in my code like
import MyLibrary from 'react-native-my-library'
I am getting the following error.
error: bundling failed: Error: Unable to resolve module warnOnce from react-native-my-library/node_modules/react-native/Libraries/react-native/react-native-implementation.js: warnOnce could not be found within the project.
But, as rickhanlonii is suggesting I do have warnOnce file be in ./node_modules/react-native/Libraries/Utilities/warnOnce.js and I followed his instruction but cannot get this resolved.
I would really appreciate any help.
My package.json
"react": "16.9.0",
"react-native": "0.61.3",
After upgrade of RN from 0.59.10 to 0.61.4 I get:
TypeError: hmrClient.send is not a function
when trying to start the app. Just pressing on dismiss seems to work.
Other people suggest removing metro and metro-core and setting
setting metro-react-native-babel-preset to 0.56 but that doesn't seem to work for me.
Issue was reported here:
https://github.com/facebook/react-native/issues/26958
The issue was related to an old metro-config module.
I had an old version of "react-native-fs": "2.13.3". This had a dependency on metro-config#0.48.3.
I updated react-native-fs to 2.16.2 (2.16.x is recommended for RN 0.60+) and the error disappeared.
Also I made sure in package.json I have: "metro-react-native-babel-preset": "0.56.0".
Sources:
I got the metro-config hint from huntie's answer from here:
https://github.com/facebook/react-native/issues/26958#issuecomment-558653561
Note: if you have an old dependency that cannot be updated adding:
"resolutions": {
"metro-config": "0.56.3"
},
in the package.json could also fix the issue.
I had the same error displaying every time I ran/refreshed the app and fast refresh was not working for me. I have a react native (0.63.3) app with an init without expo.
This worked for me:
yarn add metro#0.56.0
from: https://www.gitmemory.com/issue/react-native-community/releases/140/530142204