[英]React/Typescript - semantic error TS2304: Cannot find name 'Fragment'
I have a packages
folder where I am trying to build modules by running yarn build
, but I get following error:我有一个
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'.
This is the file map-loader.tsx
:这是文件
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'[],
}
This is the package.json
:这是
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"
}
}
This is the tsconfig.json
:这是
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"]
}
And this is the tsconfig.build.json
:这是
tsconfig.build.json
:
{
"extends": "./tsconfig.json",
"compilerOptions": {
"rootDir": "./src",
"target": "esnext",
"module": "esnext",
"jsx": "react",
"jsxFactory": ""
}
}
Why do I get this typescript error?为什么我会收到此 typescript 错误?
I believe that's related to this issue from microbundle
Github repository:我相信这与
microbundle
捆绑 Github 存储库中的这个问题有关:
TypeScript is unable to resolve Fragments when the jsxFactory option is set.
当设置了 jsxFactory 选项时,TypeScript 无法解析 Fragments。 This is a known issue for years at the TypeScript project.
这是 TypeScript 项目多年来的一个已知问题。 But the problem is that it will still break, even when you set it to the default value
但问题是它仍然会中断,即使您将其设置为默认值
Possible workarounds are:可能的解决方法是:
--jsx React.createElement
flag to the build script in 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",
"jsxFactory": ""
from your tsconfig.build.json
as suggested in the commentstsconfig.build.json
中删除"jsxFactory": ""
{
"extends": "./tsconfig.json",
"compilerOptions": {
"rootDir": "./src",
"target": "esnext",
"module": "esnext",
"jsx": "react",
// "jsxFactory": "" <- remove this
}
}
From microbundle
source code :来自
microbundle
源代码:
--jsx A custom JSX pragma like React.createElement (default: h)
--jsxFragment A custom JSX fragment pragma like React.Fragment (default: Fragment)
Let me know if that fixes your issue?让我知道这是否能解决您的问题? Happy to delete this answer if it doesn't.
如果没有,很高兴删除此答案。
Cheers干杯
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.