I am working on MUI template and when I make changes i have seen it is showing errors that usually does not matter. e.g if I import a component in a file but i decide not to use it , react will show me error saying something like this
Line 12:3: 'Story' is defined but never used no-unused-vars
in one of my file I decided not to use this (story) component and react showed me this error. its annoying when u have a lot of changes to make and you keep getting these kinda errors. how can I get rid of these kind of errors permanently
First solution is to remove any unused imports, and declarations of variables/methods/components.
The second solution is to paste this link above your line
//eslint-disable-next-line
Related
I'm using fontawesome for icons, but something went wrong somewhere and now, every time I type something the console shoots out a version of:
Could not find icon null
When I fist load/refresh the page I get 5:
I see where the errors are happening, but I'm not sure why. Is it a local host thing? I have inputs where I'm handling the change with (ev) and setting a state. On every keypress or handleChange I get new, weirder and longer errors like:
I'm not really sure what's causing them. Based on what I've seen in other questions posted, it's my fontawesome icons, but I don't see why or how since all the icons I'm using render fine. I'm using webpack, so maybe somethings happening there.
EDIT: It's for sure happening because of fontawesome, still not sure why. Ran a test with a different component and no error. Any component that has a fontawesome icon, throws errors on any change.
The error was actually coming from these lines I had in two of my components:
import { icon } from "#fortawesome/fontawesome-svg-core";
Basically, I was adding all the icons I was planning on using to my library in my main App.jsx file, but forgot that I was trying to render another icon (one that wasn't added to the library) in one of my components:
DOWNLOAD{" "}
<FontAwesomeIcon icon={icon({ name: "download", style: "solid" })} />
This was the way I had imported and rendered icons before using the library and I guess one of my js files was throwing an error trying to import { icon } that didn't exits.
The Image of what I've been facinghow to solve react issue of react component is defined but never used even when i tried using the component, but it keeps on saying the same thing.
I tried it for several times but it keeps on showing the same thing. I watched videos on Youtube but none of that match the problem am facing talk more of solving my problem.
Ok. I see two points to improve.
First of all, component names must start with an Uppercase.
So, instead of
src/addContact.js
import addContact from './addContact'
<addContact />
You should have
src/AddContact.jsx
import AddContact from './AddContact'
<AddContact />
Even StackOverflow understands that, see how the color of the code is different?
This change should fix your problem.
Also, it's good practice to use .jsx instead of .js for React Files (which are JSX Elements, thus .jsx).
I'm having some trouble with a piece of code in React.
I've created a gh repo that reproduce the error : https://github.com/AnatoleLucet/next-issue
I'm trying to do a hook that gets some local data (in my real app it's a translation system, but you get the idea). Thing is, I pass each "part" of my data (see data/myData.ts and data/index.ts) in a function called formatData, this function is declared in the same file as my hook (hooks/myHook.ts). Then when I use my hook in a component (see pages/index.tsx) I get the following error :
I don't understand why the browser (or webpack ?) doesn't initialize formatData at the right time...
I'm using Nextjs but I don't think it's related to the issue, although I haven't tried on a "vanilla" React project.
As a temporary fix, I can move formatData to another file like utils/data.ts.
You have a circular dependency.
hooks/myHook.ts imports from data/index.ts
data/index.ts imports from data/myData.ts
data/myData.ts imports from hooks/myHook.ts
I am practicing react on condesanbox.io installed jsx- control-statement dependency. When iam adding any of the control statement it is undefined.
How to configure jsx- control-statements in codesandbox.io.
This question might be couple of month old and its look like the questioner has not find the solution yet,so here is my fix
Solution: Instead of using just jsx syntax inside the return statement wrap the jsx with react fragment,below is the example
return (<>
{user ? <Component1/>:<Component2/>}
</>)
You will not be able to use jsx-control-statements in codesandbox.io in the similar way that you might in a local babel environment.
(i guess strikethrough isn't a thing on stackoverflow?) ~~You will have to import { If } from 'jsx-control-statements' to get access to the If tag, for example.~~
edit:
I've seen people import it in the past (similar to this example https://github.com/PedroBern/react-tiger-transition/issues/2 ) but, as I'm sure you're aware, the jsx-control-statements lib is a babel plugin; the code seen in that example is probably only serving to calm eslint in an older version of control-statements.
If you pull the jsx-control-statements dependency into codesandbox and cast it to a variable via import whatever from 'jsx-control-statements', and look at 'whatever', you'll see that it is a function. (see the link below for the full code.)
You COULD maybe go down the road of hackifying a dumbed-down version of babel-core, and passing it into whatever(babel) but you're better off creating your own If tag that has a condition property and conditionally renders children.
https://github.com/AlexGilleran/jsx-control-statements/blob/master/src/index.js
This is brand new install - I have not put any transitions on the Alert component
To replicate the code it is simple
import React from "react";
import { Alert } from "reactstrap";
export const Index = () => {
return (
<div>
<Alert color='primary'>This is a primary alert — check it out!</Alert>
</div>
);
};
Error Msg: Please update the following components: Transition
How does one go about updating Transition or eliminating it all together?
In the event that someone comes here on after searching the question and is looking for insight this is it.
React strap (at the time of this post) uses the react-transition-group things fade in and out and menus slide up and down. After amalgamating the info on this subject here and on Github they are currently updating the library. I have finished the coding of that component by ignoring the warning.
It did not impede this iteration of that component. Happy Coding.
I have this same warning, and I fixed it changing in the index.js file, the value of <React.StrictMode> to <React.Fragment>.
Since this removes the warning, is not guaranteed that your can be bulletproof.
This issue was reported, and apparently fixed but I received the same error even with the updated source code. It's more than just the error as well - it can cause components to re-render
Here is one github thread from the reactstrap repo about this (but there are a number of them): https://github.com/reactstrap/reactstrap/issues/1340
There are a number of issues related to this warning though.
As best I can tell it has something to do with an item in Transition.js, and I think it may have to do with a this.context call when a component is 'entering'
But, the project I encountered this issue is the first React App I'm building, and I'm not quite ready to learn the Legacy Context API, so that's just my best guess and in the end I just opted for an alternative package.
I don't have the rep to put this in a comment, so the only answers I have are:
Report the issue to the reactstrap team and wait/assist with a fix
Use an alternative package