I recently upgraded RN from version 0.59.4 to 0.61.5.
I want to use react-native-web and added react-scripts (3.4.1) and react-dom (16.13.1). After some cleaning up of native modules not supported, running react-scripts start results in failure to compile because of lint errors (no-undef, for example). These are not rules set up in my .eslintrc.js file and seem to come with the new way of running scripts.
Is there a way to ignore the lint errors to try and compile? While I could try and make these changes in my code base, there are some issues in dependencies as well.
Additionally, I updated my babel as per react-native-web
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
["module-resolver", {
"alias": {
"^react-native$": "react-native-web"
}
}]
]
};
I have read this might be webpack related, but there is currently no webconfig. I tried adding what was on the react-native-web getting starter page, but had no luck there either.
Related
I have a React app that I created using npx create-react-app my-app. I've been regularly updating both React and other npm packages.
A while ago, I started getting the following warning:
#babel/polyfill is deprecated. Please, use required parts of core-js
and regenerator-runtime/runtime separately
The following is what's in my package.json file:
"devDependencies": {
"babel-polyfill": "^6.26.0",
"redux-devtools": "^3.5.0"
}
I found a few articles online about how to handle this but none of them look like the official solution. What's the right way to handle this?
So far, this has been a warning and not an error so I just postponed dealing with it. Today, I upgraded the moment package and that started giving me an error and I figured dealing with this issue first is a good starting point.
I'd appreciate some pointers in making this warning go away.
babel-polyfill is being replaced by core-js. You can remove babel-polyfill and install core-js instead. After you have installed core-js update the babel presets in your .babelrc or babel.config.js file with the following:
"presets":[
['#babel/preset-env',
{
useBuiltIns: 'usage',
corejs: 3,
}],
]
If you are importing babel-polyfill in your App you can remove that too. Also you can add a targets property in your presets
[
'#babel/preset-env',
{
targets: {
browsers: ['> 0.25%, not dead'],
},
useBuiltIns: 'usage',
corejs: 3,
},
]
While using create-react-app (with no customizations), and invoking npm start, it appears that linting occurs on individual files as they are saved, and any error or warning output is shown:
I'm trying to reverse-engineer how this is working, but am stuck.
I'm pretty sure it has something to do with husky and/or lint-staged but I haven't been able to replicate this behavior in my (non-sharable) playpen.
I understand how to setup and configure eslint (and I can see errors/warnings when invoking eslint directly), and I've been able to run linting around my Git actions (i.e., pre-commit) using husky and lint-staged, so I feel that I'm close to solving this puzzle, but I still don't get any of this type of output when I invoke webpack-dev-server.
What tooling is used to get eslint output to appear during the create-react-app npm start command?
This is the feature of eslint-loader which is added to the webpack configuration in create-react-app.
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
enforce: 'pre',
use: [{
options: {
cache: true,
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint'),
resolvePluginsRelativeTo: __dirname,
// #remove-on-eject-begin
ignore: isExtendingEslintConfig,
baseConfig: isExtendingEslintConfig
? undefined
: {
extends: [require.resolve('eslint-config-react-app')],
},
useEslintrc: isExtendingEslintConfig,
// #remove-on-eject-end
},
loader: require.resolve('eslint-loader'),
}],
include: paths.appSrc
}
Source
For Angular and react project with npm module, you can use "npm run lint -- --fix" that will solve the all the possible lint errors and then you check with ng lint command post the above fix command runs
Since I reinstalled my NPM dependencies in my create-react-app project, Atom's eslint gives me this error on the top of every file :
Error while running ESLint: Cannot find module 'eslint-config-react-app'.
While react-scripts's eslint doesn't raise any warning or error. By the way, the package eslint-config-react-app is installed in node_modules.
I tried to reinstall linter-eslint, atom, the NPM dependencies, etc. Nothing worked.
Has anyone an idea ?
Here is my .eslintrc :
{
"extends": "react-app",
"rules": {
"jsx-a11y/anchor-is-valid": 0,
"react/jsx-no-comment-textnodes": 0,
"no-unused-vars": ["warn", {
args: "all",
ignoreRestSiblings: false,
argsIgnorePattern: "^_$"
}]
}
}
Edit : I don't know why, but all of the sudden, the error changed and now it's this one on top of every js file :
Error while running ESLint: Invalid regular expression flags
EDIT 2
None of the given solutions worked in my case. The problem with linter-eslint is not solved. But I found a workaround for now : using fast-eslint instead of linter-eslint. Works just fine.
For anyone else trying this, one solution is installing eslint-config-react-app globally, along with all of its peer deps. At the moment, that's:
Refer to https://github.com/facebook/create-react-app/issues/3633#issuecomment-361485857
npm i -g babel-eslint#^7.2.3 eslint#^4.1.1 eslint-plugin-flowtype#^2.34.1 eslint-plugin-import#^2.6.0 eslint-plugin-jsx-a11y#^5.1.1 eslint-plugin-react#^7.1.0
Since you mentioned that the problem occurred after you reinstalled
npm modules, it might be related to npm dependency resolution. So
you might have multiple versions of the same module and atom might
use the wrong one.
Check whether your react-scripts version is 0.2.0 or higher according to Displaying Lint Output in the Editor
Remove all eslint related dependencies from your package.json.
This means removing babel-eslint, eslint, eslint-plugin-flowtype,
eslint-plugin-import, eslint-plugin-jsx-a11y, eslint-plugin-react, etc
Create react app installs all the linting dependencies under the
hood so you shouldn't manually install them.
Remove all global eslint related dependencies.
Generally you don't need to use globally installed eslint dependencies as you might
have different eslint versions in each of your projects.
The latest version of linter-eslint should then use the correct eslint dependencies from under node_modules in your project.
UPDATE: Based on your comments and edited question, I tried reproducing this using CRA, replacing the dependencies in package.json, reinstalling and adding the following .eslintrc.
Notice I added " around the options keys in the "no-unused-vars".
{
"extends": "react-app",
"rules": {
"jsx-a11y/anchor-is-valid": 0,
"react/jsx-no-comment-textnodes": 0,
"no-unused-vars": ["warn", {
"args": "all",
"ignoreRestSiblings": false,
"argsIgnorePattern": "^_$"
}]
}
}
Having done all this I couldn't reproduce the issue.
I built react project with webpack and babel.
It worked well.
But, today I got some error below.
ERROR in ./index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL] /home/rpf5573/react-discovery-v2/src/admin/admin-client/index.js: Invalid Option: corejs is not a valid top-level option.
Maybe you meant to use 'targets'? (While processing: "/home/rpf5573/react-discovery-v2/src/admin/admin-client/node_modules/#babel/preset-env/lib/index.js")
at validateTopLevelOptions (/home/rpf5573/react-discovery-v2/src/admin/admin-client/node_modules/#babel/preset-env/lib/normalize-options.js:49:13)
at normalizeOptions (/home/rpf5573/react-discovery-v2/src/admin/admin-client/node_modules/#babel/preset-env/lib/normalize-options.js:160:3)
at _default (/home/rpf5573/react-discovery-v2/src/admin/admin-client/node_modules/#babel/preset-env/lib/index.js:168:37)
....
error Command failed with exit code 2.
And this is my admin-client/.babelrc
module.exports = {
compact: true,
presets: [
[
"#babel/preset-env",
{
modules: false,
targets: {
browsers: ["since 2015"]
},
useBuiltIns: "usage",
corejs: "2"
}
],
"#babel/preset-react"
],
plugins: [
"#babel/plugin-proposal-class-properties"
]
}
What did I wrong ?
What should I do ?
Maybe you had some major version change recently?
In my case, that was the cause. And the solution was:
Completely remove node-modules folder from the project
Remove package-lock.json file from the project root folder
Perform a npm i to recreate everything
As an alternative to entirely deleting node-modules as suggested by #SysDragon. I looked deeper into why the complaint was specific to corejs. And i found a great remedy here.
In summary, these were the steps taken:
Install the latest version of core-js (or atleast version-3).
Whatever you are building "might" be making use of latest JavaScript functionality. For my case, i was working with react-16.9.0 and mdbreact-4.19.0.
Note: Core-js is a Modular standard library for JavaScript. Includes polyfills for ECMAScript up to 2019: promises, symbols, collections, iterators, typed arrays and many other features.
Then, you need to update your transpiler, babel and it's "relatives".
This block snippet helped accomplish that: yarn upgrade #babel/core #babel/plugin-transform-runtime #babel/polyfill #babel/preset-env #babel/runtime babel-loader --dev.
The --dev part is just to save them as devDependencies (if using yarn) (for npm, use --save-dev), which i advocate for especially if this is team project.
In my case, the subdirectory I was working on was part of a larger Yarn workspace in the root of the repository and removing that subdirectory from the workspace and reinstalling node_modules within the subdirectory fixed the issue.
This issue is most likely caused by dependency mismatches.
I'm getting an error when setting up Mobx with react, can anyone give me a simple step by step? I'm fairly new to React and I'm still getting my head around the files that come with it.
Here's what I did:
Used create-react-app
ejected app
Ran npm install --save mobx mobx-react
ran npm install --save-dev #babel/plugin-proposal-decorators
I then edited the package.json file:
"babel": {
"plugins": [
"#babel/plugin-proposal-decorators"
],
"presets": [
"react-app"
]
},
Here's the problem I'm getting:
What I tried:
The error seems to suggest that I need to set legacy to true in node_modules\#babel\plugin-proposal-decorators\lib\index.js. I tried that and it didn't work. I searched for the problem on google and it seems like it could be an issue with Babel 7?
You need to pass the option with the config you setup in your package.json
{
"plugins": [
["#babel/plugin-proposal-decorators", { "legacy": true }]
]
}
You can check the docs here: https://babeljs.io/docs/en/next/babel-plugin-proposal-decorators.html