Vue mounting error
Ninguém assumiu esta issue ainda.
Avaliação
- Dificuldade
- 3/5
- Tempo estimado
- 1-2 dias
- Facilidade para iniciantes
- 38/100
- Tipo de issue
- Bug
- Clareza
- Razoavelmente clara
- Status de atividade
- Estagnada
- Stack de tecnologia
- react, typescript
- Domínio
- frontend
Direção de pesquisa
Reproduce the first-open failure with the shown v-dialog and seam-device-details example, then inspect the mounting timing between the Vue modal and the React component. Done means the component renders correctly when the modal is opened the first time, without the v-if and $nextTick workaround, and the React invariant 409 error is gone.
Escrita pelo modelo de indexação a partir do texto da issue.
Descrição
- seamapi/react v1.41.0
- Device IDs: 598a5a28-e314-4864-9b5d-3aba353b8587, 86483ac1-ba59-452c-8c0e-60d611928d73
Some components that are displayed correctly on our app fail to be displayed in a modal (In the default slot of a v-dialog https://v2.vuetifyjs.com/en/api/v-dialog/ ) with the following error in console:
https://legacy.reactjs.org/docs/error-decoder.html/?invariant=409
This error appears when the modal is opened.
If I close the modal and re-open it, the component is displayed correctly the second time.
Code:
<v-dialog :value="!!value">
<seam-device-details
:client-session-token="token"
:device-id="value"
/>
<v-dialog>
Workaround
The workaround we found for now is to wrap the seam component in an element conditionally rendered (v-if) on an internal ready variable that is set to true soon after the modal is rendered.
The following code does not work if we remove the delay this.$nextTick and set the this.ready variable immediately.
This is not super clean but it works, so I removed the “Blocking” tag on this issue
watch: {
value (val) {
if (val && !this.ready) this.$nextTick(() => { this.ready = true })
},
},
value is the prop set to the deviceId to enable the modal, and set to null to close the modal
- Linguagem predominante
- TypeScript
- Estrelas
- 10
- Forks
- 3
- Merge médio
- 2h 51min
- PRs com merge (30d)
- 1
Preparar o ambiente
Inicia o contêiner de desenvolvimento do projeto no navegador, com a sua própria conta do GitHub.
- Sem Dockerfile nem arquivo Docker Compose
- Sem modelo de pull request
- Sem guia de contribuição
Primeiros passos
- Leia a issue inteira e depois o guia de contribuição do projeto.
- Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
- Faça um fork do repositório e trabalhe em uma branch.
- Abra um pull request que referencie o número da issue.
Mais de seamapi/react
-
bug seam components
Dificuldade 3/5 1-2 dias Facilidade para iniciantes 20/100
-
bug seam components
Dificuldade 4/5 3-5 dias Facilidade para iniciantes 35/100
-
seam components
Dificuldade 4/5 3-5 dias Facilidade para iniciantes 30/100
-
seam components
Dificuldade 5/5 Mais de uma semana Facilidade para iniciantes 25/100
-
seam components
Dificuldade 4/5 3-5 dias Facilidade para iniciantes 32/100
Todas as issues de seamapi/react
Issues semelhantes
-
Dificuldade 1/5 Menos de uma hora Facilidade para iniciantes 65/100
521xueweihan/HelloGitHub#4025 ·
-
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 82/100
voidzero-dev/void#478 ·
Mantenedores costumam responder em até 1 dia
-
bug
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 69/100
Small-tailqwq/dsh-deep-whale#207 ·
Mantenedores costumam responder em até 1 dia
-
The inspector never shows the instances field, so scaling out is unreachableTalvez já em andamento @Mrkewl assumiu hoje. Aberta
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 76/100
xevrion/breakscale#96 ·
Mantenedores costumam responder em até 4 dias
-
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 70/100
Flux159/mcp-server-kubernetes#384 ·