🔧 Enable ES module interop

.gitignore

@@ -1,3 +1,4 @@
+.DS_Store
 dist/
 node_modules/
 dev/

src/ts/Message.tsx

@@ -1,14 +1,10 @@
-import * as React from "react";
+import React from "react";
 import styled from "styled-components";
 
 const MessageStyled = styled.div`
   text-transform: uppercase;
 `;
 
-const MessageComponent = () => (
-  <MessageStyled>
-    Hello World of TypeScript!
-  </MessageStyled>
-);
+const MessageComponent = () => <MessageStyled>Hello World of TypeScript!</MessageStyled>;
 
 export default MessageComponent;

src/ts/__tests__/Message.spec.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import "@testing-library/jest-dom";
 import { render } from "@testing-library/react";
 import Message from "../Message";

src/ts/index.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
-import * as ReactDOM from "react-dom";
+import React from "react";
+import ReactDOM from "react-dom";
 import { createGlobalStyle } from "styled-components";
 import { reset } from "styled-reset";
 
@@ -22,13 +22,13 @@ const GlobalStyle = createGlobalStyle`
     font-size: 2em;
     text-align: center;
   }
-`
+`;
 
 const App = () => (
   <>
     <GlobalStyle />
     <Message />
   </>
-)
+);
 
 ReactDOM.render(<App />, document.getElementById("app"));

tsconfig.json

@@ -2,23 +2,13 @@
   "compilerOptions": {
     "noImplicitAny": true,
     "module": "commonjs",
+    "esModuleInterop": true,
     "jsx": "react",
     "sourceMap": true,
     "target": "es5",
-    "types": [
-      "node",
-      "jest"
-    ],
-    "baseUrl": ".",
+    "types": ["node", "jest"],
+    "baseUrl": "."
   },
-  "exclude": [
-    "node_modules",
-    "src/**/*.spec.ts",
-    "src/**/*.spec.tsx"
-  ],
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "webpack.config.ts"
-  ]
+  "exclude": ["node_modules", "src/**/*.spec.ts", "src/**/*.spec.tsx"],
+  "include": ["src/**/*.ts", "src/**/*.tsx", "webpack.config.ts"]
 }

webpack.config.dll.ts

@@ -12,7 +12,8 @@ import { Configuration } from "webpack";
 import devDLLConfig from "./webpack/development.dll";
 import prodDLLConfig from "./webpack/production.dll";
 
-const config = (_: any, args: Configuration): Configuration => { /* eslint-disable-line */
+const config = (_: any, args: Configuration): Configuration => {
+  /* eslint-disable-line */
   /**
    * The common WebPack configuration no matter what environment it is run on
    */
@@ -23,11 +24,13 @@ const config = (_: any, args: Configuration): Configuration => { /* eslint-disab
     },
     mode: args.mode,
     module: {
-      rules: [{
-        exclude: /node_modules/,
-        test: /\.ts?$/,
-        use: "ts-loader",
-      }],
+      rules: [
+        {
+          exclude: /node_modules/,
+          test: /\.ts?$/,
+          use: "ts-loader",
+        },
+      ],
     },
     resolve: {
       extensions: [".tsx", ".ts", ".js", ".sass", ".css"],

webpack/development.ts

@@ -1,5 +1,5 @@
-import * as HTMLWebpackPlugin from "html-webpack-plugin";
-import * as HTMLWebpackTagsPlugin from "html-webpack-tags-plugin";
+import HTMLWebpackPlugin from "html-webpack-plugin";
+import HTMLWebpackTagsPlugin from "html-webpack-tags-plugin";
 import { join, resolve } from "path";
 import {
   Configuration,

webpack/production.dll.ts

@@ -1,5 +1,5 @@
 import { CleanWebpackPlugin } from "clean-webpack-plugin";
-import * as CompressionWebpackPlugin from "compression-webpack-plugin";
+import CompressionWebpackPlugin from "compression-webpack-plugin";
 import { join } from "path";
 import { Configuration, DllPlugin } from "webpack";
 

webpack/production.ts

@@ -1,7 +1,7 @@
 import { CleanWebpackPlugin } from "clean-webpack-plugin";
-import * as CompressionWebpackPlugin from "compression-webpack-plugin";
-import * as HTMLWebpackPlugin from "html-webpack-plugin";
-import * as HTMLWebpackTagsPlugin from "html-webpack-tags-plugin";
+import CompressionWebpackPlugin from "compression-webpack-plugin";
+import HTMLWebpackPlugin from "html-webpack-plugin";
+import HTMLWebpackTagsPlugin from "html-webpack-tags-plugin";
 import { join, resolve } from "path";
 import { Configuration, DllReferencePlugin } from "webpack";