The app installs and opens but right when it opens this red screen appears with the below error message.
TBH I am not quite sure what I am doing and I really need some help. I was able to get my other project to work but when I started my second project this came up when trying to run the code. The code is just the basic code you get when you run: react-native init projectName
Change the version of "babel-preset-react-native" to "4.0.0". For the lastest version 5.0.0, the issue arises.
Run npm install after the version change. Then start the emulator.
Even then if you face issue, delete your node_modules directory, repeat step 1.
Restart your machine if you see the issue again even after all tries.
Check github issue
I got the above mentioned error just now. I am using React Native v0.57 and my json file had this
{
"name": "AwesomeProject",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.5.0",
"react-native": "0.57.1"
},
"devDependencies": {
"babel-jest": "23.6.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.45.6",
"react-test-renderer": "16.5.0"
},
"jest": {
"preset": "react-native"
}
}
I added "babel-preset-react-native": "4.0.0", and removed "metro-react-native-babel-preset": "0.45.6" in the "devDependencies" and the error was resolved.
Jonathan's solution worked for me as well:
Fixed. babel pushed an update that pushed to 5.0.0. set your presets to 4.0.0 and it will fix it.
https://github.com/facebook/react-native/issues/18962
I have upgraded to
"react-native": 0.57.7
"metro-react-native-babel-preset": "0.48.5",
Now the bundle is loading as expected.
My current version:
"react-native": "0.57.8",
"metro-react-native-babel-preset": "0.51.1",
Here how I fixed:
add
"devDependencies": {
"babel-preset-react-native": "4.0.0"
},
remove node_modules
npm install
Voilà! It works!
Fixed. babel pushed an update that pushed to 5.0.0. set your presets to 4.0.0 and it will fix it.
https://github.com/facebook/react-native/issues/18962
^^ what they said... change your "babel-preset-react-native" to 4.0.0 .
Try this command
react-native upgrade
Had the same issue. Downgrading to "babel-preset-react-native": "4.0.0", did not work.
running this worked for me
npm add #babel/runtime
Try the followings:
clean the build folder and try again.
run react-native start --reset-cache in one tab
and then
run react-native in another tab
For me this answer worked:
https://stackoverflow.com/a/40966360/4483716
Basically I needed to give permission to folder
/Users/[username]/Library/LaunchAgents.
Use this command:
$ sudo chown $(whoami) /Users/$(whoami)/Library/LaunchAgents
Add babel-preset-react-native version 4.0.0 to your devDependencies in package.json
"devDependencies": {
"babel-preset-react-native": "4.0.0"
},
npm install
react-native run-ios or android
If it still doesn't work try rm -rf node_modules/ and redo step 2 & 3
Related
I'm currently trying to deploy a Remix App to Netlify and followed the steps described in the Netlify docs.
However, as soon as I try to deploy the site (netlify deploy), Netlify complains about some missing dependencies I never directly imported into my project.
// e.g.
Error: In file "C:\..\PROJECT_NAME\.netlify\functions-internal\server.js"
Cannot find module '#react-hook/debounce'
I would be fine to add one or two deps, but it seems like I've to add 10+ deps.
So I guess it has a deeper reason I couldn't figure out yet.
Note: The green marked deps I had already to add, and I'm still not finished.
The next dep I'm supposed to add is #react-hook/debounce. Then I will run pnpm install -D #react-hook/debounce and netlify deploy, wait 20s and it will complain about the next missing dependency, and so on.
I set up a new project from scratch following this tutorial.
However, there occurs the same issue as described above.
I'm using pnpm as package manager. As described in this blog Netlify claims to support pnpm out of the box.
Useful Resources (from the new setup project)
netlify.toml
[build]
command = "pnpm run build"
publish = "public"
[dev]
command = "remix watch"
port = 3000
[[redirects]]
from = "/*"
to = "/.netlify/functions/server"
status = 200
[[headers]]
for = "/build/*"
[headers.values]
"Cache-Control" = "public, max-age=31536000, s-maxage=31536000"
package.json (without added deps)
{
"private": true,
"sideEffects": false,
"scripts": {
"build": "pnpm run build:css && remix build",
"build:css": "tailwindcss -m -i ./styles/app.css -o app/styles/app.css",
"dev": "concurrently \"pnpm run dev:css\" \"remix dev\"",
"dev:css": "tailwindcss -w -i ./styles/app.css -o app/styles/app.css"
},
"dependencies": {
"#netlify/functions": "^1.0.0",
"#remix-run/netlify": "^1.7.3",
"#remix-run/node": "^1.7.3",
"#remix-run/react": "^1.7.3",
"cross-env": "^7.0.3",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"#remix-run/dev": "^1.7.3",
"#remix-run/eslint-config": "^1.7.3",
"#remix-run/serve": "^1.7.3",
"#types/react": "^18.0.15",
"#types/react-dom": "^18.0.6",
"autoprefixer": "^10.4.12",
"concurrently": "^7.5.0",
"eslint": "^8.23.1",
"postcss": "^8.4.18",
"tailwindcss": "^3.2.1",
"typescript": "^4.7.4"
},
"engines": {
"node": ">=14"
}
}
remix.config.js
/** #type {import('#remix-run/dev').AppConfig} */
module.exports = {
serverBuildTarget: "netlify",
server:
process.env.NETLIFY || process.env.NETLIFY_LOCAL
? "./server.js"
: undefined,
ignoredRouteFiles: ["**/.*"],
// appDirectory: "app",
// assetsBuildDirectory: "public/build",
// serverBuildPath: ".netlify/functions-internal/server.js",
// publicPath: "/build/",
};
The issue occurred because pnpm has another node_modules structure than yarn or npm which Netlify currently can't handle.
Luckily pnpm offers a flag --shamefully-hoist which
creates a flat node_modules structure, similar to that of npm or yarn.
-> To resolve the issue, you need to run your pnpm install with --shamefully-hoist. So, simply add the Environment Variable PNPM_FLAGS with the value --shamefully-hoist to your netlify.toml config.
// ..
[build.environment]
PNPM_FLAGS = "--shamefully-hoist"
// ..
Further details:
https://answers.netlify.com/t/nuxt-3-deploy-failed-rollup-failed-to-resolve-import-vue/77680/9
I am working with create-react-app + typescript + eslint application and during build have such error:
Line 1:8: 'React' was used before it was defined #typescript-eslint/no-use-before-define
Code in my component starts with:
import React from "react";
Eslint settings:
module.exports = {
parser: "#typescript-eslint/parser",
parserOptions: {
ecmaVersion: 2020,
sourceType: "module",
ecmaFeatures: {
jsx: true
}
},
settings: {
react: {
version: "detect"
}
},
extends: [
"plugin:react/recommended",
"plugin:#typescript-eslint/recommended",
"prettier/#typescript-eslint",
"plugin:prettier/recommended"
],
rules: {
"#typescript-eslint/explicit-module-boundary-types": 0,
"#typescript-eslint/triple-slash-reference": 0,
"no-use-before-define": "off",
"#typescript-eslint/no-use-before-define": "off"
},
};
Some part of package.json:
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^4.1.0",
"#typescript-eslint/parser": "^4.1.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.6.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-react": "^7.20.0",
"prettier": "^2.0.5",
"start-server-and-test": "^1.11.3"
},
"dependencies": {
...
"react-scripts": "3.4.3",
...
}
I tried:
Read https://github.com/typescript-eslint/typescript-eslint/issues/2502
Disable #typescript-eslint/no-use-before-define and no-use-before-define in .eslintrc.js
Actually I tried to delete .eslintrc.js at all, but had the same error.
From the official documentation.
"rules": {
// note you must disable the base rule as it can report incorrect errors
"no-use-before-define": "off",
"#typescript-eslint/no-use-before-define": ["error"]
}
The bug occurs due to mismatch of #typescript-eslint versions in react-scripts and your local package.json - GitHub issue
You can downgrade the packages until react-scripts updates their version.
"#typescript-eslint/eslint-plugin": "4.0.1",
"#typescript-eslint/parser": "4.0.1",
EDIT 2020-09-14
It seems the bug is not related to react-scripts version of #typescript-eslint since multiple people reported the same bug without using react-scripts.
Anyway, the workaround remains the same - downgrade to the working version of #typescript-eslint until the fix is available.
EDIT 2020-10-24
react-scripts#4.0.0 has been published with updated #typescript-eslint. Using the newest version should solve the issue.
EDIT 2020-11-04
If after upgrading the packages the error is still there, most probably your eslint config uses the wrong rule. Check out Igor's answer to fix it.
If you are only getting this error for .js files, make sure #typescript-eslint/parser is being used exclusively on Typescript files.
.eslintrc.json (abbreviated)
{
"overrides": [
{
"files": ["**/*.ts", "**/*.tsx"],
"plugins": ["#typescript-eslint"],
"rules": {
"no-use-before-define": "off",
"#typescript-eslint/no-use-before-define": ["error"],
},
}
],
// WRONG: Do not use #typescript-eslint/parser on JS files
// "parser": "#typescript-eslint/parser",
"plugins": [
"react",
// "#typescript-eslint"
],
}
That is how I resolved my problem.
First of all, go to the node_modules/react-scripts/config/webpack.config.js and change cache to false, because this will help you to understand what works and what is not then you changing eslint file. I found it here
cache: true, // You can set it to false
formatter: require.resolve('react-dev-utils/eslintFormatter'),
Add ENV varialbe to .env file. More info
EXTEND_ESLINT=true
From now CRA will have to use your local eslint for linting during your build and we have control to disable some rules, in my case in .eslintrc:
rules: {
"#typescript-eslint/no-use-before-define": "off"
},
I landed on this page after I started getting issues with a Gatsby project that was using Typescript and an ESLint config that extended eslint-config-airbnb-typescript. In addition to OP's error, ESLint was also giving errors on various rules not being defined, like Definition for rule '#typescript-eslint/no-redeclare' was not found. and a few others.
The underlying problem ended up being that Gatsby was using fairly old versions of both #typescript-eslint/eslint-plugin and #typescript-eslint/parser. Forcing yarn to install only up-to-date versions solved the issue:
// package.json
"resolutions": {
"#typescript-eslint/eslint-plugin": "^4.4.0",
"#typescript-eslint/parser": "^4.4.0"
}
My fix for that:
Use eslint 6 as react-scripts is using
Force react scripts to use newer #typescript-eslint packages as the rest of the repo.
I'm using selective resolution here
"resolutions": {
"**/react-scripts/**/#typescript-eslint/eslint-plugin": "^4.4.1",
"**/react-scripts/**/#typescript-eslint/parser": "^4.4.1"
}
#typescript-eslint 4.x does still support es6
I got this error from the airbnb-base ruleset in a typescript project. Also extending airbnb-typescript (that has the correct rules for typescript) resolved the issue.
This has been resolved in 4.4.0. Upgrade these dependencies to version 4.4.0
Update: This may work for some use cases. This resolved my issue.
"#typescript-eslint/eslint-plugin": "^4.4.0",
"#typescript-eslint/parser": "^4.4.0",
I just wanted to add that for me, I did the following.
Removed all eslint related dependencies from package.json if they were already included in package-lock.json by react-scripts (for me that was all of them)
Deleted my node_modules folder, and package-lock.json file
Ran npm install
After completing those steps I finally got that error to go away. I prefer removing the dependencies to downgrading them since this will help avoid the same issue happening again in the future.
Try adding import/resolver to your Eslint settings:
"settings": {
"react": { "version": "detect" },
"import/resolver": { "typescript": {} }
}
Maybe you will need to install it too:
$ yarn add -D eslint-import-resolver-typescript
If that doesn't work, you could change this rule
"#typescript-eslint/no-use-before-define": "off"
like this:
"no-use-before-define": "off"
It is an issue present in ESLINT.
The way I resolve is to add the following lines to the ESLINT/rules:
"no-use-before-define": [0],
"# typescript-eslint / no-use-before-define": [1],
If you use Create React App. Getting the latest version of react-scripts fixed this issue for me. Currently: 4.0.3
// Get this specific version:
npm uninstall react-scripts
npm install react-scripts#4.0.3
// Get latest version:
npm uninstall react-scripts
npm install react-scripts
(not enough rep to comment)
#sashko's workaround seems to work - deleting node_modules was necessary as well.
One thing I missed was the caret in "^4.0.1". The version needs to be fixed without the caret ^, which seems to be the issue that #Rolly is having. Make sure it's 4.0.1.
Only a workaround until react-scripts updates to v4 (I'm using create-react-app)
deleting the node_modules folder and reinstalling it worked for me. I'm using yarn as package manager.
I deleted packages #typescript-eslint/eslint-plugin and #typescript-eslint/parser from my package.json,
deleted node_modules and package-lock.json,
reinstalled packages: npm install
The error disappeared.
UPDATE
After that create-react-app uses their own #typescript-eslint/eslint-plugin module which is deprecated.
This Answer worked for me in a react-native project(airbnb style guide)
Extend your rules with airbnb-typescript inside the .eslintrc.json
"extends": {
"airbnb-typescript"
}
Press ctrl+shift+p or cmd+shift+p >Reload window (or simply close and re-open vscode)
Try using Yarn instead of NPM (make sure to remove your node_modules in between).
This worked for me.
I am working on my React Native app built with expo. Today I was really bothered by the console that all the time was reminding me that there is a new version of expo, so I decided to update it. I followed the steps given on the expo docs. Everything in update seemed working fine but in nearly a half command :
expo upgrade stacked and returned me this error expo NPM ERR
I listed previous solutions that I should check my package.json file and app.json file to match the sdk versions but I got all three set up on the same :
{
"expo": {
"name": "bakalarka",
"slug": "bakalarka",
"privacy": "public",
"sdkVersion": "36.0.0", ...
and my package.json file:
"dependencies": {
"core-js": "^3.6.4",
"expo": "^36.0.0",
"expo-font": "~8.0.0",
"expo-image-picker": "~8.0.1",
"expo-linear-gradient": "~8.0.0",
"linear-gradient": "^1.0.6",
"moment": "^2.24.0",
"react": "16.9.0",
"react-dom": "16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz", ...
When I just want to start the app my Android emulator shows me error as: React native version mismatch.
Does anyone know where might be the problem?
Thank you in advance! :)
Execute expo update from your project.
Try replacing your last line with:
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz",
Have you tried following?
deleting your node_modules
npm install
use it
ncu -u
to your cmd, it will update your expo SDK
I've confirmed it 100% although I cannot diff the node_modules to determine how. But here's the issue.
Versions:
"react": "^16.6.3",
"react-dom": "^16.6.3",
"mobx": "^5.6.0",
"mobx-react": "^5.4.2"
"devDependencies": {
"#storybook/addon-actions": "^4.0.9",
"#storybook/addon-knobs": "^4.0.9",
"#storybook/addon-links": "^4.0.9",
"#storybook/addon-notes": "^4.0.8",
"#storybook/react": "^4.0.9"
}
When I run npm run start before installing storybook, my application runs which has a hefty amount of necessary #observable usage. None of the observables are undefined at this point, which is great and expected.
After I run npm i --save-dev #storybook/react #storybook/addon-notes #storybook/addon-links #storybook/addon-actions #storybook/addon-knobs
and then run npm run start again, I get a full on Failure to compile error. In my AppStore.js (which I cannot disclose) as the source of undefined variables I use the #observable decorator in. The failure message shows all of those and declared #observable in two other components using #observable as undefined.
I don't understand how adding storybook would break MobX or MobX-react at runtime. If anything, I would think that it would be npm run storybook that would cause errors. I thought maybe it's because of webpack.config.js in .storybook directory, but I can't be sure.
Also, for anyone who would think the problem is babel plugins, it is not. I am correctly using this in the correct order:
"babel": {
"plugins": [
"transform-decorators-legacy"
],
"presets": [
"react-app"
]
},
Lastly, when I run npm uninstall --save-dev #storybook/react #storybook/addon-notes #storybook/addon-links #storybook/addon-actions #storybook/addon-knobs
running npm run start works fine!
I'll try to answer my own question here. It's difficult to determine what in node_modules from storybook is affecting runtime for Mobx in webpack config.
Please help or make any suggestion!
I used Reactjs and webpack to start a project, and when I run the "node server" in the command prompt, there is an error like this:
And the chrome explorer opened successful but also have problems as follows:
The github is: (github.com/Yangqin0607/gallery)
Here is the package.json
{
"private": true,
"version": "0.0.1",
"description": "YOUR DESCRIPTION - Generated by generator-react-webpack",
"main": "",
"scripts": {
"clean": "rimraf dist/*",
"copy": "copyfiles -f ./src/index.html ./src/favicon.ico ./dist",
"dist": "npm run copy & webpack --env=dist",
"lint": "eslint ./src",
"posttest": "npm run lint",
"release:major": "npm version major && npm publish && git push --follow-tags",
"release:minor": "npm version minor && npm publish && git push --follow-tags",
"release:patch": "npm version patch && npm publish && git push --follow-tags",
"serve": "node server.js --env=dev",
"serve:dist": "node server.js --env=dist",
"start": "node server.js --env=dev",
"test": "karma start",
"test:watch": "karma start --autoWatch=true --singleRun=false"
},
"repository": "",
"keywords": [],
"author": "Your name here",
"devDependencies": {
"babel-core": "^6.0.0",
"babel-eslint": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.0.15",
"babel-preset-react": "^6.0.15",
"babel-preset-stage-0": "^6.5.0",
"bower-webpack-plugin": "^0.1.9",
"chai": "^3.2.0",
"copyfiles": "^1.0.0",
"css-loader": "^0.23.0",
"eslint": "^3.0.0",
"eslint-loader": "^1.0.0",
"eslint-plugin-react": "^6.0.0",
"file-loader": "^0.9.0",
"glob": "^7.0.0",
"isparta-instrumenter-loader": "^1.0.0",
"karma": "^1.0.0",
"karma-chai": "^0.1.0",
"karma-coverage": "^1.0.0",
"karma-mocha": "^1.0.0",
"karma-mocha-reporter": "^2.0.0",
"karma-phantomjs-launcher": "^1.0.0",
"karma-sourcemap-loader": "^0.3.5",
"karma-webpack": "^1.7.0",
"minimist": "^1.2.0",
"mocha": "^3.0.0",
"null-loader": "^0.1.1",
"open": "0.0.5",
"phantomjs-prebuilt": "^2.0.0",
"react-addons-test-utils": "^15.0.0",
"react-hot-loader": "^1.2.9",
"rimraf": "^2.4.3",
"style-loader": "^0.13.0",
"url-loader": "^0.5.6",
"webpack": "^1.12.0",
"webpack-dev-server": "^1.12.0"
},
"dependencies": {
"core-js": "^2.0.0",
"normalize.css": "^4.0.0",
"react": "^15.0.0",
"react-dom": "^15.0.0"
}
}
This issue is related to the react-hot-loader package. You are using an old version that relies on the ReactMount.js file being present in the node_modules/react/lib folder.
There is no easy one way fix for that but you have a few options which are:
Try to follow the instructions here: https://github.com/gaearon/react-hot-loader/blob/v3.0.0-beta.6/docs/README.md#usage-with-external-react (but I have been unlucky so far)
Remove the hot reloader for react (in your webpack.config remove the 'react-hot' loader)
Update the react-hot-loader package to version 3 (here is how to do so: https://github.com/gaearon/redux-devtools/commit/64f58b7010a1b2a71ad16716eb37ac1031f93915). But note that this package has been in alpha for a while now...
Rollback your react version to one that includes the ReactMount.js in the lib folder (15.0.1 used to have this file not sure when it stopped).
Update: React Hot Loader 3 is now in beta with a more comprehensive upgrade guide: https://github.com/gaearon/react-hot-loader/tree/v3.0.0-beta.7/docs#migration-to-30
None of the above solutions worked for me.
Spent the rest of the day in a rabbit hole of github issues/comments, weighing the pros/cons/feasibility of various hacky workarounds.
The quickest, simplest, "I just want to work on the original problem I intended to work on today" fix that worked for me comes from: https://github.com/gaearon/react-hot-loader/issues/417#issuecomment-261548082
In your webpack config, add the following alias to the resolve section:
resolve: {
alias: { 'react/lib/ReactMount': 'react-dom/lib/ReactMount' }
}
This is not a stable long term fix, this is a development only fix so you can continue developing without being forced to deal with upgrade issues out of the blue.
I'm still not 100% sure why I'm seeing this problem in my one app and not another, both were generated from fountain.js react-redux generator and have identical package.json.
You are using an outdated react-hot-loader package that uses the internal react api throught react\lib\ReactMount. Now react doesn't allow this hence the problem.
Try updating it to the latest version:
$ npm install --save-dev react-hot-loader#latest
Thank you for all your answers. I have solved my problems.
" This issue is related to the react-hot-loader package. You are using an old version that relies on the ReactMount.js file being present in the node_modules/react/lib folder." said by cheesemacfly.
So here is the solution for me:
1) updating the react-hot-loader to the latest version
npm install --save-dev react-hot-loader#latest
but here is another problem linked with react-hot-loader
2) so I removed the react-hot-loader from 'cfg/dev.js'
change the code
loader: 'react-hot!babel-loader'
into
loader: 'babel-loader'
Many thanks to cheesemacfly, I was able to solve the same issue with your suggestion to remove 'react-hot' from the loader.
{
test: /\.(js|jsx)$/,
loaders: ['react-hot', 'babel'],
exclude: /(node_modules|lib\/ckeditor)/
}
I Changed to:
{
test: /\.(js|jsx)$/,
loader: 'babel',
exclude: /(node_modules|lib\/ckeditor)/
}
Remember to change the word 'loaders' to 'loader' since you are no longer referencing a list.
This is probably just a dependency issue. It's either not getting the correct version of react or not installing it correctly.
# update npm
$ npm install -g npm
# reinstall the generator-react-webpack package (note the global tags)
$ npm install -g yo
$ npm install -g generator-react-webpack
Then attempt to generate your app.
I had the same problem and none of the solution worked. It then occurred to me that it seems that react is missing. I got the problem after I installed and uninstalled a package for postgreSQL.
So I added it. PS, I was using yarn
yarn add react
Updating react-hot-loader didn't work for me, but removing the react-hot form the loaders list, by simply commenting it, fixed the issue:
{
test: /\.js$/,
exclude: /node_modules/,
loaders: [
// 'react-hot',
'babel'
]
}
There are two issues at play:
Properly upgrading all your dependencies, and,
Use webpack v. 3.11.0, DO NOT upgrade to webpack v. 4.00,
Downgrade ReactJS to React v. 15.6.2.
Open package.json, which will have a list of things like...
"dependencies": {
"jquery": "^3.2.1",
"jquery-ui": "^1.12.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-scripts": "1.0.10",
"webpack": "^3.6.0"
(etc.)
Then run a command like this in your package base directory, which has the same dependencies as listed above...
sudo npm install --save react#15.6.2 react-dom#15.6.2 react-scripts#latest webpack#3.11.0 jquery#latest jquery-ui#latest
TLDR ANSWER : ^^^ This is the one command you'll actually need to run.
Notice the webpack-specific version.
After this, everything worked for me! I I checked the ReactJS version , using this answer , https://stackoverflow.com/a/36994601/2430549 , and my package.json now looks like...
"dependencies": {
"jquery": "^3.3.1",
"jquery-ui": "^1.12.1",
"react": "^16.4.0",
"react-dom": "^16.4.0",
"react-hot-loader": "^4.2.0",
"react-scripts": "^1.1.4",
Source: Answer by JanTheHun, https://github.com/angular/angular-cli/issues/9793
For me it was an old version of react-dom.
I changed versions of react and react-dom to 16.X (to be exact : "react": "16.13.1", "react-dom": "16.13.1",), and then this problem went away for me.