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

Question

Hey guys this question isn't gone through with this similar,

tried their solution but not worked for me.

Now my situation 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 [ I don't know this is file will be useful or not, just adding it maybe it'll helpful]


{
    "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"
  },

Error


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

IF you need some extra info to understand my doubt please ask, because I am completely new on react and typescript and gulp thoo

Does this answer your question? [Cannot use JSX unless the '--jsx' flag is provided](https://stackoverflow.com/questions/50432556/cannot-use-jsx-unless-the-jsx-flag-is-provided) — Michael Freidgeim, Feb 24 '23 at 07:52
@MichaelFreidgeim Yes it answered my question. and sorry for late reply. — Dinesh Patil, Feb 28 '23 at 06:22

score 12 · Accepted Answer · edited Aug 17 '22 at 17:51

12

I just added this to the tsconfig:

  "compilerOptions": {

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

hope it helps anyone, regards!

edited Aug 17 '22 at 17:51

Jonathan.Brink

23,757
20
73
115

answered May 03 '21 at 18:21

alexis600

136
1
3

There is no doubt that your answer is right, but it's not worked in my case. Thanks for answering – Dinesh Patil May 14 '21 at 11:16
tnsm! was very helpful after few days with real headache..... – Rachel Aug 08 '23 at 15:25

score 4 · Answer 2 · answered Oct 16 '20 at 11:07

I found the answer after a lot of suffering :)

and the solution is, rather than a passing whole tsConfig.js to the pipe of gulp task. I passed only important configuration in it. like, build task in gulfile

gulfile.js before

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 now


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

Thanks,

Thanks for this. I don't use Gulp, but I had the same issue and adding the "src" TS and TSX paths to TSCONFIG's "include" property fixed it. Another problem was that I had the paths starting with "./", i.e. "./src/**/*.tsx". I am adding this comment here in case anybody faces the same issue. My "include" property in TSCONFIG is now: `"include": ["src/**/*.tsx", "src/**/**/*.tsx", "src/**/*.ts", "src/**/**/*.ts", "jest.config.ts"]`. — Dimitris Damilos, May 18 '22 at 14:39

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

2 Answers2