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

Question

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

1. Build: Cannot use JSX unless the '--jsx' flag is provided
2. 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 完全陌生

Answer 1

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

“编译器选项”：{

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

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

Answer 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();
}));

谢谢，