React project upgrade error, babel error, .babelrc configuration compatibility and other issues
Due to the compatibility problem between the development environment and the project version, after trying to upgrade react-scripts, a lot of problems followed one after another. I searched Baidu and csdn, and often solved the old ones and appeared new ones, or when the development was ok and packaged Reporting an error, now list the main problems encountered and the final solution for reference.
Encounter problems
digital envelope routines::unsupported
Run $env:NODE_OPTIONS="--openssl-legacy-provider" on the command line and start it again
Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): “decorators-legacy”, “decorators”.
require() of ES Module ……is not supported.
Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): “decorators-legacy”, “decorators”.
[eslint] The “path” argument must be of type string. Received an instance of Array
[eslint] ESLint configuration in .eslintrc is invalid:
- Unexpected top-level property “babel”.
final solution
Delete the .babelrc file in the root directory and configure it in package.json:
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
]
]
},
Install dependencies if necessary: "@babel/eslint-parser"
Note
babel-eslint has been deprecated since March 2020. The package has been migrated to a new repository, see '@babel/eslint-parser' if needed