Open lilouartz opened 1 month ago
I can somewhat workaround this by changing my server-side object declaration to match what client renders, i.e.
{
name: 'Hello, World!',
'@context': 'https://schema.org',
},
But this is finicky and problematic because I have ESLint rule that auto sorts properties alphabetically.
This looks like it's coming from internal JSON.parse
behavior that must order numeric object keys:
@jacob-ebey What do you think about prefixing those with _
or something in turbo-stream to make them non-numeric?
I think in my case it is the properties that start with @
.
It's not related to the name of the key. It's due to the reuse of a name
property that was previously used. turbo-stream
dedupes keys and values to keep the payload minimal, and it tracks them basically with an incrementing integer. When you return something like the following, the first occurrence of name
gets assigned a lower integer than @context
and then the second occurrence of name
re-uses the earlier/lower id.
export const loader = () => {
return {
meta: [
{
name: 'description',
// ^ `name` here gets assigned a lower numeric id since it's earlier
content: 'Welcome to Remix!',
},
{
'script:ld+json': [
{
'@context': 'https://schema.org',
// ^ `@context` here gets assigned a higher numeric id since it's later
name: 'Hello, World!',
// ^ `name` here reuses the earlier (lower) numeric id
},
],
},
],
};
};
This results in the problem I described above where we stringify an object with a higher numeric key, followed by a lower numeric key - and JSON.parse
re-orders them when parsing, moving name
before @context
Reproduction
https://stackblitz.com/edit/remix-run-remix-ioniz1?file=app%2Froutes%2F_index.tsx
System Info
Used Package Manager
npm
Expected Behavior
No error
Actual Behavior
Error:
Note that the reason I am passing
meta
as loader property is because it was described as solution to https://github.com/remix-run/remix/issues/9418The issue appears because serialized JSON values have different property order.