Emotion: Really strange import statements when React not included

[TejasQ]

Hello, we're emotion users over at https://github.com/contiamo/operational-ui and we've stumbled across a really interesting issue.

When creating styled components that do not use JSX, we leave off the import * as React from "react" statements, since technically, the JSX pragma is not required.

Leaving this off leads to strange output from the typescript compiler:

Full Snippet without React import

/// <reference path="../../../node_modules/create-emotion/types/index.d.ts" />
/// <reference types="react" />
export declare const Form: import("create-emotion-styled/types/react").StyledOtherComponent<{}, import("eac").DetailedHTMLProps<import("eac").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, Readonly<{}>>;
export default Form;

Full Snippet _with_ React import

import * as React from "react";
export declare const Form: import("create-emotion-styled/types/react").StyledOtherComponent<{}, React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, Readonly<{}>>;
export default Form;

The interesting thing is when React isn't imported, TypeScript gets some weird idea to import("eac") and then immediately complains that that module doesn't exist. 🤔

We're genuinely confused about this behavior and were wondering what we can do to fix it. We're more than happy to contribute to this repository if it helps.

Currently, we've added a workaround to our codebase to needlessly import React everywhere, even if it's not explicitly used, while avoiding the TypeScript compiler's unhappiness at unused identifiers (see https://github.com/contiamo/operational-ui/pull/658).

Looking forward to figuring this out together.

• emotion version: 9.2.5
• react version: 9.2.5

Reproduction:
In any typescript app, yarn add @operational/components, import it and try to compile with it.

[Ailrun]

Thank you for reporting the issue!
However, IMO, it looks like TS bug. import("eac") should be import("React") with prepended R and appended t.

[TejasQ]

How do we proceed here? Shall I open an issue on TS and link it to this one?

[Ailrun]

That's one good way to progress. Could you open an issue?

[TejasQ]

Totally. It's over at https://github.com/Microsoft/TypeScript/issues/26295.

[TejasQ]

So @weswigham and the incredible TypeScript team have closed the issue! I'll test it in the nightly and report back early next week if we can close this.

[Ailrun]

@TejasQ I wish your successful test! :)

[TejasQ]

Thanks!

[Ailrun]

@TejasQ It looks like Microsoft/TypeScript#26295 is fixed. Could you test this again with up-to-date TypeScript?

[TejasQ]

Yup. It works! :)

[mattias800]

@TejasQ With 3.0.3? I'm still getting an error with 3.0.3.

➜  stenajs-webui-common git:(master) ✗ rm -rf lib
➜  stenajs-webui-common git:(master) ✗ ./node_modules/.bin/tsc --version
Version 3.0.3
➜  stenajs-webui-common git:(master) ✗ ./node_modules/.bin/tsc
➜  stenajs-webui-common git:(master) ✗ cat lib/components/ui/colors/Background.d.ts
/// <reference path="../../../../node_modules/create-emotion/types/index.d.ts" />
import { CSSProperties } from 'react';
export interface BackgroundProps {
    color?: string;
    hoverColor?: string;
    height?: string;
    style?: CSSProperties;
}
export declare const Background: import("create-emotion-styled/types/react").StyledOtherComponent<BackgroundProps, import("eac").DetailedHTMLProps<import("eac").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any>;

[mattias800]

Ok, worked with latest 3.1.

➜  stenajs-webui-common git:(master) ✗ rm -rf lib
➜  stenajs-webui-common git:(master) ✗ ./node_modules/.bin/tsc --version
Version 3.1.0-dev.20180907
➜  stenajs-webui-common git:(master) ✗ ./node_modules/.bin/tsc
➜  stenajs-webui-common git:(master) ✗ cat lib/components/ui/colors/Background.d.ts
/// <reference path="../../../../node_modules/create-emotion/types/index.d.ts" />
import { CSSProperties } from 'react';
export interface BackgroundProps {
    color?: string;
    hoverColor?: string;
    height?: string;
    style?: CSSProperties;
}
export declare const Background: import("create-emotion-styled/types/react").StyledOtherComponent<BackgroundProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any>;

[mattias800]

Well, I still get the

/// <reference path="../../../../node_modules/create-emotion/types/index.d.ts" />

As OP said, this does not happen if I import * from react.

[Ailrun]

@mattias800 IMO, that reference path is just OK, since it's valid path to our type definition file.

[TejasQ]

@Ailrun is right, it should be just fine. @mattias800 are you having trouble with that?