Edit: This was a bug in 3.1.0 - upgrade to 3.1.1+ to get a working version of this feature.
create-react-app 3.1.0 is supposed to have support for customising the eslint warnings, as per: https://github.com/facebook/create-react-app/pull/7036
The documentation is here: https://facebook.github.io/create-react-app/docs/setting-up-your-editor#experimental-extending-the-eslint-config
I believe the rule setting I have in my package.json is correct because IDEA picks it up and no longer dislays the dot-location warning in the editor.
But npm start still complains with:
./src/Auth/AuthenticationProvider.tsx
Line 135: Expected dot to be on same line as property dot-location
My package.json is as per the documentation and I've added the EXTEND_ESLINT variable to the .env file.
My package.json config:
"eslintConfig": {
"extends": [
"react-app"
],
"rules": {
"dot-location": "off"
}
},
The environment variable is set in my .env file.
And the example failing source code looks like:
props.auth0Client.loginWithRedirect().
catch((e)=>{errorHandler(e)});
What am I doing wrong?
Am I misunderstanding how eslint config works, or maybe I'm wrong about what this new feature of create-react-app is actually supposed to do?
Please note: I don't want to add annotations to my code everywhere to disable the warning - the question is about customising the eslint config.
It appears you are not doing anything wrong and there is a bug in create-react-app 3.1.0. If you want to track progress, an issue has been filed in GitHub.
Related
I make a vue project using this documentation: https://vuejs.org/guide/quick-start.html#creating-a-vue-application
And I wanted to added tailwind css to this project. So I used this guide (from point 2 Install Tailwind CSS): https://tailwindcss.com/docs/guides/vite#vue
But, I see no changes and get this warning:
warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration
I followed the instuction as it is.
I tried following the content-configuration and I double checked it to see all files in place.
I was expecting tailwind.config.cjs file should be generated but instead tailwind.config.js is generated.
Updates:
On repeating all the steps using this link: https://tailwindcss.com/docs/guides/vite#vue
At step 4:
Add the Tailwind directives to your CSS, When I replace the content for style.css as asked in the step.. Exactly after this point, the error is shown.
Fixed.. Asking in the discord community this was the response:
Thank you for supplying a remotely-hosted repository. It seems to work
fine for me, it could be that you're suffering from a bug that this PR
solves: https://github.com/tailwindlabs/tailwindcss/pull/9650. You
could temporarily try insiders version and see if that fixes it for
you
npm install tailwindcss#insiders
I just gave solution to the same problem. You might have the same...
I had my tailwind.config.js like this:
module.exports = {
content: ["./src**/**/*.{html,js}"],
},
...and I changed the destination folder from "src" to "public", and it worked for me.
Like this:
module.exports = {
content: ["./public/**/*.{html,js}"],
},
Hope this will help you. Good luck and happy coding !
I used to build React apps starting with create-react-app, then I would install eslint with plugins and a custom config, run an eslint init, and add some custom scripts to run eslint and eslint auto fix easily and automatically on certain actions like a build. Create-react-app now comes with eslint already installed and "ready to go." In VS Code, I see the linter running in my "problems" tab. How do I now run eslint autofix? That is the main benefit of a linter in my opinion.
I use VS Code. I have spent some hours trying different ways to set up linters in create-react-app. I believe that the inclusion of eslint has changed the state of this quite a bit and made most of those posts simply outdated. I had a setup working for about a year using Prettier to avoid ejecting eslint, but an unresolved issue has caused that to stop working. So I have taken a step back to try to understand the state of the create-react-app dev environment now. Are folks using VS Code with create-react-app? If so, do you have autofix working?
I found one way to get an autofix on save in a create-react-app in VS Code. I don't know if it's the best one. It's simpler than I thought.
After running:
create-react-app my-app
Run:
npm install --save-dev prettier
Add to root directory:
.prettierrc
{
"tabWidth": 2,
"semi": false,
"singleQuote": true
}
Install VS Code prettier extension.
Find VS Code user settings json. Mine is:
{
"typescript.check.npmIsInstalled": false,
"window.zoomLevel": 0,
"editor.minimap.enabled": false,
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
"emmet.syntaxProfiles": {
"javascript": "jsx"
},
"eslint.alwaysShowStatus": true,
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.formatOnType": true,
"files.autoSave": "onFocusChange",
"prettier.semi": false,
"prettier.tabWidth": 4
}
Now, if I save, I will get autofixes.
Most of the tutorials online assume that eslint is not already installed with create-react-app and/or that eslint and prettier must be integrated with plugins and an eslintrc file. My fix may be missing something, as it may not be making use of eslint or there may be conflicts between the two linters at some stage.
Goal
Be able to create a new project for react-native (using react-native init), and enabling flow checks on Visual Studio Code.
What I Did
I just created a new react-native project
react-native init iaptris
then opened Visual Studio code
cd iaptris
code .
I saw this errors
Whis these error descriptions (in italian, sorry)
Googling I concluded I must install Flow Extension for VsCode and I did.
I then disabled native checking for current workspace, setup file association and path to flow command
{
"javascript.validate.enable": false,
"files.associations": {
"*.json": "json",
"*.js": "javascriptreact"
},
"flow.pathToFlow": "C:\\Users\\mirko\\.vscode\\extensions\\flowtype.flow-for-vscode-1.0.1\\node_modules\\.bin\\flow.cmd"
}
Closed and restarted vscode on same workspace
The problem
At this point, errors disappeared, but also, removing a curly brace to throw a new syntax error, I do not see any errors. No errors.
Question
What else must I do now?
Actual solution, please post your answer if this is not the better method. And I think it's not the better method.
react-native init <project name>
open VsCode
disable Javascript -> Validate for the current workspace only (sorry if next image is in italian, but it's enough as reference)
install a plugin
yarn add eslint babel-eslint eslint-plugin-flowtype --dev
or
npm install eslint babel-eslint eslint-plugin-flowtype --save-dev
create a .eslintrc with following content
{
"parser": "babel-eslint",
"plugins": [
"flowtype"
],
"extends": [
"plugin:flowtype/recommended"
]
}
close and reopen vscode and the workspace
I upgraded my app from react-native 0.15 to 0.16 but after that I'm getting an error and I don't know how to solve it.
TypeError:undefined is not an object (evaluating 'GLOBAL.Text={
get defaultProps(){
throw getInvalidGlobalUseError('Text')}}')
In Chrome Debugger:
Uncaught Error: Uncaught TypeError: Cannot set property 'Text' of undefined
Thanks
OBS: I'm running on Android.
I notice that changing app name solves the problem, I'm using Evently as app name today. I tried to recreate my virtual machine but didn't solve it.
In my case, I was able to narrow the cause down to one item in my .babelrc file:
{
"presets": ["es2015"]
}
As soon as I removed that and restarted the packager (making sure to also use the --reset-cache flag), I stopped getting the error.
Update 2:
It looks like React Native is making some changes to their .babelrc in version 0.20.0. So, if you are using that version or newer, you should follow the instructions at: https://github.com/facebook/react-native/tree/master/babel-preset in order to specify your .babelrc settings.
Update:
I've narrowed this down further to transform-es2015-modules-commonjs, which React-Native sets some options on, specifically {"strict": false, "allowTopLevelThis": true}. The es2015 preset does not set this option, and it seems that the React-Native .babelrc does not override it. If you want to use es6 modules and transform them to commonjs, you'll need to put the following in your .babelrc:
{
"plugins": [
["transform-es2015-modules-commonjs", {"strict": false, "allowTopLevelThis": true}]
]
}
Note, Babel 6, which I updated to along with react-native 0.16.0, no longer contains any transforms by default. What I didn't initially realize is that the React-Native packager provides most of the transforms you might ever need (listed in their docs at: https://facebook.github.io/react-native/docs/javascript-environment.html#javascript-syntax-transformers), and I'm thinking that the "es2015" plugin interferes with some of those transformers.
I also tried using "babel-preset-react" (http://babeljs.io/docs/plugins/preset-react/), and that plugin did not seem to cause any errors.
I solve the problem. I think it was because permissions in project folder. I ran chown in my folder to correct the permissions problems and now all are working.
Thanks
In my case the problem was a rogue .babelrc two folders up (my root code folder); I had initiated a yeoman generator to scaffold out a new project using babel-6...accidentally running yeoman from the root code folder. Apparently babel traversed upwards from my project folders until it hit this .babelrc which borked the react-native babel configs...
^ this was originally an edit to my initial answer, which was deleted WHILE I WAS UPDATING IT
I'm attempting to use the spine.app cli and I'm encountering a couple of errors and I'm uncertain what the root cause actually is.
The guide found at: http://spinejs.com/docs/started gives these steps
spine app my-app
cd my-app
npm install .
hem server
following these steps, initially yields this error on the terminal:
Cannot find module: es5-shimify. Have you run `npm install .` ?
Investigating, it seems es5-shimify has been deprecated in favor of es5-shim, so my initial inclination was to replace the dependency to es5-shim. So I updated setup.coffee to require('es5-shim'), and I updated the referenced slug.json module and restarted the server. This seems to get me a little further, but still produces an error ( though not in the terminal, instead in the chrome console )
Uncaught TypeError: Property 'jQuery' of object [object Object] is not a function
This appears to be occurring on line 8 of public/index.html. I did some debugging here and it appears that require('jqueryify') is returning undefined, and I'm not certain what the expected result is. Any guidance on the right way to approach this process or perhaps information on what the root issue might be would be greatly appreciated.
Use the latest version try again.
The package.json as following
{
"name": "app",
"version": "0.0.1",
"dependencies": {
"spine": "~1.3.0"
}
}
all others dependencies has been removed,and it works for me.