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

Question

嘿伙计们，这个问题还没有解决这个问题，

Build: 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.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.js现在开始


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

谢谢，

Answer 2

我刚刚将其添加到 tsconfig:

“编译器选项”：{

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

希望对大家有帮助，问好！

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

Getting error TS17004: Cannot use JSX unless the '--jsx' flag is provided

reactjs

typescript

gulp

babeljs

tsconfig