tsconfig tweaks

src/pages/404.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react'
 import { Link, PageProps } from 'gatsby'
 import Page from '../components/templates/Page'
-import * as styles from './404.module.css'
+import { hal9000, wrapper, title, text } from './404.module.css'
 
 const page = {
   frontmatter: {
@@ -15,11 +15,11 @@ const NotFound = (props: PageProps): ReactElement => (
     post={page}
     pathname={props.location.pathname}
   >
-    <div className={styles.hal9000} />
+    <div className={hal9000} />
 
-    <div className={styles.wrapper}>
+    <div className={wrapper}>
-      <h1 className={styles.title}>{"I'm sorry Dave"}</h1>{' '}
+      <h1 className={title}>{"I'm sorry Dave"}</h1>{' '}
-      <p className={styles.text}>{"I'm afraid I can't do that"}</p>
+      <p className={text}>{"I'm afraid I can't do that"}</p>
       <Link to={'/'}>Back to homepage</Link>
     </div>
   </Page>

src/pages/tags.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement } from 'react'
 import { graphql, PageProps } from 'gatsby'
 import Page from '../components/templates/Page'
 import Tag from '../components/atoms/Tag'
-import * as styles from './tags.module.css'
+import { tags } from './tags.module.css'
 
 const page = {
   frontmatter: {
@@ -28,7 +28,7 @@ const TagsPage = (props: TagsPageProps): ReactElement => (
     post={page}
     pathname={props.location.pathname}
   >
-    <ul className={styles.tags}>
+    <ul className={tags}>
       {props.data.allMarkdownRemark.group
         .sort((a, b) => b.totalCount - a.totalCount)
         .map((tag: Tag) => (

src/pages/thanks.tsx

@@ -1,6 +1,5 @@
 import React, { ReactElement } from 'react'
 import loadable from '@loadable/component'
-import shortid from 'shortid'
 import { Helmet } from 'react-helmet'
 import { Web3ReactProvider } from '@web3-react/core'
 import { Author } from '../@types/Site'
@@ -8,21 +7,29 @@ import { useSiteMetadata } from '../hooks/use-site-metadata'
 import { getLibrary } from '../hooks/use-web3'
 import Qr from '../components/atoms/Qr'
 import Icon from '../components/atoms/Icon'
-import * as styles from './thanks.module.css'
+import {
+  thanks,
+  title,
+  web3,
+  loading,
+  coins as styleCoins,
+  coin,
+  buttonBack
+} from './thanks.module.css'
 
 const LazyWeb3Donation = loadable(
   () => import('../components/molecules/Web3Donation')
 )
 
 const Coin = ({ address, author }: { address: string; author: Author }) => (
-  <div className={styles.coin}>
+  <div className={coin}>
     <Qr title={address} address={(author as any)[address]} />
   </div>
 )
 
 const BackButton = () => (
   <button
-    className={`link ${styles.buttonBack}`}
+    className={`link ${buttonBack}`}
     onClick={() => window.history.back()}
   >
     <Icon name="ChevronLeft" /> Go Back
@@ -42,13 +49,13 @@ export default function Thanks(): ReactElement {
         <meta name="robots" content="noindex,nofollow" />
       </Helmet>
 
-      <article className={styles.thanks}>
+      <article className={thanks}>
         <BackButton />
         <header>
-          <h1 className={styles.title}>Say Thanks</h1>
+          <h1 className={title}>Say Thanks</h1>
         </header>
 
-        <div className={styles.web3}>
+        <div className={web3}>
           <header>
             <h4>Web3 Wallet</h4>
             <p>Send Ether with MetaMask or Brave.</p>
@@ -56,20 +63,20 @@ export default function Thanks(): ReactElement {
 
           <Web3ReactProvider getLibrary={getLibrary}>
             <LazyWeb3Donation
-              fallback={<div className={styles.loading}>Loading...</div>}
+              fallback={<div className={loading}>Loading...</div>}
               address={author.ether}
             />
           </Web3ReactProvider>
         </div>
 
-        <div className={styles.coins}>
+        <div className={styleCoins}>
           <header>
             <h4>Any other wallets</h4>
             <p>Send Bitcoin or Ether from any wallet.</p>
           </header>
 
           {coins.map((address: string) => (
-            <Coin key={shortid.generate()} address={address} author={author} />
+            <Coin key={address} address={address} author={author} />
           ))}
         </div>
       </article>

tsconfig.json

@@ -1,16 +1,17 @@
 {
   "compilerOptions": {
     "outDir": "./dist/",
-    "target": "esnext",
+    "target": "es5",
-    "module": "commonjs",
+    "lib": ["dom", "dom.iterable", "esnext"],
-    "lib": ["dom", "esnext"],
     "allowJs": true,
-    "resolveJsonModule": true,
+    "skipLibCheck": true,
-    "jsx": "react",
+    "noEmit": true,
     "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
+    "module": "esnext",
-    "sourceMap": true,
+    "moduleResolution": "node",
-    "noImplicitAny": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
     "plugins": [{ "name": "typescript-plugin-css-modules" }]
   },
   "exclude": ["node_modules", "public", ".cache", "*.js"],