React/Typescript - 語義錯誤 TS2304：找不到名稱“片段”

Question

賞金將在 6 天后到期。 此問題的答案有資格獲得+350聲望賞金。 Ludwig正在從有信譽的來源尋找答案。

我有一個packages文件夾，我試圖通過運行yarn build來構建模塊，但出現以下錯誤：

rpt2: options error TS5052: Option 'jsxFragmentFactory' cannot be specified without specifying option 'jsxFactory'.
(rpt2 plugin) Error: /Users/myUser/Desktop/Projects/my-frontend/packages/molecule-components/src/map-search/map-loader.tsx(9,12): semantic error TS2304: Cannot find name 'Fragment'.
Error: /Users/myUser/Desktop/Projects/my-frontend/packages/molecule-components/src/map-search/map-loader.tsx(9,12): semantic error TS2304: Cannot find name 'Fragment'.

這是文件map-loader.tsx ：

import React, { ReactElement, ReactNode } from 'react'
import { useJsApiLoader } from '@react-google-maps/api'
import { isTechnologyDomain, isProdDomain, isQaDomain } from './app-env'

export function MapLoader(props: { fallback?: ReactNode; children: ReactNode }): ReactElement | null {
  const { isLoaded } = useJsApiLoader(mapScriptOptions)

  if (!isLoaded && props.fallback) {
    return <>{props.fallback}</>
  }

  if (!isLoaded) {
    return null
  }

  return <>{props.children}</>
}

function googleApiKey() {
  if (isTechnologyDomain()) {
    return 'randomKey1'
  } else if (isProdDomain()) {
    return 'randomKey2'
  } else if (isQaDomain()) {
    return 'randomKey3'
  } else {
    return 'randomKey4'
  }
}

const mapScriptOptions = {
  id: 'script-loader',
  channel: '55475__frontend',
  googleMapsApiKey: googleApiKey(),
  libraries: ['places'] as 'places'[],
}

這是package.json ：

{
  "name": "@myproject/molecule-components",
  "private": true,
  "version": "1.0.0",
  "sideEffects": false,
  "source": "src/index.ts",
  "main": "dist/index.js",
  "module": "dist/index.esm.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "rimraf --no-glob ./dist && microbundle --tsconfig ./tsconfig.build.json  -f cjs,es --no-compress",
    "build-master": "yarn build",
    "lint": "run-p lint:*",
    "typescript": "tsc",
    "lint:eslint": "eslint --max-warnings 0 src",
    "lint:prettier": "prettier --check src",
    "clean": "rimraf ./dist",
    "format": "prettier --write src"
  },
  "dependencies": {
    "@myproject/entity-types": "*",
    "@myproject/ui-components": "*",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@babel/plugin-proposal-class-properties": "^7.16.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.17.3",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-transform-react-jsx-source": "^7.18.6",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.0",
    "@glow/eslint-config": "*",
    "@ladle/react": "^2.4.2",
    "@react-google-maps/api": "^2.7.0",
    "@types/react": "^17.0.17",
    "@types/react-dom": "^17.0.17",
    "@typescript-eslint/eslint-plugin": "^5.33.0",
    "@typescript-eslint/parser": "^5.36.1",
    "babel-plugin-dynamic-import-node": "^2.3.3",
    "classnames": "^2.3.1",
    "eslint": "^8.21.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-import-resolver-typescript": "^3.4.0",
    "microbundle": "0.15.0",
    "tslib": "^2.3.1",
    "typescript": "^4.7.4"
  }
}

這是tsconfig.json ：

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./dist/", // path to output directory
    "baseUrl": "./src",
    "target": "esnext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "ESNext",
    "allowJs": false,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "importHelpers": true,
    "jsx": "react",
    "noEmit": false,
    "composite": true,
    "incremental": true
  },
  "exclude": ["**/node_modules", "**/.*/", "dist", "build"],
  "include": ["src/**/*.ts", "src/**/*.tsx"]
}

這是tsconfig.build.json ：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "rootDir": "./src",
    "target": "esnext",
    "module": "esnext",
    "jsx": "react",
    "jsxFactory": ""
  }
}

為什么我會收到此 typescript 錯誤？

Answer 1

我相信這與microbundle捆綁 Github 存儲庫中的這個問題有關：

當設置了 jsxFactory 選項時，TypeScript 無法解析 Fragments。 這是 TypeScript 項目多年來的一個已知問題。 但問題是它仍然會中斷，即使您將其設置為默認值

可能的解決方法是：

1. 在 package.json 的構建腳本中顯式添加--jsx React.createElement package.json

"build": "rimraf --no-glob ./dist && microbundle --jsx React.createElement --tsconfig ./tsconfig.build.json -f cjs,es --no-compress",

2. 按照評論中的建議，從您的tsconfig.build.json中刪除"jsxFactory": ""

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "rootDir": "./src",
    "target": "esnext",
    "module": "esnext",
    "jsx": "react",
    // "jsxFactory": "" <- remove this
  }
}

來自microbundle 源代碼：

--jsx              A custom JSX pragma like React.createElement (default: h)
--jsxFragment      A custom JSX fragment pragma like React.Fragment (default: Fragment)

讓我知道這是否能解決您的問題？ 如果沒有，很高興刪除此答案。

干杯