首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >反应/类型记录-语义错误TS2304:找不到名称‘片段’

反应/类型记录-语义错误TS2304:找不到名称‘片段’
EN

Stack Overflow用户
提问于 2022-06-16 18:47:22
回答 1查看 550关注 0票数 3

我有一个packages文件夹,在该文件夹中,我试图通过运行yarn build构建模块,但是我得到了以下错误:

代码语言:javascript
运行
复制
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

代码语言:javascript
运行
复制
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

代码语言:javascript
运行
复制
{
  "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

代码语言:javascript
运行
复制
{
  "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

代码语言:javascript
运行
复制
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "rootDir": "./src",
    "target": "esnext",
    "module": "esnext",
    "jsx": "react",
    "jsxFactory": ""
  }
}

为什么我会得到这个打字错误?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-09-14 14:35:43

我相信这与本期microbundle存储库有关:

当设置TypeScript选项时,jsxFactory无法解析片段。这是TypeScript项目多年来的一个已知问题。但问题是,即使将其设置为默认值,它仍然会中断。

可能的解决办法是:

  1. 显式地将--jsx React.createElement标志添加到package.json中的构建脚本中
代码语言:javascript
运行
复制
"build": "rimraf --no-glob ./dist && microbundle --jsx React.createElement --tsconfig ./tsconfig.build.json -f cjs,es --no-compress",
  1. 按照注释中的建议,从"jsxFactory": ""中删除tsconfig.build.json
代码语言:javascript
运行
复制
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "rootDir": "./src",
    "target": "esnext",
    "module": "esnext",
    "jsx": "react",
    // "jsxFactory": "" <- remove this
  }
}

来自microbundle 源代码

代码语言:javascript
运行
复制
--jsx              A custom JSX pragma like React.createElement (default: h)
--jsxFragment      A custom JSX fragment pragma like React.Fragment (default: Fragment)

那能解决你的问题吗?如果没有,很乐意删除这个答案。

干杯

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/72650593

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档