Reactjs 除非'--jsx&x27；提供旗帜

我环顾了一下四周，想找到解决这个问题的办法。他们都建议在tsconfig.json文件中添加

“jsx”：“react”

。我已经做到了。另一个是添加

“include:[]”

，我也这样做了。但是，当我试图编辑

.tsx

文件时，仍然会出现错误。下面是我的tsconfig文件

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "allowJs": true,
        "checkJs": false,
        "jsx": "react",
        "outDir": "./build",
        "rootDir": "./lib",
        "removeComments": true,
        "noEmit": true,
        "pretty": true,
        "skipLibCheck": true,
        "strict": true,
        "moduleResolution": "node",
        "esModuleInterop": true
    },
    "include": [
        "./lib/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

任何建议都会有帮助。我正在使用Babel7编译所有带有env、react和typescript预设的代码。如果你们需要更多的文件来帮助调试，请告诉我

除非提供'--JSX'标志，否则无法使用JSX

---

重新启动IDE。有时tsconfig.json的更改不会立即被发现这个答案是关于VS代码和该IDE中持续存在的特定错误。（有人可能会觉得这很有用）

如果您正在使用Webpack或其他类似工具，那么即使您的tsconfig将jsx的编译器选项设置为React，也可能会出现此错误

有一个解决办法。问题是VS代码内置了tsc的自动检测功能

要消除编辑器中的错误，可以将其放入用户设置中：

{
    "typescript.tsc.autoDetect": "off"
}

请注意，您将不再获得tsc自动检测，但如果您主要使用Webpack之类的工具，或者自己使用标志处理命令，那么这并不是什么大问题

---

注意：仅当错误持续存在于VS代码中时才执行此操作。要确保此行为持续存在，请在配置tsconfig.json文件后重新加载windows并重新启动编辑器。

此链接有助于解决此问题：

请参阅以下章节： 修复错误TS17004:除非提供'--JSX'标志，否则无法使用JSX

下一个错误对我来说是新的，但它有一定的意义，所以我将--jsx标志添加到tsc并尝试tsc--jsx helloWorld.tsx，但看起来我遗漏了--jsx的一个参数

tsc—jsx helloWorld.tsx 消息TS6081:“--jsx”的参数必须为“保留”或“反应”。 在TypeScript 1.6的当前迭代中，似乎有两个选项--jsx，它们都是preserve或react

preserve将在输出中保留jsx。我认为这是为了让您可以使用像JSX这样的工具来实际提供翻译。 react将删除jsx语法并将其转换为纯javascript，因此TSX文件中的react.createElement（“div”，null）将变为react.createElement。 通过传递react选项，我们将在这里结束：

tsc--jsx react helloWorld.tsx tsx（11,14）：错误TS2607:JSX元素类不支持属性，因为它没有“props”属性 tsx（11,44）：错误TS2304:找不到名称“mountNode”。 接下来我将处理最后一个错误，因为最初我不理解上面的JSX错误

---

在我的例子中，重新启动IDE就是修复方法。重新启动后，弹出一个消息框，显示我没有安装任何typescript，是否要安装typescript 3.3？

---

我安装了它，现在它工作得很好。

我也遇到了同样的错误，我刚刚找到了解决方法。问题是有一个

jsconfig.json

文件，导致TypeScript编译器忽略了

tsconfig.json

文件

---

要确定是否存在相同的问题，请在IDE中（我使用的是VS代码），在编辑器中加载一个有错误的文件，然后打开命令面板并输入“TypeScript:转到项目配置”。如果打开了

jsconfig.json

，则删除该文件并重新启动IDE。如果这次它打开了

tsconfig.json

文件，那么您就成功了。

在我的例子中，我尝试了所有

tsconfig.json

、项目属性对话框、重新启动IDE、检查已安装的TypeScript版本等，但它仍然存在此错误。来了解使项目向项目文件添加条件属性的开发人员，例如，

TypeScriptJSXEmit

没有在所有配置中定义（这会混淆项目属性对话框）

以下是我的项目文件中的一段摘录，显示了这个问题：

...
  <PropertyGroup Condition="'$(Configuration)' == 'QA'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptJSXEmit>React</TypeScriptJSXEmit>
...

。。。
ES5
反应
...

即使在运行

npx-tsc--jsx-preserve

时，我也遇到了这个错误，因此明确指定了

--jsx

---

在我的例子中，这是由tsconfig中的

incremental:true

引起的。显然，在增量模式下，

tsc

可能会忽略

--jsx

设置，而使用以前版本中的信息（其中，

--jsx

仍处于禁用状态）。作为一种解决方案，我暂时停止了增量编译，重新编译并重新启用了它。可能删除构建工件也会起作用。

在我的例子中，问题是VSCode生成了一个空的

tsconfig.json

文件，当然，该文件没有任何作用

我从以下位置添加到

tsconfig.json

：

{
“编译器选项”：{
“outDir”：“../dist/”，
“源地图”：正确，
“noImplicitAny”：没错，
“模块”：“commonjs”，
“目标”：“es6”，
“jsx”：“反应”
}
}

---

…然后点击

save

，VSCode从那里获取它。

重新启动我的IDE没有帮助。重新启动TypeScript服务器确实解决了此问题

在我的情况下，上述任何一项都不起作用。 我的问题是tsconfig.json的位置不是项目根。 所以jest无法读取.jsx文件。 我只是将tsconfig.json符号链接到项目根目录就解决了这个问题。 也许有更好的解决办法。

---

如果您有，请告诉我。

我必须将我的整个应用程序添加到

include

中

因此，我的tsconfig.json如下所示：

{
    "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "es6",
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true,
    "jsx": "react",
    "allowJs": true
  },
  "include": ["./"]
}

---

对于正在阅读的人，请转到tsconfig.json并将该行从

react jsx

更改为

react

：

{
“编译器选项”：{
“jsx”：“反应”
}
}

---

额外好处：还可以尝试在vscode CMD+SHIFT+p中将IDE TS版本设置为最新版本（atm 4.2），并从中进行更改。

下面的错误是我得到的

> multi-step-form-typescript@0.1.0 start /home/ehsan/Documents/GitHub/multi-step-form-typescript
> react-scripts start

/home/ehsan/Documents/GitHub/multi-step-form-typescript/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239
      appTsConfig.compilerOptions[option] = value;
                                          ^

TypeError: Cannot assign to read only property 'jsx' of object '#<Object>'
    at verifyTypeScriptSetup (/home/ehsan/Documents/GitHub/multi-step-form-typescript/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239:43)
    at Object.<anonymous> (/home/ehsan/Documents/GitHub/multi-step-form-typescript/node_modules/react-scripts/scripts/start.js:31:1)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! multi-step-form-typescript@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the multi-step-form-typescript@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ehsan/.npm/_logs/2020-11-22T18_20_20_546Z-debug.log

  "include": [
    "./src/**/*.ts"
  ]

"include": [
    "./src/**/*.ts"
]