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

Posted 2023-02-21

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

【英文标题】：Getting error TS17004: Cannot use JSX unless the '--jsx' flag is provided

【发布时间】：2021-01-29 01:01:08

【问题描述】：

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

Build: Cannot use JSX unless the '--jsx' flag is provided Cannot use JSX unless the '--jsx' flag is provided

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

现在我的情况 tsconfig.js

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

gulpfile.js

const gulp = require('gulp');
const del = require('del');
const gulpTsc = require('gulp-tsc');
const tsConfig = require('./tsconfig.json');
var typescript = require('gulp-typescript');

gulp.task('clean', (done) => 
  const deletedPaths = del.sync(['./dist']);
  console.log('Deleted folders:\n', deletedPaths);
  done();
);

gulp.task('prebuild', (done) => 
  clean(['./dist']);
  done();
);

gulp.task('copyJs', (done) => 
  gulp
  .src(['src/**/*.js​', 'src/**/**/*.js'])
  .pipe(gulp.dest('./dist'));
  done();
);
gulp.task('build',gulp.series('copyJs',function(done) 
  gulp.src(['src/**/*.tsx', 'src/**/**/*.tsx', 'src/**/*.ts', 'src/**/**/*.ts'])
    .pipe(typescript(tsConfig)).pipe(gulp.dest('./dist'));
  done();
));

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

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

package.json

"scripts": 
    "build": "npm run tsc --jsx && gulp clean && gulp build",
    "tsc": "tsc"
  ,

错误

src\components\canvas\Canvas.tsx(159,4): error TS17004: Cannot use JSX unless the '--jsx' flag is provided.
src\components\canvas\Canvas.tsx(165,5): error TS17004: Cannot use JSX unless the '--jsx' flag is provided.
src\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. 

Canvas.tsx

index.tsx

如果您需要一些额外的信息来理解我的疑问，请询问，因为我对 react 和 typescript 以及 gulp thoo 完全陌生

【参考方案1】：

我刚刚在 tsconfig 中添加了这个：

“编译器选项”：

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

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

【讨论】：

毫无疑问，您的答案是正确的，但在我的情况下不起作用。感谢您的回答

【参考方案2】：

历尽千辛万苦终于找到了答案:)

解决方案是，而不是将整个 tsConfig.js 传递给 gulp 任务的管道。 我只通过了重要的配置。 比如，在 gulfile

中构建任务

gulfile.js 之前

gulp.task('build',gulp.series('copyJs',function(done) 
  gulp.src(['src/**/*.tsx', 'src/**/**/*.tsx', 'src/**/*.ts', 'src/**/**/*.ts'])
    .pipe(typescript(tsConfig)).pipe(gulp.dest('./dist'));
  done();
));

gulfile.json 现在

gulp.task('build', gulp.series('copyJs', function(done) 
  gulp.src(['src/**/*.tsx', 'src/**/*.js​', 'src/**/**/*.js'])
    .pipe(typescript(
      noImplicitAny: true,
      esModuleInterop: true,
      jsx: "react",
      allowJs: true
  )).pipe(gulp.dest('./dist'));
  done();
));

谢谢，