<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">
<p dir="auto"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I tried using the <code class="notranslate">@types/styled-components</code> package and had problems because since of v.4.1.9 another <a href="https://user-images.githubusercontent.com/8643060/53185025-d6070a00-3606-11e9-9fc9-1e61afc1f2cf.png" rel="nofollow">conflicted dependency</a> was added (@types/react-native) and conflicts with @types/node . See <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/commit/5dd798b9aa417f01db598fbded1a83a8a857eb39">commit</a></p>
</li>
<li class="task-list-item">
<p dir="auto"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I tried using the latest stable version(3.3.3333) of tsc. <a href="https://www.npmjs.com/package/typescript" rel="nofollow">https://www.npmjs.com/package/typescript</a></p>
</li>
<li class="task-list-item">
<p dir="auto"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> I have a question that is inappropriate for <a href="https://stackoverflow.com/" rel="nofollow">StackOverflow</a>.  (Please ask any appropriate questions there).</p>
</li>
<li class="task-list-item">
<p dir="auto"><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.</p>
<ul dir="auto">
<li>Authors: <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/jkillian/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/jkillian">@jkillian</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Igorbek/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Igorbek">@Igorbek</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Igmat/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Igmat">@Igmat</a> @lavoaster <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Jessidhia/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Jessidhia">@Jessidhia</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/eps1lon">@eps1lon</a> @flavordaaave</li>
</ul>
</li>
</ul>
<h3 dir="auto">how to reproduce:</h3>
<ul dir="auto">
<li>Fresh install react app by command<br>
<code class="notranslate">yarn create react-app my-app-ts --scripts-version=react-scripts-ts</code></li>
<li>add styled components<br>
<code class="notranslate">yarn add styled-components</code><br>
<code class="notranslate">yarn add -D @types/styled-components</code></li>
<li>import ThemeProvider to src/index.tsx and wrap  to</li>
</ul>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {ThemeProvider} from &quot;styled-components&quot;;
import App from './App';
import './index.css';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
    &lt;ThemeProvider theme={{}}&gt;
        &lt;App /&gt;
    &lt;/ThemeProvider&gt;,
  document.getElementById('root') as HTMLElement
);
registerServiceWorker();"><pre class="notranslate"><code class="notranslate">import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {ThemeProvider} from "styled-components";
import App from './App';
import './index.css';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
    &lt;ThemeProvider theme={{}}&gt;
        &lt;App /&gt;
    &lt;/ThemeProvider&gt;,
  document.getElementById('root') as HTMLElement
);
registerServiceWorker();
</code></pre></div>
<ul dir="auto">
<li>run build command:<br>
<code class="notranslate">yarn start</code></li>
<li>Expected result:<br>
See the react app</li>
<li>Current result:</li>
</ul>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/8643060/53246650-f348e080-36b9-11e9-870b-9a5b0a2cb024.png"><img src="https://user-images.githubusercontent.com/8643060/53246650-f348e080-36b9-11e9-870b-9a5b0a2cb024.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">There is a lot of fails according to many definitions conflicts with lib.dom<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/8643060/53246958-bc26ff00-36ba-11e9-9ef7-94e591d7a00e.png"><img src="https://user-images.githubusercontent.com/8643060/53246958-bc26ff00-36ba-11e9-9ef7-94e591d7a00e.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">the current underscore definitions in <code class="notranslate">/underscore</code> folder are targeting browsers (i.e. they have <code class="notranslate">declare var _</code> ambient  declarations) which make it hard to use them with node which would require a <code class="notranslate">declare module</code> definition. There is a project hat provides this (<a href="https://github.com/alvivi/typescript-underscore">https://github.com/alvivi/typescript-underscore</a>), so it would be great to include it as <code class="notranslate">node_underscore</code></p>
<p dir="auto">(Note: I did not want to submit a PR for this since it's not my work)</p>