Here I am having a little addiction problem with reaction-native since yesterday................
it completely blocks me from navigating to certain screens etc.
Here is a copy of package. json:
{
"name": "test2",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-native-scripts": "1.7.0",
"jest-expo": "^22.0.0",
"react-test-renderer": "16.0.0-beta.5"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js --watch"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"expo": "^22.0.2",
"mobx-react": "^4.3.4",
"react": "16.0.0-beta.5",
"react-native": "^0.49.5",
"react-native-elements": "^0.18.2",
"react-native-keyboard-aware-scroll-view": "^0.4.1",
"react-native-router-flux": "4.0.0-beta.23",
"react-navigation": "^1.0.0-beta.19"
}
}
How to install these outbuildings?
Where can I fix my problem if you've already had it, see?
thx!
You haven't installed the dependencies in your app. Either running
npm install
Has produced errors for those npm libraries, or it simply hasn't been run. Try running it, and if it still doesn't work, take a look at the contents of ./npm-debug.log for error messages related to it.
ETA: Looking closer, it seems that several of your dependencies require peers of specific versions of react, but you have a different version of react installed.
Are you using react#16.0.0-beta for a specific reason? Things like mobx are looking for react 13/14/15/16, but not 16b. I'd try this:
npm remove -S react
npm install -S react
and see if that works. If you were using the React beta for a reason, you may struggle to get these to talk to each other.
Related
I'm working on a nextjs webapp, it's a static website built with Chakra UI. Everything was working quite good till now but suddenly my productions stopped building. It is showing building forever. I'm deploying it on the Vercel but the same issue is arising there as well.
My previous deploymnt is live at https://siws.vercel.app and it's working fine but I'm not able to push another deployment due to this issue. And I don't even know the root cause of this.
I even tried deleting the ./next folder and building again but the facing the same issue.
Here is some information that maybe relevant:
Node JS version: 19.1.0
And here is my package.json file:
"name": "slayitwithskin",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#chakra-ui/react": "^2.4.1",
"#emotion/react": "^11.10.5",
"#emotion/styled": "^11.10.5",
"#splidejs/react-splide": "^0.7.12",
"eslint": "8.27.0",
"eslint-config-next": "13.0.3",
"framer-motion": "^7.6.6",
"next": "13.0.3",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.6.0",
"react-rainbow-components": "^1.31.0",
"sass": "^1.56.1"
}
}
Any sort of help is really appreciated.
I checked my package.json file, I was using react-rainbow-components which was the root cause of this issue. I completely removed and the app is now building quickly.
If it's a Gatsby, webpack or npm issue i don't understand yet.
I did these commands in terminal and they seem to have started the issue, trying to fix a material-ui "Popper" module that had a "could not find module" error.
npm install react-popper#next --save
npm install avj
npm install --save-dev webpack
npm install & npm update
Terminal:
error There was a problem loading the local develop command. Gatsby
may not be installed. Perhaps you need to run "npm install"?
Error: Cannot find module 'webpack/lib/removeAndDo'
package.json
{
"name": "auto-club-reviews",
"description": "Auto Club Reviews Blog",
"version": "1.0.0",
"author": "Sofianu Alin",
"dependencies": {
"#material-ui/core": "^1.4.3",
"#material-ui/icons": "^1.1.0",
"gatsby": "^1.9.277",
"gatsby-link": "^1.6.46",
"gatsby-plugin-feed": "^1.3.25",
"gatsby-plugin-google-analytics": "^1.0.31",
"gatsby-plugin-offline": "^1.0.18",
"gatsby-plugin-react-helmet": "^2.0.11",
"gatsby-plugin-react-next": "^1.0.11",
"gatsby-plugin-sharp": "^1.6.48",
"gatsby-plugin-typography": "^1.7.19",
"gatsby-remark-copy-linked-files": "^1.5.37",
"gatsby-remark-images": "^1.5.67",
"gatsby-remark-responsive-iframe": "^1.4.20",
"gatsby-remark-smartypants": "^1.4.12",
"gatsby-source-contentful": "^1.3.54",
"gatsby-source-filesystem": "^1.5.39",
"gatsby-transformer-remark": "^1.7.44",
"gatsby-transformer-sharp": "^1.6.27",
"lodash": "^4.17.10",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-helmet": "^5.2.0",
"react-hover": "^1.3.2",
"react-popper": "^1.0.2",
"typeface-roboto": "0.0.54"
},
"devDependencies": {
"eslint": "^5.3.0",
"eslint-plugin-react": "^7.10.0",
"gh-pages": "^1.2.0",
"html-webpack-plugin": "^3.2.0",
"prettier": "^1.14.2",
"webpack": "^4.16.5",
"webpack-command": "^0.4.1",
"webpack-dev-middleware": "^3.1.3",
"webpack-dev-server": "^3.1.5"
},
"homepage": "https://github.com/gatsbyjs/gatsby-starter-blog#readme",
"keywords": [
"gatsby"
],
"license": "MIT",
"main": "n/a",
"repository": {
"type": "git",
"url": "git+https://github.com/gatsbyjs/gatsby-starter-blog.git"
},
"scripts": {
"dev": "gatsby develop",
"lint": "./node_modules/.bin/eslint --ext .js,.jsx --ignore-pattern public .",
"test": "echo \"Error: no test specified\" && exit 1",
"format": "prettier --trailing-comma es5 --no-semi --single-quote --write 'src/**/*.js' 'src/**/*.md'",
"develop": "gatsby develop",
"build": "gatsby build",
"deploy": "gatsby build --prefix-paths && gh-pages -d public",
"fix-semi": "eslint --quiet --ignore-pattern node_modules --ignore-pattern public --parser babel-eslint --no-eslintrc --rule '{\"semi\": [2, \"never\"], \"no-extra-semi\": [2]}' --fix gatsby-node.js"
}
}
Also tried to:
delete node_modules then npm install;
uninstall "webpack-cli": "^3.1.0" and install webpack-commander;
uninstall extract-text-webpack-plugin that seemed to be complained about in terminal;
Any ideas comrades?
Have you been experimenting with Gatsby v2? Your package.json shows React v16, which is a peerDependency of Gatsby v2, but not of Gatsby v1. In Gatsby v1 (which is what you have in package.json) you should not install React directly, it's installed as a dependency of Gatsby.
Webpack is also (both v1 and v2) a dependency of Gatsby. I don't think you should have it in package.json as a top level dependency.
I would recommend starting with a clean Gatsby starter, then copying your gatsby-node.js, gatsby-config.js, components, content, etc, into that project. Leave the package.json file. Then run npm install --save for every package that you explicitly import or require. Hopefully that gets you back to a working site.
Sidenote, personally, I would also recommend yarn over npm.
Gatsby clean-cache
Then delete node modules
and then
yarn start/npm install
on-rest my project was working great untill I delete my node_modules file and try to re-install npm package.
I am getting this error
./node_modules/react-event-listener/dist/react-event-listener.cjs.js
Module not found: Can't resolve '#babel/runtime/helpers/builtin/classCallCheck' in '/Users/suatkarabacak/Desktop/demarkedashboard/node_modules/react-event-listener/dist'
My package.json is looking like this.
{
"name": "demo",
"version": "0.1.0",
"private": true,
"dependencies": {
"admin-on-rest": "^1.4.1",
"aor-dependent-input": "^1.2.0",
"aor-parseserver-client": "0.3.0",
"aor-rich-text-input": "^1.0.1",
"babel-runtime": "^6.26.0",
"parse": "^1.11.1",
"parse-react": "^0.5.2",
"prop-types": "^15.6.2",
"react": "^15.6.2",
"react-dom": "^15.6.2",
"react-image-lightbox": "^4.6.0",
"react-images": "^0.5.19"
},
"devDependencies": {
"#babel/runtime": "^7.0.0-beta.56",
"aor-color-input": "^1.2.1",
"babel-polyfill": "^6.23.0",
"react-scripts": "^1.1.4"
},
"homepage": "demo.html",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
There is no builtin folder.
What could be the problem ?
Since Babel 7.x is still a beta version, there was a breaking change in beta.56, which was released yesterday.
"#babel/runtime": "^7.0.0-beta.56",
If you're using a beta version of something, it is dangerous to use ^ in your version number, because that means it will accept any recent version, whether or not it is actually compatible with previous beta versions.
Since react-scripts uses https://github.com/facebook/create-react-app/blob/1407287839f94151cec729bd89441d4eee7d9dd3/packages/babel-preset-react-app/package.json#L28
"#babel/plugin-transform-runtime": "7.0.0-beta.46",
Your should likely have
"#babel/runtime": "7.0.0-beta.46",
in your own package.json to match.
In my case the problem was in relative paths and complex project structure, so that I had to specify exact location of my node_modules directory:
module.exports = {
resolve: {
modules: [
path.resolve(__dirname, "node_modules")
],
...
In case you are running into this because of your dependency on material-ui:
Looks like material-ui updated its package.json to reference '7.0.0-beta.42' instead of '^7.0.0-beta.42'
See Issue: 12409
If you want to use the 7.0.0-beta.56 version, the easiest solution is to create builtin/ folder manually inside helpers/ folder then, move or copy the contents of helpers folder inside helpers/builtin/ and you will not see this error message anymore.
In case you do have material ui in there, make sure you've installed all that you're importing like /icons,/core.
I've pulled a github repository containing code for a reactjs app into one of my directories but I can't find a way to run the app on my computer. I can start a new app using create-react-app but I can't/(don't know how to) use the existing app for instead ofa freshly created one.
I'm running Ubuntu 16.04.3 on a virtual machine, my node version is 4.2.6.
I've tried sudo apt-get install --only-upgrade nodejs but it simply says my node version is already up to date. (I include this because npm start gives me a bunch of errors and tells me that it may be because I might have to update node) but the app I create with create-react-app works fine?
The error:
Package.json:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap": "^3.3.7",
"express": "^4.16.2",
"package.json": "^2.0.1",
"prop-types": "^15.6.0",
"react": "^16.0.0",
"react-bootstrap": "^0.31.5",
"react-dom": "^16.0.0",
"react-router-dom": "^4.2.2",
"react-scripts": "1.0.14",
"uuid": "^3.1.0",
"webpack": "^3.8.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.6.1"
}
}
Carry out the following steps:
//Step 1:
git clone [repository url]
//Step 2:
cd [local repository]
//Step 3:
//Check package.json file and ensure scripts are notated as below:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
//Step 4:
/* Delete the node_modules folder and any 'lock' files such as
yarn.lock or package-lock.json if present.*/
//Step 5:
npm install
//Step 6:
npm start
To Note: There can be some conflict between yarn and npm when cloning from certain repositories. It's best to assume that every repo may need trimming before ultimately running npm install. I tested the above steps several times under several different factors. This is the best I have so far.
In case of issues shown after npm install, run the below to automatically fix the issues:
npm audit fix
Alternatively, use the below to see the errors:
npm audit
I'm trying to setup my create-react-app instance with webpack-dev-server.
This is my package.json file
{
"name": "reactgs",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-scripts": "1.0.14"
},
"scripts": {
"start": "react-scripts start",
"build": "webpack-dev-server --entry ./node_modules/react-scripts/bin/react-scripts.js --output-filename ./dist/bundle.js --inline --progress",
},
"devDependencies": {
"webpack-dev-server": "^2.9.1"
}
}
I don't have a webpack.config.js file.
When I run
npm run build
The output appears as
The following line runs fine.
npm start
I also have webpack setup fine on the same machine for a different project.
Does anyone know how to properly configure webpack for create-react-app?
npm start does the HMR for you out-of-the box. It will host your application using webpack-dev-server --hot itself. You just need to hook the HMR code to tell webpack what to watch and reload as necessary.
This GitHub conversation offers a pretty decent simple solution for hooking HMR (https://github.com/facebookincubator/create-react-app/issues/2317) with and without Redux.