`@remirror/react-core` ships incorrect types in `remirror-react-core.d.ts` causing typescript error `Cannot find namespace 'Remirror$1'.`

[ceisele-r]

Summary

Using @remirror/react-core in a typescript project causes the following typescript error to be emitted:

node_modules/@remirror/react-core/dist/remirror-react-core.d.ts:835:58 - error TS2833: Cannot find namespace 'Remirror$1'. Did you mean 'Remirror'?

835 interface RemirrorProps<Extension extends AnyExtension = Remirror$1.Extensions> extends Omit<ReactFrameworkProps<Extension>, 'stringHandler' | 'manager'>, I18nProps {
                                                             ~~~~~~~~~~

node_modules/@remirror/react-core/dist/remirror-react-core.d.ts:895:62 - error TS2833: Cannot find namespace 'Remirror$1'. Did you mean 'Remirror'?

895 declare function Remirror$1<Extension extends AnyExtension = Remirror$1.Extensions>(props: RemirrorProps<Extension>): ReactElement<RemirrorProps<Extension>>;

Steps to reproduce

• Import @remirror/react-core in a typescript project
• Build the project using tsc (v4.7.4).

Expected results

Typescript compiles

Actual results

Typescript emits the following error

node_modules/@remirror/react-core/dist/remirror-react-core.d.ts:835:58 - error TS2833: Cannot find namespace 'Remirror$1'. Did you mean 'Remirror'?

835 interface RemirrorProps<Extension extends AnyExtension = Remirror$1.Extensions> extends Omit<ReactFrameworkProps<Extension>, 'stringHandler' | 'manager'>, I18nProps {
                                                             ~~~~~~~~~~

node_modules/@remirror/react-core/dist/remirror-react-core.d.ts:895:62 - error TS2833: Cannot find namespace 'Remirror$1'. Did you mean 'Remirror'?

895 declare function Remirror$1<Extension extends AnyExtension = Remirror$1.Extensions>(props: RemirrorProps<Extension>): ReactElement<RemirrorProps<Extension>>;

Probably this is caused by the same underlying problem as #2070 in rollup-plugin-dts: https://github.com/Swatinem/rollup-plugin-dts/issues/266 .

In the types in the resulting package(node_modules/@remirror/react-core/dist/remirror-react-core.d.ts), it seems that the function as well as the namespace have been renamed from Remirror to Remirror$1 which seems to be incorrect. The exported function is then aliased back to Remirror in the export. So I guess only the function name should to be renamed to Remirror$1 and then aliased back to Remirror in the export so it does not clash with the namespace (Remirror) name.

/**
 * [[`Remirror`]] is the component for putting the editor into into it's child
 * component.
 *
 * @remarks
 *
 * The main component for remirror. This acts both as a Provider of the remirror
 * context. All components rendered within `Remirror` have access to the
 * remirror context via `useRemirrorContext`.
 *
 * I can also be rendered as a standalone editor without children. In this case
 * the context can be accessed from outside the editor via
 * `useRemirror().getContext()`.
 */
declare function Remirror$1<Extension extends AnyExtension = Remirror$1.Extensions>(props: RemirrorProps<Extension>): ReactElement<RemirrorProps<Extension>>;

export { ..., Remirror$1 as Remirror, ... };

Possible Solution

Rename the exported function Remirror here https://github.com/remirror/remirror/blob/5a6ade6e35f5480eca1eac8b281e8a9342409a46/packages/remirror__react-core/src/react-remirror.tsx#L107 or the namespace so they don't clash.

Ultimately, I think the bug mentioned above in rollup-plugin-dts should be fixed.

Screenshot(s)

n/a

[ocavue]

We should try other DTS rollup tools (e.g. @microsoft/api-extractor). rollup-plugin-dts isn't that reliable for a complex project like Remirror.

[ceisele-r]

@ocavue just wanted to ask whether there is any update on this problem as we are stuck on old remirror versions because newer versions no longer compile because of this. And I guess other Typescript users are also affected. Are different DTS rollup tools currently evaluated by you or is this something being considered? Or will this be something for v3 probably?

[ocavue]

@ceisele-r Hi. I plan to work on this in August, but I'm not exactly sure when I can finish it. I want to use @microsoft/api-extractor since it's likely more reliable, however, it has a big limitation now as it doesn't support multiple entry points (link). I'm trying to find a workaround for it.

In the meantime, does adding "skipLibCheck": true in tsconfig.json work for your project?

[ceisele-r]

Hi @ocavue , thanks for the fast response. Nice to hear that you plan to work on this.

Enabling skipLibCheck is unfortunately not an option as skipLibCheck does unfortunately not allow to scope it to single packages and therefore it would disable type checks for all project dependencies completely.