Generated TypeScript definitions file has broken import("")

[bvaughn]

Originally reported at bvaughn/react-error-boundary#133

Parcel version 2.8.3

Repro

The easiest way to repro this is to:

1. Check out this repo: https://github.com/bvaughn/parceljs-typescript-bug
2. Run yarn install && yarn build
3. Look at dist/index.d.ts

---

Source

// index.ts
export * from "./ErrorBoundary";
export * from "./ErrorBoundaryContext";

// ErrorBoundaryContext.ts
import { createContext } from "react";

export type ErrorBoundaryContextType = {};

export const ErrorBoundaryContext = createContext<ErrorBoundaryContextType | null>(null);

// ErrorBoundary.ts
import { Component, createElement, PropsWithChildren } from "react";
import { ErrorBoundaryContext } from "./ErrorBoundaryContext";

export class ErrorBoundary extends Component<PropsWithChildren> {
  render() {
    const { children } = this.props;

    return createElement(
      ErrorBoundaryContext.Provider,
      {
        value: {},
      },
      children
    );
  }
}

Output

// dist/index.d.ts
import { Component, PropsWithChildren } from "react";
export type ErrorBoundaryContextType = {};
export const ErrorBoundaryContext: import("react").Context<ErrorBoundaryContextType>;
export class ErrorBoundary extends Component<PropsWithChildren> {
  render(): import("react").FunctionComponentElement<
    import("react").ProviderProps<
      import("ErrorBoundaryContext").ErrorBoundaryContextType
    >
  >;
}

Problem

Note the return type of the render method of ErrorBoundary – it tries to import ErrorBoundaryContext as though it were
a separate package/module, rather than a variable that's already in scope.

[bvaughn]

Note that a workaround for this issue seems to be declaring an explicit return type:

return createElement(
  ErrorBoundaryContext.Provider,
  {
    value: {},
  },
  children
) as ReactElement;

// dist/index.d.ts
export class ErrorBoundary extends Component<PropsWithChildren> {
    render(): ReactElement<any, string | import("react").JSXElementConstructor<any>>;
}

[devongovett]

Hmm looks like TSC generates the dynamic import but we only handle import declarations (statements) here:

parcel/packages/transformers/typescript-types/src/collect.js

Line 37 in b2331a1

if (ts.isImportDeclaration(node) && node.importClause) {

Might need to add a pass to rewrite dynamic imports to regular import statements first if TSC is generating these...