I've added React, React-DOM, and React Addons library to my pen.
Here's my pen:
https://codepen.io/graven_whismas/pen/QBQQmj
On clicking the button, the word in state should appear, from initial opacity of 0.4 to 1.
But as I click the button, all the content on the page disappears.
This is the error I get:
https://reactjs.org/docs/error-decoder.html?invariant=254&args[]=.0
There's a few things wrong with the code in your pen that will bring about the problem you are having.
The first step is to use the development versions of the libraries, in order to get better error messages. Use https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-with-addons.js instead of https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-with-addons.min.js.
Second, loading several versions of React can cause the issue your are having. Remove https://cdnjs.cloudflare.com/ajax/libs/react/16.4.1/umd/react.production.min.js from the list of external scripts you are loading.
Thirdly, there is a typo when you specify the leave timeout of the animation. You have written transtionLeaveTimeout, where it should be transitionLeaveTimeout. With this type, the transition library will complain about a missing property.
This CodePen summarizes the changes you need to make.
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.
Summary
The cypress test suite on our project is consistently failing on a few tests on the branch updating React to version 18 and Next.js to version 13. It fails on clicking elements, with the ‘element has detached from the DOM’ error. The development environment is set to react strict mode, which the tests run on.
The Problem
We are using MUI 5, and the test is to check different inputs and buttons.
The overall problem in the tests is that it is unable to click the checkbox input from MUI, as well as a link on a Card component from MUI as well. The checkbox is in a dialog modal component.
The test does not error on the click() command, and the test proceeds as if it clicked it, but the checkbox does not actually get clicked on the screen. Adding a cy.wait() after this click does result in the checkbox actually getting clicked, but I would prefer an alternative to wait.
The test does however fail on the click() command when clicking the link in the Card component, with the following error:
Cypress Error on click()
Adding a wait to the click() that clicks the ‘vehicle-card-link’ element makes the test and the click quite flaky, and somehow makes other tests in the same test suite that were previously not failing, more flaky.
The Test Code
The following is the cypress test code that is failing, with added comments for context:
// The test
cy.getBySel('more-filters-button').click(); // Opens the MUI Dialog Modal
cy.get('input[name="condition"][value="New"]').click(); // Gets the Checkbox component and clicks on it
cy.getBySel('save-filter-modal').click(); // Clicks a button to close the modal
cy.getBySel('vehicle-card-link').first().click(); // Gets the first MUI Card and clicks on the link
cy.getBySel('vehicle-name').should('exist’); // Checks that the new page with a specific element has opened
// from the commands.js file, for context
Cypress.Commands.add('getBySel', (selector, args, operator = '') => cy.get(`[data-cy${operator}=${selector}]`, { ...args }));
Some More Context:
We use the data-cy attribute on components to help with testing, and the custom command above helps to get those elements in cypress.
Important Notes
This is one of the failing tests, the others follow a similar pattern and I have left them out. If you would like more examples, I can add them.
This test does not fail on any other PR, neither is it very flaky on other PRs. The PR this is failing on only updates React to React18, and Next to Next13, along with a few changes to how images render with Next13, and should not be affecting this part of the app or code.
There are other tests for other parts of the app that use checkbox and card components from MUI that are not failing.
Suspected Cause
I imagine this has to do with strict mode on React, and it reloading the elements on the page twice.
What I’ve Tried
Adding guards before the click command:
.should(‘exist’), and
.should(‘be.visible’)
This does not affect the behaviour of the problematic tests.
Adding a cy.wait(100) after the click.
This makes the test go from failing every time to quite flaky as mentioned before, when it comes the vehicle-card-link MUI Card element.
Adding a timeout or delay to the click command
.
click({delay: 1000}) or click({timeout: 1000})
This does not affect the behaviour of the problematic tests.
The fundamental problem is there are zero checks on the page changes that occur after each action.
The tests will try to run at the fastest speed possible, and that means you can (sometimes) get stale elements picked up (hence detached errors).
Add some visual check after actions, as example
// open modal and confirm it's open
cy.getBySel('more-filters-button').click();
cy.contains('My Modal Title Here').should('be.visible')
// Change state, save, confirm modal is closed
cy.get('input[name="condition"][value="New"]').click();
cy.getBySel('save-filter-modal').click();
cy.contains('My Modal Title Here')
.should('not.be.visible')
// .should('not.exist') // or this one
// Carry on after save action is complete
cy.getBySel('vehicle-card-link').first().click();
Update to Cypress v12.2.0
The latest version of Cypress has revamped queries that detect detached errors and fixes them when the runner finds them.
This step alone should fix your issue.
I'm trying to render a 3D avatar using react-three-fiber and React, but I'm experiencing some difficulties with positioning the avatar. As you can see from from the following CodeSandbox https://codesandbox.io/s/vigorous-ardinghelli-ypwjsb?file=/pages/index.js, the top of the avatar's head is not visible when you first render the page. However, if you change the position of the model (e.g. from [0.025, -0.9, 1] to [0.025, -1, 1]) and re-render the page, suddenly the avatar is showing correctly. Why is that?
Reposting the solution I got from a Reddit user:
it looks like the keyframe track actions["Armature|mixamo.com|Layer0"].play() pushes the model up and down.
i reexported the model
npx gltfjsx model.glb --keepnames
https://codesandbox.io/s/interesting-lewin-rnq66m?file=/pages/index.js and that seems to do it. it should preserve names by default when animations are present, i don't get why it's omitting them. but either way, it works.
should be fixed upstream (gltfjsx) as well now. another export should include names
We are developing a huge application with React. One of our forms includes 60+ plus components placed on different Tab items.
When i try to edit an input it took 190ms to see typed chars in the textbox. After digging the problem for hours we realized adding a component increases the response time. Then we decided that the problem is antdesign s render logic. Then we tried it with PrimeReact using "why-did-you-update" package. The result was same!
When any change occurred in the state, all the components ( including Icons :) ) tried to render per "why-did-you-update" messages.
Here is the sandbox : https://codesandbox.io/s/6w30ro2l9w
Are the "why-did-you-update" messages wrong or we missing something?
Having an issue where a 3rd party library is setting document.body.innerHTML, and that causes setState to stop seeming to work fully. In React tools in chrome and when debugging it updates the state object correctly, but the rendered output does not update.
Cannot figure out what is going on here, no error occurs, stepping through the debugger nothing stands out to me. At first I was also using dangerouslySetInnerHTML, but the issue seems to be occurring on normal jsx value injection too.
Example here, if you modify the value of const ModifyBody = true; to false and it works as expected, but with the document.body.innerHTML = it doesn't update.
https://codepen.io/eibwen/pen/gjBxrZ
Just to restate it, its a third party library doing the body.innerHTML. Specifically its a library to create a medium.com-like popup when selecting text, if you happened to know a library that could do this with better compatibility with TypeScript/React I'd be all ears on that too