title: How to convert basic Javascript project to React-Typescript compatible project
body: <p>I'm trying to convert a basic TS app to a React Typscript app.</p>
  <p>My html looks like this:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
      &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;p&gt;This is the entry point to my app&lt;/p&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>I'm using webpack, so my <code>index.js</code> is basic:</p>
  <pre><code>import './index.css';
  import './components/my-component';
  </code></pre>
  <p>My main attempt so far is to mimic creat-react-app and add a file</p>
  <pre><code>import React from 'react';
  
  const MyComponent: React.FunctionComponent = (): JSX.Element =&gt; {
    return &lt;div&gt; Hello !!! &lt;/div&gt;;
  };
  export default MyComponent;
  </code></pre>
  <p>and change <code>index.html</code> body section like so:</p>
  <pre><code>  &lt;body&gt;
      &lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
    &lt;/body&gt;
  </code></pre>
  <p>and change <code>index.ts</code> to <code>index.tsx</code> like so:</p>
  <pre><code>import './index.css';
  
  import React from 'react';
  import ReactDOM from 'react-dom';
  
  import MyComponent from './components/my-component';
  
  ReactDOM.render(
    &lt;React.StrictMode&gt;
      &lt;MyComponent /&gt;
    &lt;/React.StrictMode&gt;,
    document.querySelector('#root'),
  );
  </code></pre>
  <p>It compiles okay but renders an empty page. The error I'm getting is:
  <code>TypeError: undefined is not an object (evaluating 'react_dom_1.default.render')</code>
  which specifically targets <code>&lt;React.StrictMode&gt;</code>. I'm using <code>&quot;react&quot;: &quot;^17.0.1&quot;</code></p>
  <p>I also see that it's not picking up my component for some reason
  <a href="https://i.stack.imgur.com/wFkEK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wFkEK.png" alt="code" /></a></p>
  <p>When I inspect the page I can see this source code:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
      &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;/chunks/app.js&quot;&gt;&lt;/script&gt;&lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Any ideas?</p>