Create-React-App with Typescript with PUG

1. Instruction.md

1. npx create-react-app cra-typescript-pug --template typescript --use-npm
2. npm install --save-dev react-app-rewired customize-cra
3. npm install --save-dev babel-plugin-transform-jsx-classname-components babel-plugin-transform-react-jsx babel-plugin-transform-react-pug eslint-plugin-react-pug webpack-preprocessor-pug-tsx
4. package.json:

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test"
  },
  ...
  "eslintConfig": {
    ...
    "plugins": [
      "react-pug"
      ...
    ],
    ...
  },

2. config-overrides.js

const {
  override,
  addBabelPlugins,
} = require("customize-cra");

function webpackOverride(config, env) {
  if (!config.plugins) {
      config.plugins = [];
  }

  // const { modules: { rules } } = config;
  config.module.rules = [
    {
      test: /\.(ts|tsx)$/,
      use: [
        'babel-loader',
        {
          loader: 'webpack-preprocessor-pug-tsx',
          options: {},
        },
      ],
    },
    ...config.module.rules
  ]

  config.plugins = [
    ...config.plugins
  ]

  return config;
}

module.exports = override(
  webpackOverride,
  ...addBabelPlugins(
    "transform-react-pug",
    "@babel/transform-react-jsx",
    [
      "transform-jsx-classname-components",
      {
        "objects": ["React"]
      }
    ],
  )
);

3. App.tsx

import React from 'react';
import logo from './logo.svg';
import './App.css';
import keep from './pug-hack';

keep(React, logo);

function App() {
  const onClick = () => alert('onClick');

  return pug`
    div(className='App' onClick=${onClick})
      header(className='App-header')
        img(src=${logo} className='App-logo' alt='logo')
        p
          | The Word is 
          code word1

        a(className='App-link' href='https://reactjs.org' target='_blank' rel='noopener noreferrer').
          Learn React
  `;
}

export default App;

4. pug-hack.ts

const keep = (...items: unknown[]) => {
  try {items.map(item => (item as Function)());} catch(e) {}
};
export default keep;

5. .eslintrc

{
  "parser": "babel-eslint",
  "plugins": [
    "react-pug"
  ]
}