Running Eslint airbnb specific file returns nothing - reactjs

I'm running
node_modules/.bin/eslint app.jsx
and it returns nothing. I know there are errors on the page however. Anyone know what is going on? I don't even get a message on screen.
If I run:
node_modules/.bin/eslint --ext=js --ext=jsx
I'll see the errors in app.jsx.
The reason I am doing just a single file is because I just turned on airbnb with eslint on create-react-app and I have a lot of errors to fix I wanted to do it slowly.

I guess your app.jsx is in a "src" folder, right? So you have to add it in your command like this:
node_modules/.bin/eslint ./src/app.jsx
Nico

Related

Vitest with React Testing Library 'Unexpected Token'

I'm using react with ViteJS and Vitest for testing. I have set up the config for vitest and the test setup file too as you can see in the screenshots below.
vite.config.js
src/test/setup.ts
src/app/App.tsx
src/app/App.spec.js
here's the error I'm getting:
I found a lot of sources on similar issues about the topic but nothing I tried worked. I also followed the documentation for the vite config and a lot of articles too. Everyone is saying the same thing but I'm still getting this error for some reason.
I used the same config with jest and it worked fine. But in this situation, I got stuck and then tried to rename the filename to .tsx or .jsx instead of .ts or .js. After that, I re-ran the test file and everything started working.
I think you forgot to add #testing-library to vite.config.js alias object.
This might be obvious to most people but in my case the issue was that the test file also has to end in ".jsx" when trying to test a ".jsx" file.
App.test.jsx worked for App.jsx

Next.js: ./node_modules/next/dist/client/dev/amp-dev.js

I have a very serious issue right now trying to use Next js. No matter what version I use, any time I try to run the npm run dev, I get the following error:
error - ./node_modules/next/dist/client/dev/amp-dev.js
Module not found: Can't resolve 'C:\Usersudbasili\Documents\Programming\Acumen Developers\myportfolio\node_modules\next\dist\compiled\regenerator-runtime\runtime.js' in 'C:\Users\udbasili\Documents\Programming\Acumen Developers\myportfolio\node_modules\next\dist\client\dev'
error - Error: Cannot find module 'C:\Users\udbasili\Documents\Programming\Acumen Developers\myportfolio\.next\fallback-build-manifest.json'Require stack:
This is literally right after running the create next app command, so I don't install any additional package. One thing realized though is that this error doesn't occur when I use the public folder on my window PC but when I use the user folder called udbasili I get the above error. I have been using next.js for a long time and this is the first I am seeing this error
I had the same issue
the problem was that my project files was in a folder beginning with "ud". My folder name was "udemy".
Renaming that folder or moving the project outside that folder solved the issue
If you compare the paths, there is a missing '\' :
C:\Users**\\**udbasili\Documents\Programming\Acumen Developers\...
C:\Usersudbasili\Documents\Programming\Acumen Developers\...
A quick solution that I gave to this issue was to create the project on a different path. For example:
C:\dev\myportfolio
Please head over to https://nextjs.org/docs/messages/swc-disabled
By disabling swc in next.config.js it will resolve your issue.
You can disable swc by adding:
experimental: {
forceSwcTransforms: true,
}
It's possible your autoimport included '/dist/client/dev' in the 'next/amp' path.
Does it work if you import { useAmp } from 'next/amp'?

Issues with Gatsby Shadowing

I am using the #lekoarts gatsby-theme-minimal-blog. You can view my code here:
https://github.com/CodyWMitchell/my-site
I feel like I am losing hair because of how much time I have spent trying to get this working. I am running Gatsby locally, and I've somehow successfully shadowed the footer component. I want to shadow the header component, but for some reason nothing is working at all.
In the lekoarts theme, the footer is in the same folder location as the header component, but when I add a file called header.tsx to overwrite the other header.tsx in the same location as the footer that is successfully shadowing nothing happens. I tried adding it in every other possible place I can think of, restarting the local build, and I'm at my wits end.
Here's the kicker, when I remove footer.tsx from the local src directory I added it to, It gives me an error now? Why would it give me an error for a file not existing that wasn't even there in the theme to begin with until I added it?
I really (really) want to give a static site generator a shot, but this feels extremely frustrating for something that should be simple, and it's discouraging me for suggesting something like this for any kind of complex project.
Any help or advice would be much appreciated.
Try to clean .cache folder and re-run the dev. Every time you "shadow" or change the components in theme folder, you should do it.
Just run gatsby clean or npm run clean - I saw that script in your repo.

Create React App - console lint warnings don't match eslintrc

I've got a sort of weird problem, that I don't see any mention of elsewhere.
Create React App by default seems to log lint warning in the terminal when running yarn start and also in the Chrome console. All good. Makes sense, and I've seen discussions of whether this functionality should exist, and how it should work.
My issue is that those warnings seem not to match my .eslintrc settings at all!
As in, if I run yarn lint, which runs eslint using my settings, I see none of the warnings that show up in the console and terminal when I start my app.
For example, I have this rule turned off in my .eslintrc file:
"radix": 0,
And, consequently, there's no radix warning when I run yarn lint.
(Just in response to the answer below. I've tried a variety of options for this particular rule, including "as-needed". But I wanted to turn the rule off entirely, which I've evidently accomplished, because running yarn lint shows no errors related to radix at all).
But when I start the app, I see this in yellow warning boxes in the console:
Anybody know why my .eslintrc file is being ignored here, and how to get these warnings to represent the rules I've set?
According to the docs, you should pass either "always" or "as-needed". The latter should disable those warnings.
...
"radix": "as-needed",
...
EDIT: According to this source, you will have to eject your create-react-app to edit the ESLint settings.
It is possible to add EXTEND_ESLINT flag to the .env file.
When set to true, ESLint configs that extend eslint-config-react-app will be used by eslint-loader. Any rules that are set to "error" will stop the application from building.
Source: https://create-react-app.dev/docs/advanced-configuration
Your eslint config may be named .eslintrc.json and put in the root folder of your project.
Its contents should look like the following (note the extends field):
{
"extends": "react-app", //this extends statement is required
"rules": {
"radix": "as-needed"
}
}
And the .env file placed in the root should have the following line:
EXTEND_ESLINT=true

React Router + Webpack 4 + webpack-dev-server - Failed to compile: no such file or directory

I am getting a "Failed to compile" error while trying to set up React with Webpack 4 and webpack-dev-server. The exact error showing is:
Failed to compile
./node_modules/history/es/index.js
Module build failed: Error: ENOENT: no such file or directory, open '/vagrant/node_modules/history/es/index.js'
This error occurred during the build time and cannot be dismissed.
In the node_modules directory, the file in question indeed exists. However, I checked the files being sent over, and that file (and its siblings) is being sent as /vagrant/node_modules/history/index.js with the es director missing.
I am not exactly sure what is causing this. Some research suggested things like mismatched casing on imports, but I checked quite a few times and do not see anything like that going on. I am a bit of a noob when it comes to this, though, so I might be missing something obvious.
EDIT
Upon further investigation (with the help of Boy With Silver Wings' comment), the error is actually coming from the depths of React Router. This issue demonstrates something close to my issue, but in their version there is duplication of the history modules while mine seems to "move" them.

Resources