#debugging

Problem

Imagine you import a JSON file directly (like in your Next.js API):

import root from '../../../../public/data/stages/N1904.Matt.json';

When you try to access properties you know exist on root, e.g. root.childProperty you may get a nasty type-checking surprise:

error TS2322: Type '{ text: { key: string; content: { turn: { key: string; content: { stage: { key: string; content: { move: { key: string; expressions: { word: { key: string; lemma: string; norm: string; string: string; }; }[]; meanings: { ...; }[]; }; }[]; }; }[]; }; }; } | undefined' is not assignable to type 'TextContainer'.
  Type 'undefined' is not assignable to type 'TextContainer'.

Essentially, your TypeScript server cannot validate the types for the imported JSON.

Solution

Just access the problem property as a string index:

Change root.childProperty to root['childProperty']. Boom!

The Problem: Vue3 Key Events Sometimes (or Always) Fire Twice

If you are using Vue 3, it can be annoying and confusing when key events fire twice.

Here’s the fix:

Solution: Use the .stop Modifier

Instead of @keydown.enter.exact.prevent="brk('node-and-siblings')", use @keydown.enter.exact.stop.prevent="brk('node-and-siblings')".

Notice the .stop modifier.

To translate these modifiers, they mean, in order:

• @keydown is the keydown event you want to capture.
• .enter means use the ‘enter’ key.
• .exact means use the exact keycode (i.e., ‘shift + enter’ won’t fire this event handler).
• .stop means stop the event from bubbling up, only let it fire once.
• .prevent means prevent the default action (whatever else ‘enter’ would have done in context).

Hope you found this helpful!