带有 pug.js 的 Ionic React Typescript，使用 tsx 而不是 jsx 时出现“未捕获的 ReferenceError：React 未定义”

Question

问题：react-app-rewired start 适用于 App.jsx（和 .js），但不适用于 App.tsx（和 .ts）

步骤

1. 我用ionic start my-app blank --type=react --capacitor 创建了一个样板应用程序
2. 在 package.json 上，我相应地替换并重新安装（删除 package.lock.json，npm i）

{
    "name": "my-app",
    "version": "0.0.1",
    "private": true,
    "scripts": {
-       "start": "ionic serve",
+       "start": "react-app-rewired start",
-       "build": "ionic build",
+       "build": "react-app-rewired build",
        "test": "react-scripts test"
    },
    "dependencies": {
        "@capacitor/android": "^2.4.3",
        "@capacitor/core": "2.4.3",
        "@ionic/react": "^5.0.7",
        "@ionic/react-router": "^5.0.7",
        "ionicons": "^5.0.0",
        "react": "^16.13.0",
        "react-dom": "^16.13.0",
        "react-router": "^5.1.2",
        "react-router-dom": "^5.1.2",
+       "babel-plugin-transform-react-pug": "^7.0.1",
+       "customize-cra": "^1.0.0",
+       "react-app-rewired": "^2.1.6",
    },
    "devDependencies": {
        "@capacitor/cli": "2.4.3",
        "@ionic/cli": "6.12.2",
        "@testing-library/jest-dom": "^4.2.4",
        "@testing-library/react": "^9.4.0",
        "@testing-library/user-event": "^8.0.3",
        "@types/jest": "^24.0.25",
        "@types/node": "^12.12.24",
        "@types/react": "^16.9.17",
        "@types/react-dom": "^16.9.4",
        "@types/react-router": "^5.1.4",
        "@types/react-router-dom": "^5.1.3",
        "react-scripts": "3.4.0",
        "typescript": "3.8.3"
    },
    "eslintConfig": {
        "extends": "react-app"
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
    "description": "An Ionic project"

1. 在项目的根文件夹中添加config-overrides.js文件

const { override, disableEsLint, addBabelPlugin } = require('customize-cra')

module.exports = override(
    disableEsLint(),
    addBabelPlugin('transform-react-pug'),
)

4. 将 App.tsx 替换为

import React from 'react'
import {
    IonApp,
    IonContent,
    IonHeader,
    IonTitle,
    IonToolbar,
} from '@ionic/react'

declare const pug: any
const App: React.FC = () => {
    return pug`
        IonApp
            IonHeader
                IonToolbar
                    IonTitle My App
            IonContent.ion-padding Add some content here…
    `
}
export default App

5. 开启tsconfig.json 设置"strict": false
6. 项目根文件夹中的npm start（或react-app-rewired start）

终端上没有错误（'编译成功！'），chrome 屏幕是空白的，在 chrome 控制台上：

Uncaught ReferenceError: React is not defined
    at App (main.chunk.js:33)
    ...

奇怪的是，如果我用 .jsx 或 .js 而不是 .tsx 或 .ts 更改应用程序扩展名，该应用程序可以正常工作

pug 设置也适用于设置 CRA 打字稿应用而不是 ionic start --type=react --capacitor 应用

编辑： 这是工作/不工作 repo 的 github https://github.com/calvindio/template-ionic-react-ts-pug

Answer 1

问题

看起来问题来自 tsc 删除了导致问题的未使用导入。

例如，这行 import React from 'react' 不会包含在编译代码中，因为您没有以 jsx 格式返回。

同样，像import { IonApp, ... } from '@ionic/react'; 这样的所有导入也不会包含在编译代码中。这就是webpack 无法正确映射React 导入的原因。

解决方案

据我了解，我还知道tsc 的任何选项仍会将未使用的导入保留在构建的代码中。如果您能找到该选项，那就太好了。

但现在，您可以使用 require 关键字来解决问题，该关键字可以保持导入：

App.tsx

const React = require('react');
const { IonApp, ... } = require('@ionic/react');

// ...