Been struggling with this one for a few hours now. I'm trying to use react-css-transition-group to animate elements in an array. I have:
render: function(){
var dataSections = this.props.sections.map(this.buildDataSection);
return (
<div>
<ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
{dataSections}
</ReactCSSTransitionGroup>
</div>
);
}
It compiles fine, but when I run it I get Uncaught Error: Invariant Violation: ReactCSSTransitionGroup.render(): A valid ReactComponent must be returned. in my console. I have no idea why. I've tried rolling back my version of both react and react-css-transition-group to no avail. I'm at a loss for ideas at this point.
dataSections is a valid array of elements and renders fine when I take the animation out.
Any thoughts?
Update
I've since moved on to several other things in this project, and I've realized that it isn't just this package, it's any react package that exports a component. All of them throw this same error: A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.
I've updated all my packages including Browserify, and React is already a peer dependency. Not sure what to do :(
Okay, I've figured it out, and I'm a fool.
Before I started using NPM, I was using the react-rails gem, and when I ported everything over to Browserify, I never took out the old gem. Because of that, I didn't notice the several different places that I forgot to require('react') at the top of a component file, because the old gem provided React in the global namespace and it therefor didn't throw an error.
Long story short, I had two conflicting versions of React running at the same time. Removed the gem, fixed the missing includes, and problems went away!
Related
I've started using Electron alongside React and one issue I'm facing right now - which may actually be unrelated to Electron - is that Node cannot seem to "find" a Sass module that I am importing despite the fact the styles I'm importing are actually working.
Here is my file structure:
src
|__Render
|__Styles
| |__Page
| |__Home.module.scss
|__App.tsx
Inside of App.tsx, I'm importing the Sass module like so:
import styles from "./Styles/Page/Home.module.scss";
export default function App(){
return <div className={styles.test}>Test</div>
}
and receiving the error:
TS2307: Cannot find module './Styles/Page/Home.module.scss' or its corresponding type declarations.
Despite this, if I inspect the element I'm targeting, the styling is being applied.
<div class="Home_test__QTxtE">Test</div>
I have followed every single answer in this thread to no avail.
Is this an issue with Electron? Is there some sort of extra configuration I'm missing?
Also, it might be worth mentioning, that if I just import "Test.css";, this works fine.
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).
Strange bug with Jest, create-react-app, and typescript.
Tonight Jest started failing to import my "./ProcessStore" module correctly. This module is a transitive dependency of something that my tests import.
The error I see is that the thing I import is undefined.
When I do import * as what from "./ProcessStore" and log(what), it prints all of the exports, but the values are undefined. Like {default: undefined, ResourceChange: undefined} two classes that are exported. It should be {default: <a class>, ResourceChange: <a class>}.
It's just that one file. Every other file works.
When I use npm start, it works --- this is a Jest only problem.
Also if I rename the broken file to say ./ProcessStore2, it also works.
I tried ./node_modules/jest --clearCache, which didn't help.
In case it's relevant, I'm using craco normally. Switching back to react-scripts temporarily didn't help.
I'm using react-scripts 4.0.3 (latest version).
What is going on? How do I fix this silly problem?
This was caused by a circular dependency in my project.
The circular dependency was causing Jest to return an empty module. I believe the 2nd time a module is entered, it will have undefined contents.
In my case the chain was ProcessStore.ts -> stores.ts -> ProcessStore.ts. So by the time stores.ts loads ProcessStore.ts, the process store has already been loaded, so everything is undefined.
I ran into this when I was importing in one file like this
import { myHook } from 'services/hooks/myHook'
and in another file
import { myHook } from 'services/hooks'
There was an index file
// src/services/hooks/index.ts
export * from './myHook.ts'
Converting them all to use the index path fixed it. I don't think I had a circular dependency anywhere, I never was able to truly understand what was wrong.
I also ran into this issue, due to a circular dependency.
In order to confirm the nature of the bug, I console.log the missing import and executed my test. I could see that the import was in fact undefined when it shouldn't have been.
I ran this command to find circular dependencies at package/project level:
npx madge --circular --extensions ts,tsx .
This only gave me a clue as to what was going on, however.
I then used the debugger at the point where my circular dependency was occurring. Using Chrome DevTools, I inspected the call stack, and found how each import was being imported. This revealed the circular dependency very clearly. For me, this was the most important part of untangling the circular dependency.
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