Make Typescript work out of the box

package.json

@@ -17,6 +17,7 @@
     "@types/chrome": "0.0.132",
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.1",
+    "@types/webpack-env": "^1.16.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-hot-loader": "^4.13.0",

src/pages/Popup/Popup.jsx → src/pages/Popup/Popup.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import logo from '../../assets/img/logo.svg';
-import Greetings from '../../containers/Greetings/Greetings';
-import './Popup.css';
+import styles from './Popup.module.scss';
 
 const Popup = () => {
   return (

src/types.d.ts

@@ -0,0 +1,38 @@
+declare module '*.jpg' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.jpeg' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.png' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.gif' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.svg' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.module.css' {
+  const value: { [key: string]: string };
+  export default value;
+}
+
+declare module '*.module.scss' {
+  const value: { [key: string]: string };
+  export default value;
+}
+declare module '*.module.sass' {
+  const value: { [key: string]: string };
+  export default value;
+}

webpack.config.js

@@ -36,13 +36,13 @@ if (fileSystem.existsSync(secretsPath)) {
 var options = {
   mode: process.env.NODE_ENV || 'development',
   entry: {
-    newtab: path.join(__dirname, 'src', 'pages', 'Newtab', 'index.jsx'),
-    options: path.join(__dirname, 'src', 'pages', 'Options', 'index.jsx'),
-    popup: path.join(__dirname, 'src', 'pages', 'Popup', 'index.jsx'),
-    background: path.join(__dirname, 'src', 'pages', 'Background', 'index.js'),
-    contentScript: path.join(__dirname, 'src', 'pages', 'Content', 'index.js'),
-    devtools: path.join(__dirname, 'src', 'pages', 'Devtools', 'index.js'),
-    panel: path.join(__dirname, 'src', 'pages', 'Panel', 'index.jsx'),
+    newtab: path.join(__dirname, 'src', 'pages', 'Newtab'),
+    options: path.join(__dirname, 'src', 'pages', 'Options'),
+    popup: path.join(__dirname, 'src', 'pages', 'Popup'),
+    background: path.join(__dirname, 'src', 'pages', 'Background'),
+    contentScript: path.join(__dirname, 'src', 'pages', 'Content'),
+    devtools: path.join(__dirname, 'src', 'pages', 'Devtools'),
+    panel: path.join(__dirname, 'src', 'pages', 'Panel'),
   },
   chromeExtensionBoilerplate: {
     notHotReload: ['contentScript', 'devtools'],