linter and linter-eslint modules are installed in Atom
Create a react native project
react-native init AwesomeApp
Install requisite node modules
yarn add babel-eslint eslint-config-airbnb-base eslint-plugin-react eslint-plugin-react-native --dev
Create .eslintrc file:
{
"parser": "babel-eslint",
"plugins": [
"react",
"react-native"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true,
"modules": true
}
},
"extends" : [
"eslint:recommended",
"plugin:react/recommended",
"airbnb-base"
],
"rules" : {
"arrow-body-style" : 'warn'
}
}
When I open Atom I get an error
Here is the stack trace from the dev tools:
/Volumes/Macintosh HD 3/.atom/packages/linter/lib/linter-registry.js:159 [Linter] Error running ESLint Error: Failed to load plugin react-native: Cannot find module 'eslint-plugin-react-native'
at Function.Module._resolveFilename (module.js:455:15)
at Function.resolve (internal/module.js:27:19)
at Object.load (/Volumes/Macintosh HD 3/.atom/packages/linter-eslint/node_modules/eslint/lib/config/plugins.js:134:29)
at Array.forEach (native)
at Object.loadAll (/Volumes/Macintosh HD 3/.atom/packages/linter-eslint/node_modules/eslint/lib/config/plugins.js:162:21)
at Object.load (/Volumes/Macintosh HD 3/.atom/packages/linter-eslint/node_modules/eslint/lib/config/config-file.js:541:21)
at loadConfig (/Volumes/Macintosh HD 3/.atom/packages/linter-eslint/node_modules/eslint/lib/config.js:63:33)
at new Config (/Volumes/Macintosh HD 3/.atom/packages/linter-eslint/node_modules/eslint/lib/config.js:229:42)
at CLIEngine.executeOnText (/Volumes/Macintosh HD 3/.atom/packages/linter-eslint/node_modules/eslint/lib/cli-engine.js:741:28)
at lintJob (/Volumes/Macintosh HD 3/.atom/packages/linter-eslint/lib/worker.js:50:51)
Atom is up to date, I'm running 1.18.0 x64
eslint-plugin-react-native is definitely installed within the project. Any ideas what I'm missing?
For me, removing this line worked:
"parser": "babel-eslint",
Related
I'm trying to set up a react native project inside a yarn workspace and got Android running by preceding all node_modules references in .gradle files with ../ to reference node_modules in the workspace folder.
But that didn't work in iOS and later I heard it's better to do the nohoist and I tried adding the following in my react native project `package.json
private: true,
"workspaces": {
"nohoist": [
"**"
]
}
Or
private: true,
"workspaces": {
"nohoist": [
"react-native",
"react-native/**",
"react",
"react/**"
]
}
But in both case, I'm getting the following error,
Unhandled JS exception: Unexpected keyword 'export'
More details: Fresh project created with react-native init
react-native: 0.63.4
react: 16.13.1
i tried to install preset-env for using environment variables. After that, my VueJS project got an error, i tried npm r #babel/preset-env, i tried npm i --save #babel-core but nothing changed. Any thoughts?
{
"presets": [
["env", { "modules": false }],
"stage-3",
],
"plugins": [["transform-runtime", { "polyfill": false, "regenerator": true }]]
}
Problem solved with using Babel version from vue.js webpack template repository.
npm r babel-core
add "babel-core": "^6.22.1" to package.json
npm i
Trying to build my react native app I get this error:
error: bundling failed: SyntaxError: /xxxxr/node_modules/react-native/node_modules/react-native/Libraries/Components/Switch/Switch.js: Support for the experimental syntax 'optionalChaining' isn't currently enabled (103:41):
I have added:
{
"presets": ["react-native"],
"plugins": ["#babel/plugin-proposal-optional-chaining"]
}
To my .babelrc but I still get the error. How can I build my project?
Try installing plugin-proposal-optional-chaining plugin as follows:
npm install --save-dev #babel/plugin-proposal-optional-chaining
Try adding below code to your .babelrc:
{
"plugins": [
"#babel/plugin-proposal-optional-chaining"
],
"presets": [
"react-native"
]
}
Hope it will help you.
When I try to use $ReadOnlyArray, eslint shows error that "$ReadOnlyArray is not defined (no-undef)". I might have a wrong configuration but I don't know where to start.
Here are some env info:
react-native: 0.51.0
flow: 0.57
eslint: 4.9.0,
eslint-plugin-flow: 6.23.0
You will need to install Flow type linting rules as follows:
npm install eslint-plugin-flowtype --save-dev
and your .eslintrc file should look something like this:
{
"parser": "babel-eslint",
"env": {
},
"plugins": [
"flowtype"
],
"extends": [
"eslint:recommended",
"plugin:flowtype/recommended"
],
"rules": {
}
}
I'm getting the following error upon running react-native init testNative
ReferenceError: [BABEL] /Users/m/git/testNative/node_modules/react-native/local-cli/bundle/bundle.js: Unknown option: base.optional
at Logger.error (/Users/m/git/testNative/node_modules/babel-core/lib/transformation/file/logger.js:41:11)
at OptionManager.mergeOptions (/Users/m/git/testNative/node_modules/babel-core/lib/transformation/file/options/option-manager.js:289:18)
at OptionManager.init (/Users/m/git/testNative/node_modules/babel-core/lib/transformation/file/options/option-manager.js:486:10)
at File.initOptions (/Users/m/git/testNative/node_modules/babel-core/lib/transformation/file/index.js:211:75)
at new File (/Users/m/git/testNative/node_modules/babel-core/lib/transformation/file/index.js:129:22)
at Pipeline.transform (/Users/m/git/testNative/node_modules/babel-core/lib/transformation/pipeline.js:48:16)
at Object.transformFileSync (/Users/m/git/testNative/node_modules/babel-core/lib/api/node.js:118:10)
at compile (/Users/m/git/testNative/node_modules/babel-register/lib/node.js:100:20)
at loader (/Users/m/git/testNative/node_modules/babel-register/lib/node.js:128:14)
at Object.require.extensions.(anonymous function) [as .js] (/Users/m/git/testNative/node_modules/babel-register/lib/node.js:138:7)
I've tried the advice in the following posts (https://github.com/facebook/react-native/issues/5, https://github.com/babel/babel-loader/issues/132, https://github.com/babel/babelify/issues/129, React 0.14 error: Module build failed: ReferenceError: [BABEL] .../node_modules/eslint-loader/index.js!/.../main.jsx: Unknown option: base.stage), but with no avail.
My current hypothesis is that because I don't have a .babelrc file anywhere on my system, it's falling back to "base.optional." At least adding a .babelrc file to my project folder is the only thing that yielded a different outcome (downgrading node, babel, or react-native did nothing). So, if this is the solution, does anyone know what my .babelrc file should include for a react-native project?
Thanks
Here is one of the .babelrc files that you can use with your RN project.
Note that RN works fine with no .babelrc file in your project (it falls back to node_modules/react-native/.babelrc file.
{
"retainLines": true,
"compact": true,
"comments": false,
"plugins": [],
"presets": ["stage-0", "react", "react-native"],
"sourceMaps": false,
}
You also need to add these line to your package.json file and install the dev-dependencies : npm i --save-dev <package-name>
"devDependencies": {
"babel-preset-react": "^6.3.13",
"babel-preset-react-native": "^1.4.0",
"babel-preset-stage-0": "^6.3.13"
}