`babel-preset-react` not transforming jsx with gulp

609 Views Asked by At

No matter what I try, something like <div/> is not being transformed to React.createClass and the browser just obviously chokes on the first < in my code.

I'm using gulp like:

  return gulp.src(files)
     .pipe(babel({
        presets: [ "react", "es2015" ],
        plugins: [ "transform-react-jsx" ]          
      }))
     .pipe(gulp.dest(dest));

I've tried with and without transform-react-jsx because I believe the react preset should transform jsx as well?

This is my .babelrc, but it doesn't seem to make any difference, and I read somewhere that in some cases you need to delete it to work. Tried it, didn't help.

{
    "presets": [ "react", "es2015" ],
    "plugins": ["transform-react-jsx"]
}

in my package.json:

"babel": "^6.5.2",
"babel-cli": "^6.8.0",
"babel-plugin-transform-react-jsx": "^6.8.0",
"babel-preset-es2015": "~6.5.0",
"babel-preset-react": "^6.5.0",
"gulp-babel": "~6.1.2",
...

I've tried just about anything, but it just does not transform my code

1

There are 1 best solutions below

0
On

So apparently, there was a gulp-changed step in between that broke it. Removing that fixed it for me.

You'd think it "is able to detect whether files in the stream changed" like the docs say, but I guess this is not the case.