0

问题：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'),
)
  1. 将 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
  1. 现场tsconfig.json_"strict": false
  2. npm start（或react-app-rewired start）在项目根文件夹中

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

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

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

设置 CRA 打字稿应用程序而不是ionic start --type=react --capacitor应用程序时，哈巴狗设置也适用

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

4

1 回答 1

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');

// ...
于 2020-11-30T05:07:14.207 回答