[React@17][[email protected]] Error - Can only create one Element of type card #154
Comments
|
This is probably the culprit https://reactjs.org/blog/2020/08/10/react-v17-rc.html#effect-cleanup-timing effect cleanup functions used to run synchronously but now runs asynchronously. |
|
Hey @thetrevdev, thanks for reporting. That does indeed look like the issue. #153 fixed the problem when destroying then recreating an Element of the same type after some delay. But it seems recreating an Element of the same type immediately causes issues, which makes sense given the This will reproduce as well: export default function App() {
const [counter, setCounter] = useState(0);
return (
<div className="App">
<Elements stripe={stripePromise}>
<CardElement key={counter} />
</Elements>
<button onClick={() => setCounter(counter + 1)}>Replace Element</button>
</div>
);
}I'm going to investigate a fix. In the meantime, one workaround would be to recreate a new export default function App() {
const [counter, setCounter] = useState(0);
return (
<div className="App">
<Elements stripe={stripePromise} key={counter}>
<CardElement key={counter} />
</Elements>
<button onClick={() => setCounter(counter + 1)}>Replace Element</button>
</div>
);
}I'm also curious how this comes up for you in practice. What in your app is making a |
|
I think this is the fix but I am testing it now. |
|
This fixes the issue. I am putting up a PR after I add a unit test |
|
Wonderful, much appreciated. |
|
Hmmm. I am having trouble reproducing it via unit tests |
|
*Actually I am able to reproduce it I just don't see the error because I think elements is mocked. I'll probably have a working test shortly. |
Fixes stripe#154 on react17
|
We need to make sure switching to |
|
Published fix in v1.2.2
Thanks 👍 This component doesn't run at all server-side, and already contains a |
Summary
When removing and adding a card element elsewhere in the dom it will throw the error
"Uncaught IntegrationError: Can only create one Element of type card."
This happens on React 17 but not React 16.
Other information
https://codesandbox.io/s/gracious-dawn-txrz7?file=/src/App.js
Maybe related to one of these issues but likely related to React 17
#153
#147
#152
The text was updated successfully, but these errors were encountered: