Logo Ryder.Dev

TypeScript property does not exist on type '{}' for imported object

ryder ryder
2023-06-24
2 min read
Table of Contents

TypeScript property does not exist on type '' for imported object

Originally posted: 2021-04-27

Avoid type errors when you import JSON directly

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!