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.
Related
I am trying to host my react application in Github Pages.
I've done the same thing with a Vue based project, and had no issues, but with React, things are different.
I have gone over the following tutorials:
Tutorial #1
Tutorial #2
I am able to deploy the application to Github Pages, but am seeing the following error:
Manifest: Line: 1, column: 1, Syntax error.
Yes, my manifest is found inside my public folder and I do not know where the problem originates from.
I've tried reading various SO questions relating to this subject, but haven't found anything that is relevant.
I also tried creating a vanilla react project and following the tutorials, but got the same issues.
This is my package.json file:
{
"name": "Random App Name",
"homepage": "https://github.com/TomerPacific/projectName",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"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"
]
},
"devDependencies": {
"gh-pages": "^3.1.0"
}
}
What is happening here? Is the problem a configuration issue?
Thanks to #Kibonge Murphy's suggestion, I checked the request url for all the network requests being made and found out that it was wrong.
Instead of having the URL of the Github page as the homepage key in the package.json file, I put in the URL of the repository.
Meaning,
I should have put this : https://tomerpacific.github.io/projectName/
Instead of https://github.com/TomerPacific/projectName
In my case this error was caused by the fact that the server sent a 404 error page instead of the manifest. In the sources tab of Chrome dev tools click on the file that is your manifest and confirm it's not a error page.
I have a create-react-app that I have successfully gotten up and running on my localhost, with all of the features of tailwind.css available for me to integrate with my JSX. It compiles fine and I used this tutorial to accomplish this: https://codingthesmartway.com/using-tailwind-css-with-react/.
An example of an error, commas representing new console log lines, is: npm ERR! react-tailwindcss#0.1.0 build:css: postcss src/styles/tailwind.css -o src/styles/main.css, npm ERR! spawn ENOENT, npm ERR!, npm ERR! Failed at the react-tailwindcss#0.1.0 build:css script. I used heroku logs --tail to get this information. I am at a loss as to how to fix this issue. This is the app: https://peaceful-island-18911.herokuapp.com/. It should look like (and does on my localhost) the end result of the tutorial mentioned. I know there has to be a way to get a react w/ tailwindcss app deployed to heroku and function as it does on localhost. I have done it before using the more common css framework bootstrap.
Below is my package.json file with my scripts and dependencies. I followed the tutorial I mentioned above for my file architecture. I am a newer dev so please go easy on me but any help or guidance in solving this issue will be greatly appreciated. I really hope this is a simple fix beginner mistake! Thank you.
{
"name": "react-tailwindcss",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
"scripts": {
"start": "npm run build:css && react-scripts start",
"build": "npm run build:css && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"build:css": "postcss src/styles/tailwind.css -o src/styles/main.css",
"prebuild": "npm run build:css",
"prestart": "npm run build:css"
},
"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"
]
},
"devDependencies": {
"autoprefixer": "^9.8.6",
"postcss-cli": "^7.1.1",
"tailwindcss": "^1.6.2"
}
}
I created a new react project using Create-React-App. In the old projects, Whenever I did the changes in the component and save the component it will reflect in the browser, but in the new project when I saved the changes in the code the browser did not reload and not reflect the changes. So I stopped the running process and again giving the npm start
Here is my package.json file.
{
"name": "new-application",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-redux": "^7.1.3",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0",
"redux": "^4.0.5"
},
"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"
]
},
"devDependencies": {
"redux-devtools": "^3.5.0",
"webpack": "^4.41.5"
}
}
Can I add something in package.json to reload the browser automatically whenever I done changes?
I had a similar (or event the same) problem and I changed starting command in the package.json file by adding following flags: --watch --watch-poll to the webpack-dev-server:
{
//...
"scripts": {
"start": "webpack-dev-server --env.ENVIRONMENT=development --content-base src/ --mode development --watch --watch-poll",
// ...
}
// ...
}
Now, using npm start and then changing src files I can see changes in the browser.
Please here https://webpack.js.org/configuration/watch/ for more options.
Install your app again using :
npx create-react-app appname
And don't edit package.json
If you prefer not modifying the package.json you can reinstall your project.
Two ways for that.
With git:
Push your project on git
Clear the project's folder on your computer
git clone https://github.com/my-account/my-project.git
npm install
Without git:
Back up the content of your project except for node_modules
Clear the project's folder except for package.json
npm install
Paste the files you backed up
I try to deploy my react web app to github pages but when i can't find website online
In the console, it says that the app is ready to publish and i should run command npm run deploy but i see the same message every time i run that command
Here's package.json file:
{
"name": "weather-app",
"version": "0.1.0",
"private": true,
"homepage": "http://shotiko-forecast.github.io/weather",
"dependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-redux": "^7.1.3",
"react-scripts": "1.1.4",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
install dependencies to the project.
> npm i gh-pages
In your package.json add script and homepage
"homepage": "https://username.github.io/repo-name",
"scripts": {
"deploy": "gh-pages -d build"
}
run build Script to build for production
npm run build
run deploy script to deploy your code to the-pages it automatically push on git-hub gh-pages branch and auto-selected on gh-pages branch you can check settings > GitHub pages.
npm run deploy
now it time to check your
https://username.github.io/repo-name
The name of your React app is weather-app. I assume that the github repository for the app is named as weather-app. There is an error in your package.json file. The homepage property is set incorrectly.
It should be set as,
"homepage": "http://<<github-user-name>>.github.io/<<github-repo-name>>"
In your case, change weather to weather-app and everything should work fine
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.