Typescript - data.json is not of type CompatData

[j-m]

If you try to

import * as bcd from '@mdn/browser-compat-data/data.json'
const data = bcd as CompatData

you will see the error

Conversion of type '{ api: { ANGLE_instanced_arrays: { __compat: { mdn_url: string; spec_url: string; support: { chrome: { version_added: string; }; chrome_android: { version_added: string; }; edge: { version_added: string; }; ... 8 more ...; webview_android: { ...; }; }; status: { ...; }; }; drawArraysInstancedANGLE: { ...; }; drawEle...' to type 'CompatData' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
Type '{ api: { ANGLE_instanced_arrays: { __compat: { mdn_url: string; spec_url: string; support: { chrome: { version_added: string; }; chrome_android: { version_added: string; }; edge: { version_added: string; }; ... 8 more ...; webview_android: { ...; }; }; status: { ...; }; }; drawArraysInstancedANGLE: { ...; }; drawEle...' is not comparable to type 'CompatDataIdentifiers'.
Types of property 'api' are incompatible.
Type '{ ANGLE_instanced_arrays: { __compat: { mdn_url: string; spec_url: string; support: { chrome: { version_added: string; }; chrome_android: { version_added: string; }; edge: { version_added: string; }; ... 8 more ...; webview_android: { ...; }; }; status: { ...; }; }; drawArraysInstancedANGLE: { ...; }; drawElementsIn...' is not comparable to type 'PrimaryIdentifier'.
Property '"ANGLE_instanced_arrays"' is incompatible with index signature.
Type '{ __compat: { mdn_url: string; spec_url: string; support: { chrome: { version_added: string; }; chrome_android: { version_added: string; }; edge: { version_added: string; }; firefox: { version_added: string; }; ... 7 more ...; webview_android: { ...; }; }; status: { ...; }; }; drawArraysInstancedANGLE: { ...; }; dra...' is not comparable to type 'Identifier'.
Type '{ __compat: { mdn_url: string; spec_url: string; support: { chrome: { version_added: string; }; chrome_android: { version_added: string; }; edge: { version_added: string; }; firefox: { version_added: string; }; ... 7 more ...; webview_android: { ...; }; }; status: { ...; }; }; drawArraysInstancedANGLE: { ...; }; dra...' is not comparable to type 'PrimaryIdentifier'.
Property '"__compat"' is incompatible with index signature.
Type '{ mdn_url: string; spec_url: string; support: { chrome: { version_added: string; }; chrome_android: { version_added: string; }; edge: { version_added: string; }; firefox: { version_added: string; }; firefox_android: { ...; }; ... 6 more ...; webview_android: { ...; }; }; status: { ...; }; }' is not comparable to type 'Identifier'.
Type '{ mdn_url: string; spec_url: string; support: { chrome: { version_added: string; }; chrome_android: { version_added: string; }; edge: { version_added: string; }; firefox: { version_added: string; }; firefox_android: { ...; }; ... 6 more ...; webview_android: { ...; }; }; status: { ...; }; }' is not comparable to type 'PrimaryIdentifier'.
Property '"mdn_url"' is incompatible with index signature.
Type 'string' is not comparable to type 'Identifier'.
Type 'string' is not comparable to type 'PrimaryIdentifier'.

Or should I be trying to cast the data to another type?

[queengooborg]

From our discussions regarding a complete internal ESM conversion, I'd been informed that JSON cannot be imported directly in ESM. What happens if you import the module's defaults?

import bcd from "@mdn/browser-compat-data";

[j-m]

Ahh I have "esModuleInterop": false in my tsconfig so

import bcd from '@mdn/browser-compat-data'
const { css } = bcd as CompatData

produces

const { css } = bcd as CompatData
^
TypeError: Cannot read property 'css' of undefined

But if I set "esModuleInterop": true or do

import * as bcd from '@mdn/browser-compat-data'
const { css } = bcd as CompatData

then the import works no problem.

Don't understand why the typecast errors if you do it directly, but hey ho, thanks for your help!

[queengooborg]

I'm happy to help! I admittedly don't know TypeScript all that well (I've never used it, heh), so I couldn't really say what's causing the issue. The good news is that work is being done to create ESM-native bindings, so you won't have to leave that config parameter on. Check out #12169 for more details on that!