出现错误 TS17004：除非提供“--jsx”标志，否则无法使用 JSX

Question

嘿伙计们，这个问题还没有通过类似的解决，

\n

\n
1. 构建：除非提供“--jsx”标志，否则无法使用 JSX
\n
2. 除非提供“--jsx”标志，否则无法使用 JSX
\n

\n

尝试了他们的解决方案，但对我不起作用。

\n

现在我的情况\n tsconfig.js

\n

{\n    "compilerOptions": {\n        "noUnusedLocals": false,\n        "noUnusedParameters": false,\n        "noImplicitReturns": false,\n        "noImplicitAny": false,\n        "skipLibCheck": false,\n        "strict": false,\n        "strictNullChecks": false,\n        "allowSyntheticDefaultImports": true,\n        "esModuleInterop": true,\n        "resolveJsonModule": true,\n        "experimentalDecorators": true,\n        "emitDecoratorMetadata": true,\n        "declaration": true,\n        "jsx": "react",\n        "module": "commonjs",\n        "moduleResolution": "node",\n        "target": "es6",\n        "outDir": "./dist",\n        "lib": [\n            "dom",\n            "esnext"\n        ]\n    },\n    "esModuleInterop": true,\n    "include": [\n        "src/components/canvas/index.tsx",\n        "src/components/canvas/Canvas.tsx",\n        "src/components/canvas/global.d.ts"\n    ],\n    "exclude": [\n        "node_modules",\n        "dist",\n        "lib"\n    ]\n}\n\n

\n

gulpfile.js

\n

\nconst gulp = require(\'gulp\');\nconst del = require(\'del\');\nconst gulpTsc = require(\'gulp-tsc\');\nconst tsConfig = require(\'./tsconfig.json\');\nvar typescript = require(\'gulp-typescript\');\n\ngulp.task(\'clean\', (done) => {\n  const deletedPaths = del.sync([\'./dist\']);\n  console.log(\'Deleted folders:\\n\', deletedPaths);\n  done();\n});\n\ngulp.task(\'prebuild\', (done) => {\n  clean([\'./dist\']);\n  done();\n});\n\ngulp.task(\'copyJs\', (done) => {\n  gulp\n  .src([\'src/**/*.js\xe2\x80\x8b\', \'src/**/**/*.js\'])\n  .pipe(gulp.dest(\'./dist\'));\n  done();\n});\ngulp.task(\'build\',gulp.series(\'copyJs\',function(done) {\n  gulp.src([\'src/**/*.tsx\', \'src/**/**/*.tsx\', \'src/**/*.ts\', \'src/**/**/*.ts\'])\n    .pipe(typescript(tsConfig)).pipe(gulp.dest(\'./dist\'));\n  done();\n}));\n\n

\n

.babelrc [我不知道这个文件是否有用，只是添加它也许会有帮助]

\n

\n{\n    "presets": [\n        "@babel/preset-react",\n        "@babel/preset-typescript",\n        "@babel/preset-flow",\n        "@babel/preset-env"\n    ],\n    "plugins": ["@babel/plugin-transform-runtime",\n        "@babel/plugin-syntax-dynamic-import",\n        ["@babel/plugin-proposal-decorators", { "legacy": true }],\n        "@babel/plugin-syntax-async-generators",\n        ["@babel/plugin-proposal-class-properties", { "loose": false }],\n        "@babel/plugin-proposal-object-rest-spread",\n        "react-hot-loader/babel",\n        ["import", { "libraryName": "antd", "style": true }]]\n}\n\n

\n

包.json

\n

\n"scripts": {\n    "build": "npm run tsc --jsx && gulp clean && gulp build",\n    "tsc": "tsc"\n  },\n\n

\n

错误

\n

\nsrc\\components\\canvas\\Canvas.tsx(159,4): error TS17004: Cannot use JSX unless the \'--jsx\' flag is provided.\nsrc\\components\\canvas\\Canvas.tsx(165,5): error TS17004: Cannot use JSX unless the \'--jsx\' flag is provided.\nsrc\\components\\canvas\\index.tsx(1,35): error TS6142: Module \'./Canvas\' was resolved to \'C:/Users/dinesh/Redpen/Redpen-Canvas-1/src/components/canvas/Canvas.tsx\', but \'--jsx\' is not set. \n\n

\n

画布.tsx

\n

\n

索引.tsx

\n

\n

如果您需要一些额外的信息来理解我的疑问，请询问，因为我对 React 和 TypeScript 来说是全新的，并且 gulp thoo

\n

Answer 1

我刚刚将其添加到 tsconfig 中：

  "compilerOptions": {

    "jsx": "react-jsx", // this line

希望它可以帮助任何人，问候！