<p dir="auto">If you know how to fix the issue, make a pull request instead.</p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I tried using the <code class="notranslate">@types/rebass@3.0.3</code> package and had problems.</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I tried using the latest stable version of tsc. <a href="https://www.npmjs.com/package/typescript" rel="nofollow">https://www.npmjs.com/package/typescript</a></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have a question that is inappropriate for <a href="https://stackoverflow.com/" rel="nofollow">StackOverflow</a>.  (Please ask any appropriate questions there).</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <a href="https://github.com/blog/821-mention-somebody-they-re-notified">Mention</a> the authors (see <code class="notranslate">Definitions by:</code> in <code class="notranslate">index.d.ts</code>) so they can respond.
<ul dir="auto">
<li>Authors: <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/rhysd/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/rhysd">@rhysd</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/ryee-dev/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ryee-dev">@ryee-dev</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/jamesmckenzie/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/jamesmckenzie">@jamesmckenzie</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gretzky/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/gretzky">@gretzky</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/angusfretwell/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/angusfretwell">@angusfretwell</a></li>
</ul>
</li>
</ul>
<p dir="auto">(list of authors was grabbed from the definitions header)</p>
<p dir="auto">Been following along with the types changes for rebass the past week or so (using it currently on a project). I noticed 3.0.3 introduced a complete rework of the implementation of the types that is causing my project to break completely.</p>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="info @storybook/react v4.0.12
info
info =&gt; Loading presets
info =&gt; Loading custom addons config.
info =&gt; Using base config because react-scripts is not installed.
info =&gt; Loading custom webpack config (full-control mode).
info =&gt; Using base config because react-scripts is not installed.
info Building storybook ...
ℹ ｢atl｣: Using typescript@2.9.2 from typescript
ℹ ｢atl｣: Using tsconfig.json from /Users/mdloss/workspace/project/tsconfig.json
ℹ ｢atl｣: Checking started in a separate process...
✖ ｢atl｣: Checking finished with 40 errors
ERR! Failed to build the storybook
ERR! [at-loader] ./node_modules/@types/node/index.d.ts:207:13
ERR!     TS2451: Cannot redeclare block-scoped variable 'console'.
ERR! [at-loader] ./node_modules/@types/node/index.d.ts:252:13
ERR!     TS2300: Duplicate identifier 'require'.
ERR! [at-loader] ./src/Card/Card.tsx:11:7
ERR!     TS2322: Type 'StyledComponentClass&lt;CardProps, any, WithOptionalTheme&lt;CardProps, any&gt;&gt;' is not assignable to type 'StyledComponentClass&lt;ICardProps &amp; CardProps, {}, ICardProps &amp; CardProps&gt;'.
ERR!   Type 'CardProps' is not assignable to type 'ICardProps &amp; CardProps'.
ERR!     Type 'CardProps' is not assignable to type 'ICardProps'.
ERR!       Types of property 'variant' are incompatible.
ERR!         Type 'string | (string | null)[] | { [key: string]: string; } | undefined' is not assignable to type 'string | undefined'.
ERR!           Type '(string | null)[]' is not assignable to type 'string | undefined'.
ERR!             Type '(string | null)[]' is not assignable to type 'string'.
ERR! [at-loader] ./src/Heading/Heading.tsx:15:7
ERR!     TS2322: Type 'StyledComponentClass&lt;HeadingProps, any, WithOptionalTheme&lt;HeadingProps, any&gt;&gt;' is not assignable to type 'StyledComponentClass&lt;IHeadingProps &amp; HeadingProps, {}, IHeadingProps &amp; HeadingProps&gt;'.
ERR!   Type 'HeadingProps' is not assignable to type 'IHeadingProps &amp; HeadingProps'.
ERR!     Type 'HeadingProps' is not assignable to type 'IHeadingProps'.
ERR!       Types of property 'as' are incompatible.
ERR!         Type '&quot;symbol&quot; | &quot;object&quot; | &quot;p&quot; | &quot;cite&quot; | &quot;data&quot; | &quot;form&quot; | &quot;label&quot; | &quot;pattern&quot; | &quot;span&quot; | &quot;summary&quot; |...' is not assignable to type '&quot;h1&quot; | &quot;h2&quot; | &quot;h3&quot; | &quot;h4&quot; | undefined'.
ERR!           Type '&quot;symbol&quot;' is not assignable to type '&quot;h1&quot; | &quot;h2&quot; | &quot;h3&quot; | &quot;h4&quot; | undefined'.
ERR! [at-loader] ./node_modules/@types/webpack-env/index.d.ts:203:13
ERR!     TS2300: Duplicate identifier 'require'.
ERR! [at-loader] ./node_modules/@types/react-native/globals.d.ts:36:15
ERR!     TS2300: Duplicate identifier 'FormData'.
ERR! [at-loader] ./node_modules/@types/react-native/globals.d.ts:107:14
ERR!     TS2300: Duplicate identifier 'RequestInfo'.
ERR! [at-loader] ./node_modules/@types/react-native/globals.d.ts:243:6
ERR!     TS2300: Duplicate identifier 'XMLHttpRequestResponseType'.
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:364:56
ERR!     TS2694: Namespace 'React' has no exported member 'BaseSyntheticEvent'.
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:3922:74
ERR!     TS2314: Generic type 'ReactElement&lt;P&gt;' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:3933:53
ERR!     TS2314: Generic type 'ReactElement&lt;P&gt;' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:3938:54
ERR!     TS2314: Generic type 'ReactElement&lt;P&gt;' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:3943:54
ERR!     TS2314: Generic type 'ReactElement&lt;P&gt;' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4149:88
ERR!     TS2314: Generic type 'ReactElement&lt;P&gt;' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4160:53
ERR!     TS2314: Generic type 'ReactElement&lt;P&gt;' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4165:54
ERR!     TS2314: Generic type 'ReactElement&lt;P&gt;' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4170:54
ERR!     TS2314: Generic type 'ReactElement&lt;P&gt;' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4175:60
ERR!     TS2314: Generic type 'ReactElement&lt;P&gt;' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4261:74
ERR!     TS2314: Generic type 'ReactElement&lt;P&gt;' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4266:74
ERR!     TS2314: Generic type 'ReactElement&lt;P&gt;' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4326:53
ERR!     TS2314: Generic type 'ReactElement&lt;P&gt;' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4332:54
ERR!     TS2314: Generic type 'ReactElement&lt;P&gt;' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4338:54
ERR!     TS2314: Generic type 'ReactElement&lt;P&gt;' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4563:26
ERR!     TS2314: Generic type 'ReactElement&lt;P&gt;' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4573:26
ERR!     TS2314: Generic type 'ReactElement&lt;P&gt;' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4587:10
ERR!     TS2314: Generic type 'ReactElement&lt;P&gt;' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4604:77
ERR!     TS2314: Generic type 'ReactElement&lt;P&gt;' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4616:10
ERR!     TS2314: Generic type 'ReactElement&lt;P&gt;' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4693:23
ERR!     TS2314: Generic type 'ReactElement&lt;P&gt;' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4694:24
ERR!     TS2314: Generic type 'ReactElement&lt;P&gt;' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4695:25
ERR!     TS2314: Generic type 'ReactElement&lt;P&gt;' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4698:12
ERR!     TS2314: Generic type 'ReactElement&lt;P&gt;' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4857:18
ERR!     TS2314: Generic type 'ReactElement&lt;P&gt;' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:6642:10
ERR!     TS2314: Generic type 'ReactElement&lt;P&gt;' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:6645:91
ERR!     TS2314: Generic type 'ReactElement&lt;P&gt;' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:8191:27
ERR!     TS2314: Generic type 'ReactElement&lt;P&gt;' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:9300:14
ERR!     TS2300: Duplicate identifier 'require'.
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:9318:11
ERR!     TS2451: Cannot redeclare block-scoped variable 'console'.
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:9326:18
ERR!     TS2717: Subsequent property declarations must have the same type.  Property 'geolocation' must be of type 'Geolocation', but here has type 'GeolocationStatic'.
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:9329:11
ERR!     TS2451: Cannot redeclare block-scoped variable 'navigator'."><pre class="notranslate">info @storybook/react v4.0.12
info
info =<span class="pl-k">&gt;</span> Loading presets
info =<span class="pl-k">&gt;</span> Loading custom addons config.
info =<span class="pl-k">&gt;</span> Using base config because react-scripts is not installed.
info =<span class="pl-k">&gt;</span> Loading custom webpack config (full-control mode).
info =<span class="pl-k">&gt;</span> Using base config because react-scripts is not installed.
info Building storybook ...
ℹ ｢atl｣: Using typescript@2.9.2 from typescript
ℹ ｢atl｣: Using tsconfig.json from /Users/mdloss/workspace/project/tsconfig.json
ℹ ｢atl｣: Checking started <span class="pl-k">in</span> a separate process...
✖ ｢atl｣: Checking finished with 40 errors
ERR<span class="pl-k">!</span> Failed to build the storybook
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/node/index.d.ts:207:13
ERR<span class="pl-k">!</span>     TS2451: Cannot redeclare block-scoped variable <span class="pl-s"><span class="pl-pds">'</span>console<span class="pl-pds">'</span></span>.
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/node/index.d.ts:252:13
ERR<span class="pl-k">!</span>     TS2300: Duplicate identifier <span class="pl-s"><span class="pl-pds">'</span>require<span class="pl-pds">'</span></span>.
ERR<span class="pl-k">!</span> [at-loader] ./src/Card/Card.tsx:11:7
ERR<span class="pl-k">!</span>     TS2322: Type <span class="pl-s"><span class="pl-pds">'</span>StyledComponentClass&lt;CardProps, any, WithOptionalTheme&lt;CardProps, any&gt;&gt;<span class="pl-pds">'</span></span> is not assignable to <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>StyledComponentClass&lt;ICardProps &amp; CardProps, {}, ICardProps &amp; CardProps&gt;<span class="pl-pds">'</span></span>.
ERR<span class="pl-k">!</span>   Type <span class="pl-s"><span class="pl-pds">'</span>CardProps<span class="pl-pds">'</span></span> is not assignable to <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>ICardProps &amp; CardProps<span class="pl-pds">'</span></span>.
ERR<span class="pl-k">!</span>     Type <span class="pl-s"><span class="pl-pds">'</span>CardProps<span class="pl-pds">'</span></span> is not assignable to <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>ICardProps<span class="pl-pds">'</span></span>.
ERR<span class="pl-k">!</span>       Types of property <span class="pl-s"><span class="pl-pds">'</span>variant<span class="pl-pds">'</span></span> are incompatible.
ERR<span class="pl-k">!</span>         Type <span class="pl-s"><span class="pl-pds">'</span>string | (string | null)[] | { [key: string]: string; } | undefined<span class="pl-pds">'</span></span> is not assignable to <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>string | undefined<span class="pl-pds">'</span></span>.
ERR<span class="pl-k">!</span>           Type <span class="pl-s"><span class="pl-pds">'</span>(string | null)[]<span class="pl-pds">'</span></span> is not assignable to <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>string | undefined<span class="pl-pds">'</span></span>.
ERR<span class="pl-k">!</span>             Type <span class="pl-s"><span class="pl-pds">'</span>(string | null)[]<span class="pl-pds">'</span></span> is not assignable to <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>string<span class="pl-pds">'</span></span>.
ERR<span class="pl-k">!</span> [at-loader] ./src/Heading/Heading.tsx:15:7
ERR<span class="pl-k">!</span>     TS2322: Type <span class="pl-s"><span class="pl-pds">'</span>StyledComponentClass&lt;HeadingProps, any, WithOptionalTheme&lt;HeadingProps, any&gt;&gt;<span class="pl-pds">'</span></span> is not assignable to <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>StyledComponentClass&lt;IHeadingProps &amp; HeadingProps, {}, IHeadingProps &amp; HeadingProps&gt;<span class="pl-pds">'</span></span>.
ERR<span class="pl-k">!</span>   Type <span class="pl-s"><span class="pl-pds">'</span>HeadingProps<span class="pl-pds">'</span></span> is not assignable to <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>IHeadingProps &amp; HeadingProps<span class="pl-pds">'</span></span>.
ERR<span class="pl-k">!</span>     Type <span class="pl-s"><span class="pl-pds">'</span>HeadingProps<span class="pl-pds">'</span></span> is not assignable to <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>IHeadingProps<span class="pl-pds">'</span></span>.
ERR<span class="pl-k">!</span>       Types of property <span class="pl-s"><span class="pl-pds">'</span>as<span class="pl-pds">'</span></span> are incompatible.
ERR<span class="pl-k">!</span>         Type <span class="pl-s"><span class="pl-pds">'</span>"symbol" | "object" | "p" | "cite" | "data" | "form" | "label" | "pattern" | "span" | "summary" |...<span class="pl-pds">'</span></span> is not assignable to <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>"h1" | "h2" | "h3" | "h4" | undefined<span class="pl-pds">'</span></span>.
ERR<span class="pl-k">!</span>           Type <span class="pl-s"><span class="pl-pds">'</span>"symbol"<span class="pl-pds">'</span></span> is not assignable to <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>"h1" | "h2" | "h3" | "h4" | undefined<span class="pl-pds">'</span></span>.
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/webpack-env/index.d.ts:203:13
ERR<span class="pl-k">!</span>     TS2300: Duplicate identifier <span class="pl-s"><span class="pl-pds">'</span>require<span class="pl-pds">'</span></span>.
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/react-native/globals.d.ts:36:15
ERR<span class="pl-k">!</span>     TS2300: Duplicate identifier <span class="pl-s"><span class="pl-pds">'</span>FormData<span class="pl-pds">'</span></span>.
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/react-native/globals.d.ts:107:14
ERR<span class="pl-k">!</span>     TS2300: Duplicate identifier <span class="pl-s"><span class="pl-pds">'</span>RequestInfo<span class="pl-pds">'</span></span>.
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/react-native/globals.d.ts:243:6
ERR<span class="pl-k">!</span>     TS2300: Duplicate identifier <span class="pl-s"><span class="pl-pds">'</span>XMLHttpRequestResponseType<span class="pl-pds">'</span></span>.
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/react-native/index.d.ts:364:56
ERR<span class="pl-k">!</span>     TS2694: Namespace <span class="pl-s"><span class="pl-pds">'</span>React<span class="pl-pds">'</span></span> has no exported member <span class="pl-s"><span class="pl-pds">'</span>BaseSyntheticEvent<span class="pl-pds">'</span></span>.
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/react-native/index.d.ts:3922:74
ERR<span class="pl-k">!</span>     TS2314: Generic <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>ReactElement&lt;P&gt;<span class="pl-pds">'</span></span> requires 1 <span class="pl-c1">type</span> argument(s).
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/react-native/index.d.ts:3933:53
ERR<span class="pl-k">!</span>     TS2314: Generic <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>ReactElement&lt;P&gt;<span class="pl-pds">'</span></span> requires 1 <span class="pl-c1">type</span> argument(s).
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/react-native/index.d.ts:3938:54
ERR<span class="pl-k">!</span>     TS2314: Generic <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>ReactElement&lt;P&gt;<span class="pl-pds">'</span></span> requires 1 <span class="pl-c1">type</span> argument(s).
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/react-native/index.d.ts:3943:54
ERR<span class="pl-k">!</span>     TS2314: Generic <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>ReactElement&lt;P&gt;<span class="pl-pds">'</span></span> requires 1 <span class="pl-c1">type</span> argument(s).
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/react-native/index.d.ts:4149:88
ERR<span class="pl-k">!</span>     TS2314: Generic <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>ReactElement&lt;P&gt;<span class="pl-pds">'</span></span> requires 1 <span class="pl-c1">type</span> argument(s).
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/react-native/index.d.ts:4160:53
ERR<span class="pl-k">!</span>     TS2314: Generic <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>ReactElement&lt;P&gt;<span class="pl-pds">'</span></span> requires 1 <span class="pl-c1">type</span> argument(s).
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/react-native/index.d.ts:4165:54
ERR<span class="pl-k">!</span>     TS2314: Generic <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>ReactElement&lt;P&gt;<span class="pl-pds">'</span></span> requires 1 <span class="pl-c1">type</span> argument(s).
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/react-native/index.d.ts:4170:54
ERR<span class="pl-k">!</span>     TS2314: Generic <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>ReactElement&lt;P&gt;<span class="pl-pds">'</span></span> requires 1 <span class="pl-c1">type</span> argument(s).
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/react-native/index.d.ts:4175:60
ERR<span class="pl-k">!</span>     TS2314: Generic <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>ReactElement&lt;P&gt;<span class="pl-pds">'</span></span> requires 1 <span class="pl-c1">type</span> argument(s).
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/react-native/index.d.ts:4261:74
ERR<span class="pl-k">!</span>     TS2314: Generic <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>ReactElement&lt;P&gt;<span class="pl-pds">'</span></span> requires 1 <span class="pl-c1">type</span> argument(s).
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/react-native/index.d.ts:4266:74
ERR<span class="pl-k">!</span>     TS2314: Generic <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>ReactElement&lt;P&gt;<span class="pl-pds">'</span></span> requires 1 <span class="pl-c1">type</span> argument(s).
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/react-native/index.d.ts:4326:53
ERR<span class="pl-k">!</span>     TS2314: Generic <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>ReactElement&lt;P&gt;<span class="pl-pds">'</span></span> requires 1 <span class="pl-c1">type</span> argument(s).
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/react-native/index.d.ts:4332:54
ERR<span class="pl-k">!</span>     TS2314: Generic <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>ReactElement&lt;P&gt;<span class="pl-pds">'</span></span> requires 1 <span class="pl-c1">type</span> argument(s).
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/react-native/index.d.ts:4338:54
ERR<span class="pl-k">!</span>     TS2314: Generic <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>ReactElement&lt;P&gt;<span class="pl-pds">'</span></span> requires 1 <span class="pl-c1">type</span> argument(s).
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/react-native/index.d.ts:4563:26
ERR<span class="pl-k">!</span>     TS2314: Generic <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>ReactElement&lt;P&gt;<span class="pl-pds">'</span></span> requires 1 <span class="pl-c1">type</span> argument(s).
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/react-native/index.d.ts:4573:26
ERR<span class="pl-k">!</span>     TS2314: Generic <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>ReactElement&lt;P&gt;<span class="pl-pds">'</span></span> requires 1 <span class="pl-c1">type</span> argument(s).
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/react-native/index.d.ts:4587:10
ERR<span class="pl-k">!</span>     TS2314: Generic <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>ReactElement&lt;P&gt;<span class="pl-pds">'</span></span> requires 1 <span class="pl-c1">type</span> argument(s).
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/react-native/index.d.ts:4604:77
ERR<span class="pl-k">!</span>     TS2314: Generic <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>ReactElement&lt;P&gt;<span class="pl-pds">'</span></span> requires 1 <span class="pl-c1">type</span> argument(s).
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/react-native/index.d.ts:4616:10
ERR<span class="pl-k">!</span>     TS2314: Generic <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>ReactElement&lt;P&gt;<span class="pl-pds">'</span></span> requires 1 <span class="pl-c1">type</span> argument(s).
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/react-native/index.d.ts:4693:23
ERR<span class="pl-k">!</span>     TS2314: Generic <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>ReactElement&lt;P&gt;<span class="pl-pds">'</span></span> requires 1 <span class="pl-c1">type</span> argument(s).
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/react-native/index.d.ts:4694:24
ERR<span class="pl-k">!</span>     TS2314: Generic <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>ReactElement&lt;P&gt;<span class="pl-pds">'</span></span> requires 1 <span class="pl-c1">type</span> argument(s).
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/react-native/index.d.ts:4695:25
ERR<span class="pl-k">!</span>     TS2314: Generic <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>ReactElement&lt;P&gt;<span class="pl-pds">'</span></span> requires 1 <span class="pl-c1">type</span> argument(s).
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/react-native/index.d.ts:4698:12
ERR<span class="pl-k">!</span>     TS2314: Generic <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>ReactElement&lt;P&gt;<span class="pl-pds">'</span></span> requires 1 <span class="pl-c1">type</span> argument(s).
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/react-native/index.d.ts:4857:18
ERR<span class="pl-k">!</span>     TS2314: Generic <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>ReactElement&lt;P&gt;<span class="pl-pds">'</span></span> requires 1 <span class="pl-c1">type</span> argument(s).
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/react-native/index.d.ts:6642:10
ERR<span class="pl-k">!</span>     TS2314: Generic <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>ReactElement&lt;P&gt;<span class="pl-pds">'</span></span> requires 1 <span class="pl-c1">type</span> argument(s).
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/react-native/index.d.ts:6645:91
ERR<span class="pl-k">!</span>     TS2314: Generic <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>ReactElement&lt;P&gt;<span class="pl-pds">'</span></span> requires 1 <span class="pl-c1">type</span> argument(s).
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/react-native/index.d.ts:8191:27
ERR<span class="pl-k">!</span>     TS2314: Generic <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>ReactElement&lt;P&gt;<span class="pl-pds">'</span></span> requires 1 <span class="pl-c1">type</span> argument(s).
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/react-native/index.d.ts:9300:14
ERR<span class="pl-k">!</span>     TS2300: Duplicate identifier <span class="pl-s"><span class="pl-pds">'</span>require<span class="pl-pds">'</span></span>.
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/react-native/index.d.ts:9318:11
ERR<span class="pl-k">!</span>     TS2451: Cannot redeclare block-scoped variable <span class="pl-s"><span class="pl-pds">'</span>console<span class="pl-pds">'</span></span>.
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/react-native/index.d.ts:9326:18
ERR<span class="pl-k">!</span>     TS2717: Subsequent property declarations must have the same type.  Property <span class="pl-s"><span class="pl-pds">'</span>geolocation<span class="pl-pds">'</span></span> must be of <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>Geolocation<span class="pl-pds">'</span></span>, but here has <span class="pl-c1">type</span> <span class="pl-s"><span class="pl-pds">'</span>GeolocationStatic<span class="pl-pds">'</span></span>.
ERR<span class="pl-k">!</span> [at-loader] ./node_modules/@types/react-native/index.d.ts:9329:11
ERR<span class="pl-k">!</span>     TS2451: Cannot redeclare block-scoped variable <span class="pl-s"><span class="pl-pds">'</span>navigator<span class="pl-pds">'</span></span>.</pre></div>
<p dir="auto">What's odd is this project does not use <code class="notranslate">react-native</code> whatsoever. It's being brought in with <code class="notranslate">@types/styled-component</code> (that's a whole different issue I should bring up).</p>
<p dir="auto">The 2 errors that don't seem to be related to types on the surface - dealing with Card and Heading - don't really make sense either. Here's the Card component, for example:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import styled, { StyledComponentClass } from 'styled-components';
import { Card as RCard, CardProps } from 'rebass';
import { ITheme } from '../themes/default';

export type TVariants = 'default' | 'primary';

export interface ICardProps {
  variant?: TVariants;
  interactive?: boolean;
}

const Card: StyledComponentClass&lt;ICardProps &amp; CardProps, ITheme&gt; = styled(RCard)`
  ${ (props: any) =&gt; {
    const { variant, interactive, theme: { cards } } = props;
    return interactive &amp;&amp; `
      cursor: pointer;
      transition: background-color 0.2s ease-out;
      &amp;:hover{
        background-color: ${ cards[variant].hovers.backgroundColor };
      };
    `;
  }}
`;

export default Card;"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-s1">styled</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-v">StyledComponentClass</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'styled-components'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">Card</span> <span class="pl-k">as</span> <span class="pl-v">RCard</span><span class="pl-kos">,</span> <span class="pl-v">CardProps</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'rebass'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">ITheme</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'../themes/default'</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-s1">type</span> <span class="pl-v">TVariants</span> <span class="pl-c1">=</span> <span class="pl-s">'default'</span> <span class="pl-c1">|</span> <span class="pl-s">'primary'</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-s1">interface</span> <span class="pl-v">ICardProps</span> <span class="pl-kos">{</span>
  <span class="pl-s1">variant</span>?<span class="pl-s1"></span>: <span class="pl-v">TVariants</span><span class="pl-kos">;</span>
  <span class="pl-s1">interactive</span>?<span class="pl-s1"></span>: <span class="pl-s1">boolean</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-k">const</span> <span class="pl-v">Card</span>: <span class="pl-v">StyledComponentClass</span><span class="pl-c1">&lt;</span><span class="pl-v">ICardProps</span> <span class="pl-c1">&amp;</span> <span class="pl-v">CardProps</span><span class="pl-kos">,</span> <span class="pl-v">ITheme</span><span class="pl-c1">&gt;</span> <span class="pl-c1">=</span> <span class="pl-en">styled</span><span class="pl-kos">(</span><span class="pl-v">RCard</span><span class="pl-kos">)</span><span class="pl-s">`</span>
<span class="pl-s">  <span class="pl-s1"><span class="pl-kos">${</span> <span class="pl-kos">(</span><span class="pl-s1">props</span>: <span class="pl-s1">any</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span></span></span>
<span class="pl-s"><span class="pl-s1">    <span class="pl-k">const</span> <span class="pl-kos">{</span> variant<span class="pl-kos">,</span> interactive<span class="pl-kos">,</span> <span class="pl-c1">theme</span>: <span class="pl-kos">{</span> cards <span class="pl-kos">}</span> <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-s1">props</span><span class="pl-kos">;</span></span></span>
<span class="pl-s"><span class="pl-s1">    <span class="pl-k">return</span> <span class="pl-s1">interactive</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s">`</span></span></span>
<span class="pl-s"><span class="pl-s1"><span class="pl-s">      cursor: pointer;</span></span></span>
<span class="pl-s"><span class="pl-s1"><span class="pl-s">      transition: background-color 0.2s ease-out;</span></span></span>
<span class="pl-s"><span class="pl-s1"><span class="pl-s">      &amp;:hover{</span></span></span>
<span class="pl-s"><span class="pl-s1"><span class="pl-s">        background-color: <span class="pl-s1"><span class="pl-kos">${</span> <span class="pl-s1">cards</span><span class="pl-kos">[</span><span class="pl-s1">variant</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">hovers</span><span class="pl-kos">.</span><span class="pl-c1">backgroundColor</span> <span class="pl-kos">}</span></span>;</span></span></span>
<span class="pl-s"><span class="pl-s1"><span class="pl-s">      };</span></span></span>
<span class="pl-s"><span class="pl-s1"><span class="pl-s">    `</span><span class="pl-kos">;</span></span></span>
<span class="pl-s"><span class="pl-s1">  <span class="pl-kos">}</span><span class="pl-kos">}</span></span></span>
<span class="pl-s">`</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-v">Card</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">I'm reusing the <code class="notranslate">variant</code> here specifically only to allow <code class="notranslate">primary</code> and <code class="notranslate">default</code> as variant values, but the type listed specifically in <code class="notranslate">@types/rebass</code> (and now subsequently <code class="notranslate">@types/styled-system</code>) don't allow strings by themselves apparently.</p>
<p dir="auto">To add some more detail here, rebassjs calls out specifically Button and Card for having built in variant functionality by using the theme to receive any / all theming properties. I'm doing something very similar to Button, but exporting a <code class="notranslate">React.FunctionComponent&lt;&gt;</code> object, with no issues:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React from 'react';
import { Button as RButton, ButtonProps } from 'rebass';

export interface IButtonProps {
  variant?: 'default' | 'primary';
  onClick?: () =&gt; void;
}

const Button: React.FunctionComponent&lt;IButtonProps &amp; ButtonProps&gt; =
  (props: any) =&gt; &lt;RButton { ...props } /&gt;;

Button.displayName = 'Button';

Button.defaultProps = {
  variant: 'default',
  as: 'button',
};

export default Button;"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">Button</span> <span class="pl-k">as</span> <span class="pl-v">RButton</span><span class="pl-kos">,</span> <span class="pl-v">ButtonProps</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'rebass'</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-s1">interface</span> <span class="pl-v">IButtonProps</span> <span class="pl-kos">{</span>
  <span class="pl-s1">variant</span>?<span class="pl-s1"></span>: <span class="pl-s">'default'</span> <span class="pl-c1">|</span> <span class="pl-s">'primary'</span><span class="pl-kos">;</span>
  <span class="pl-s1">onClick</span>?: <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-k">void</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-k">const</span> <span class="pl-v">Button</span>: <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">FunctionComponent</span><span class="pl-c1">&lt;</span><span class="pl-v">IButtonProps</span> <span class="pl-c1">&amp;</span> <span class="pl-v">ButtonProps</span><span class="pl-c1">&gt;</span> <span class="pl-c1">=</span>
  <span class="pl-kos">(</span><span class="pl-s1">props</span>: <span class="pl-s1">any</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">&lt;</span><span class="pl-ent">RButton</span> <span class="pl-kos">{</span> ...<span class="pl-s1">props</span> <span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span>

<span class="pl-v">Button</span><span class="pl-kos">.</span><span class="pl-c1">displayName</span> <span class="pl-c1">=</span> <span class="pl-s">'Button'</span><span class="pl-kos">;</span>

<span class="pl-v">Button</span><span class="pl-kos">.</span><span class="pl-c1">defaultProps</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">variant</span>: <span class="pl-s">'default'</span><span class="pl-kos">,</span>
  <span class="pl-c1">as</span>: <span class="pl-s">'button'</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-v">Button</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Heading looks very similar to the Card component, except I'm implementing <code class="notranslate">variant</code> from styled-system:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const HeadingStyle = variant({ key: 'headings' });
const Heading: StyledComponentClass&lt;IHeadingProps &amp; HeadingProps, ITheme&gt; = styled(RHeading)`
  ${ HeadingStyle }
`;"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-v">HeadingStyle</span> <span class="pl-c1">=</span> <span class="pl-en">variant</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">key</span>: <span class="pl-s">'headings'</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-v">Heading</span>: <span class="pl-v">StyledComponentClass</span><span class="pl-c1">&lt;</span><span class="pl-v">IHeadingProps</span> <span class="pl-c1">&amp;</span> <span class="pl-v">HeadingProps</span><span class="pl-kos">,</span> <span class="pl-v">ITheme</span><span class="pl-c1">&gt;</span> <span class="pl-c1">=</span> <span class="pl-en">styled</span><span class="pl-kos">(</span><span class="pl-v">RHeading</span><span class="pl-kos">)</span><span class="pl-s">`</span>
<span class="pl-s">  <span class="pl-s1"><span class="pl-kos">${</span> <span class="pl-v">HeadingStyle</span> <span class="pl-kos">}</span></span></span>
<span class="pl-s">`</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">I was not receiving any of these errors on version 3.0.2. Until this gets resolved, I'm going to use a custom declaration that'll just implement what 3.0.2 had, plus some changes that we need (that I actually made a PR for yesterday, but closed immediately due to there being an update [3.0.3] that I didn't see yet!).</p>
<p dir="auto">I can post details from my package.json or my yarn.lock files, but the project is actually pretty big so I don't want to make this page any larger than it needs to be 🤷🏻‍♂️</p>
<p dir="auto">The current version of <code class="notranslate">whatwg-streams</code> on master does not pass <code class="notranslate">npm test</code>, which causes test failures on changes to package <code class="notranslate">node</code> (see <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="257571767" data-permission-text="Title is private" data-url="https://github.com/DefinitelyTyped/DefinitelyTyped/issues/19733" data-hovercard-type="pull_request" data-hovercard-url="/DefinitelyTyped/DefinitelyTyped/pull/19733/hovercard" href="https://github.com/DefinitelyTyped/DefinitelyTyped/pull/19733">#19733</a>,<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="256505878" data-permission-text="Title is private" data-url="https://github.com/DefinitelyTyped/DefinitelyTyped/issues/19656" data-hovercard-type="pull_request" data-hovercard-url="/DefinitelyTyped/DefinitelyTyped/pull/19656/hovercard" href="https://github.com/DefinitelyTyped/DefinitelyTyped/pull/19656">#19656</a>,<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="255999876" data-permission-text="Title is private" data-url="https://github.com/DefinitelyTyped/DefinitelyTyped/issues/19612" data-hovercard-type="pull_request" data-hovercard-url="/DefinitelyTyped/DefinitelyTyped/pull/19612/hovercard" href="https://github.com/DefinitelyTyped/DefinitelyTyped/pull/19612">#19612</a>, <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="254374010" data-permission-text="Title is private" data-url="https://github.com/DefinitelyTyped/DefinitelyTyped/issues/19488" data-hovercard-type="pull_request" data-hovercard-url="/DefinitelyTyped/DefinitelyTyped/pull/19488/hovercard" href="https://github.com/DefinitelyTyped/DefinitelyTyped/pull/19488">#19488</a>), and perhaps also other dependencies.</p>
<p dir="auto">To expose the error, commit a dummy change to a comment in <code class="notranslate">types/whatwg-streams/index.d.ts</code> on a separate branch, and run <code class="notranslate">npm test</code>, which fails with</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="index.d.ts(32,15): error TS2300: Duplicate identifier 'ReadableStream'."><pre class="notranslate"><code class="notranslate">index.d.ts(32,15): error TS2300: Duplicate identifier 'ReadableStream'.
</code></pre></div>
<p dir="auto">I don't know if the problem is in <code class="notranslate">whatwg-streams</code> itself or if a breaking change in one of its dependencies somehow got merged.</p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <a href="https://github.com/blog/821-mention-somebody-they-re-notified">Mention</a> the authors (see <code class="notranslate">Definitions by:</code> in <code class="notranslate">index.d.ts</code>) so they can respond.
<ul dir="auto">
<li>Authors: <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/saschanaz/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/saschanaz">@saschanaz</a></li>
</ul>
</li>
</ul>