Module not found: Can't resolve 'react-native' - reactjs

I moved from npm to yarn and for some reason, although I imported the react-native library it doesn't recognize it, I get the error:
./src/App.js
Module not found: Can't resolve 'react-native' in '/var/react-projects/gymgains/src'
I delete the package.json.lock, also yarn.lock and tried again:
yarn
Yet it didn't solve the problem.
Here is my package.json:
{
"name": "App",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.8.3",
"react-dom": "^16.8.3",
"react-firebase-file-uploader": "^2.4.2",
"react-native": "^0.58.5",
"react-native-cli": "^2.0.1",
"react-scripts": "2.1.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
And here is my import statements:
import React, { Component } from 'react';
import firebase from 'firebase';
import { Text, View, Image } from 'react-native';
import 'firebase/firestore';
import FileUploader from 'react-firebase-file-uploader';
Is there a difference between running it with 'yarn start' to see it in the browser and push it to an Android to test it in the simulator, could that be the problem that react-native does not work in the web browser?
Any idea how to solve this issue?
Thanks

I had some very similar issue:
Module not found: Can't resolve 'react-native'
and in my case it helped me to do
yarn add react-native-web
As you do not have that module installed. You could give it a try.

Can you try npm install and see. I think your node_modules does not have react-native package.

Related

Why is AWS CodeBuild failing npm run build step when it is succeeding locally?

I have a ReactJS app that I am building and deploying with AWS CodePipeline.
My CodePipeline is triggered on pushes to Github. For some reason, the build is failing in CodeBuild with error:
[Container] 2021/01/18 02:59:02 Running command npm run build
> liferoll-web#0.1.0 build /codebuild/output/src739247890/src
> react-scripts build
Creating an optimized production build...
Failed to compile.
./src/App.tsx
Cannot find module: 'package-name'. Make sure this package is installed.
You can install this package by running: npm install package-name.
But is succeeding fine on other machines. This is so strange to me as the only place I can reproduce the error is on CodeBuild.
buildspec.yml
version: 0.2
phases:
pre_build:
commands:
- npm install
build:
commands:
- echo Build started on `date`
- npm run build
files:
- '**/*'
base-directory: build
package.json
{
"name": "my-website",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.3",
"#testing-library/user-event": "^12.6.0",
"#types/jest": "^26.0.20",
"#types/node": "^12.19.13",
"#types/react": "^16.14.2",
"#types/react-dom": "^16.9.10",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"react-stacked-carousel": "github:liferoll/react-stacked-carousel",
"typescript": "^4.1.3",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
App.tsx imports:
import React, {useRef, useState} from 'react';
import logo from './assets/liferoll-logo.png';
import iosDownloadSVG from './assets/download-ios.svg'
import qrCode from './assets/qrcode.png'
import loaderGif from './assets/loading.gif'
import clip1 from './assets/clip1.mov'
import clip2 from './assets/clip2.mov'
import clip3 from './assets/clip3.mov'
import clip4 from './assets/clip4.mov'
import './App.css';
//https://github.com/saadqbal/react-stacked-carousel/issues/1
import {StackedCarousel} from 'react-stacked-carousel'
import 'react-stacked-carousel/dist/index.css';
I have no idea how to correctly debug this and would appreciate guidance. Posting here to vet-out any obvious issues
There are many reasons why something would work the way you intend locally, but fail on a remote machine such as CodeBuild.
From the immediate error however, it's telling you that something is not installed or available at the time of building.
Cannot find module: 'package-name'. Make sure this package is installed.
This may not have to do with a direct import, but an import of something you're importing. My perception is your usage of "react-stacked-carousel" is abnormal and highly suspect.

Can't resolve 'react-native' in my project

I made the tutorial small project from React official site and when I tried using some native react components such as Text and ImageBackground and I get compilation error of:
Module not found: Can't resolve 'react-native' in ...
I created my project with "npx create-react-app".
That the import I made.
import { Text, ImageBackground } from 'react-native'
I tried doing npm install and npm install 'react-native-elements' and so on... nothing worked.
Anyway here's my package.json:
{
"name": "tutorial",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Any ideas?
React projects and React Native projects are different.
You have to use React Native CLI
For React Native Mobile App
Using this command to create react native project android and ios application.
npx react-native init AwesomeProject
You need some other configuration also to run this project like node.js,android studio, android sdk and xcode for ios. You can follow this link for more detail.
https://facebook.github.io/react-native/docs/getting-started
For React Web App
npx create-react-app above command is used for react native web app.
To create a new react-native project run this command from your cmd / terminal:
react-native init
The reason why you are facing this issue is that the required modules are not included in your package.json. Once you run the above mentioned command the npm will install all the required dependencies that are needed for your project.
The command that you have mentioned in your question doesn’t do what’s expected.

react-redux-firebase V3 issue

I got error
Error: Context from react-redux not found. If you are using react-redux v6 a v3.. version of react-redux-firebase is required.
I try steps in reference documentation, I did upgrade react-redux-firebase to version 3.0.0-alpha.6, but it did not work, I try downgrade react-redux to 4.4.9 but the same problem is still exist;
My JSON file
{
"name": "clientpanel",
"version": "0.1.0",
"private": true,
"dependencies": {
"firebase": "^5.8.1",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-redux": "6.0.0",
"react-redux-firebase": "2.2.6",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.3",
"redux": "^4.0.1",
"redux-firestore": "^0.6.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
How to fix error?
Download v3 as following:
npm i --save react-redux-firebase#latest
Then you can refactor your code to work with v3 as written here in the docs: https://github.com/prescottprue/react-redux-firebase/tree/next
2- Or just use react-redux v5.1.1
npm i --save react-redux#^5.0.0
I run into the same error and some TypeErrors just like you.
I think if you are using latest versions of react-redux-firebase and redux-firestore
the changed the way of using their provider so you might want to use the ReactReduxFirebaseProvider imported from react-redux-firebase and wrap your App component inside it, instead of using the reactReduxFirebase in your createStore function.
you might wanna take a look at this solution:
https://stackoverflow.com/a/62537595/10763842

Module not found: Can't resolve 'react' in 'C:\Users\USER\Desktop\test\src'

I had created a test named folder using create-react-app test and after successful creation of folder when doing npm start getting this error
Failed to compile.
./src/index.js
Module not found: Can't resolve 'react' in 'C:\Users\USER\Desktop\test\src'
package.json
{
"name": "test",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-scripts": "2.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
I had tried removing yarn.lock file then yarn install but error is not fixed.
Remove package-lock.json file.
Run npm install command.
Try to execute npm start again.
PS: You can also use pnpm instead of npm by installing its package via npm i -g pnpm command. pnpm package has some benefits compare to npm command that you can read the complete difference in this site.
Replace this line of code
import DatePicker from "react-datepicker";
replace by
import DatePicker from "../react-datepicker";
or else
have to install packages
npm install react-datepicker --save
If you are not using faker then remove from your index.js file
import Faker from 'faker';
Remove above line
I had encounter similar error, I wrote:
import ReactDOM from "react-dom ";
instead of :
import ReactDOM from "react-dom";
Remove the extra space or check for any syntax error.

Create React App executing tests with jest Unexpected token import

I am just a new developer on React. I have just starting a new app using the create-react-app plugin. After that I have customised my own App Component, but this is using some third party components which makes the npm run test (react-scripts test --env=jsdom) fails with an error:
SyntaxError: Unexpected token import
This error only happens for an import inside a dependency at node_modules I am using. For example, it gives no error on
import React, { Component } from 'react';
Since I am using the create-react-app plugin I do not know what I need to change to make it pass. However, it seems to be something related with some babel configurations missing.
I think I should not need to install babel-jest dependency since that is embedded with create-react-app.
I have also tried to execute, without success:
npm run test -- --no-cache
The package.json file:
{
"name": "dhis2-hello-world",
"version": "0.1.0",
"private": true,
"dependencies": {
"d2": "^28.3.0",
"d2-manifest": "^1.0.0",
"d2-ui": "^28.0.8",
"d2-utilizr": "^0.2.15",
"loglevel": "^1.6.0",
"material-ui": "^0.20.0",
"prop-types": "^15.6.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.0.17",
"rxjs": "^5.5.5"
},
"scripts": {
"prestart": "d2-manifest package.json ./public/manifest.webapp",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"manifest.webapp": {
"name": "DHIS2 App Template",
"description": "DHIS2 App Template",
"icons": {
"48": "icon.png"
},
"developer": {
"url": "",
"name": "DHIS2"
},
"activities": {
"dhis": {
"href": ".."
}
}
}
}
The error:
/node_modules/d2-ui/lib/app-header/HeaderBar.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import PropTypes from 'prop-types';
PropTypes is being imported on a component at d2-ui which is being import at App component like this:
import React, { Component } from 'react';
import HeaderBarComponent from 'd2-ui/lib/app-header/HeaderBar';
I was looking for a way to solve it without need to eject the project.
Could anyone give me some clues of how to solve that problem?
Many thanks!

Resources