make typescript compilation work

client/src/index.js

@@ -1,11 +0,0 @@
-import React from 'react'
-import { createRoot } from 'react-dom/client';
-import './index.css';
-import App from './App';
-
-self.$RefreshReg$ = () => {};
-self.$RefreshSig$ = () => () => {};
-
-const container = document.getElementById('root');
-const root = createRoot(container); // createRoot(container!) if you use TypeScript
-root.render(<App />);

client/src/index.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+const container = document.getElementById('root');
+const root = createRoot(container!);
+root.render(<App />);

tsconfig.json

@@ -6,6 +6,7 @@
     "target": "es5",
     "jsx": "react",
     "allowJs": true,
-    "moduleResolution": "node"
+    "moduleResolution": "node",
+    "jsx": "react",
   }
 }

webpack.config.js

@@ -17,7 +17,7 @@ module.exports = env => {
   global.$RefreshSig$ = () => () => {};
 
   return {
-    entry: ["./client/src/index.js"],
+    entry: ["./client/src/index.tsx"],
     mode: isDevelopment ? 'development' : 'production',
     module: {
       rules: [