instructure / instructure/instructure-ui

instanceCounterMap and Remix

Open
#1,534 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
480
Forks
108
Avg merge
6d 1h
Merged PRs (30d)
16

Description

Question

I'm writing an LTI in Remix and I get some hydration errors. I've implemented the InstUISettingsProvider with the instanceCounterMap. As far as I can grasp it, it lists all the components in the document and hands out an ID for them, right?
This doesn't seem to work for Remix, probably because they handle it differently than Nextjs. But I can't pinpoint where it -exactly- goes wrong. Any ideas?

When I run it without the instanceCounterMap, the ID's keep on incrementing with every refresh. How does this happen?

Maybe this question could be coupled to #1415

Code Sample

https://github.com/devinekask/remix-instructureui

excerpt from the logs:

+ id="RadioInput_1"
- id="RadioInput_0"
...
+ id="RadioInput_3"
- id="RadioInput_1"
...
+ id="RadioInput_5"
- id="RadioInput_2"

Additional Details

I also asked the Remix community about this issue.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked remix-instructureui example and the InstUISettingsProvider instanceCounterMap behavior described in the issue. Compare the server and client ID sequences in the hydration logs; done means the Remix example hydrates without errors and component IDs remain consistent across refreshes.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.