blade: TypeScript cannot find declaration files with module nodenext

Problem

Blade ships with d.ts declaration files. However, since the bundled package.json doesn’t contain a "types" field, the consumer project is unable to find these declaration files and as a result ignores the types for components that Blade ships.

VSCode can’t find the declaration files either as shown by the below warning:

Screenshot 2023-01-17 at 1 10 50 PM

This means that IntelliSense in the editor doesn’t work for types/props. Also, passing wrong props to a component works. For example, the below component compiles without errors.

<Button hello="world">Pay Now</Button>

Solution

The package.json should contain a “types” field that points to the declaration file so the bundler and IDE can find it.

Refer ESM guide for types in exports field: https://www.typescriptlang.org/docs/handbook/esm-node.html

Note that the fallback types field in the above link is required even for ESM bundles right now because proper support for exports field is a part of TypeScript 5 milestone: https://github.com/microsoft/TypeScript/issues/50794#event-8030311249

About this issue

Original URL
State: closed
Created a year ago
Comments: 15 (10 by maintainers)

Most upvoted comments

My bad. I was playing around with the tsconfig values to debug another issue. Didn’t realise Codesandbox saved it. Try now, the issue should come up.

Here’s the tsconfig that reproduces the issue:

{
    "compilerOptions": {
        "jsx": "react-jsx",
        "module": "NodeNext"
    }
}

cseas on Jan 25, 2023

Okay I see, you want a pure ESM output, then in that case we can check if types field resolves the issue, but we need to see if it can work with moduleSuffixes since it needs to work seamlessly across RN and web.

anuraghazra on Jan 20, 2023