question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

gulp-babel@8 babel@7 can not transform jsx to js

See original GitHub issue

Hello,I have some problem when I update babel and gulp-babel to the latest, I can`t transform jsx to js.

This is my gulpfile.js:

const gulp        = require('gulp');
const babel       = require('gulp-babel');
const sass        = require('gulp-sass');
const sourcemaps  = require('gulp-sourcemaps');
...
gulp.task('bable', function(){
  return gulp.src(['./src/**/*.js', './src/**/*.jsx'])
    .pipe(babel())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('dist'))
});
...
gulp.task('default', ['bable', ...]);

This is my package.json:

...
 "@babel/core": "^7.1.5",
    "@babel/plugin-proposal-export-default-from": "^7.0.0",
    "@babel/plugin-syntax-export-default-from": "^7.0.0",
    "@babel/plugin-transform-react-jsx": "^7.0.0",
    "@babel/preset-env": "^7.1.5",
    "@babel/preset-react": "^7.0.0",
    "gulp-babel": "^8.0.0",
    "babel-eslint": "^7.2.3",
    "babel-loader": "^8.0.4",
...

This is my .babelrc:

 {
	"presets": ["@babel/preset-env", "@babel/preset-react"],
	"plugins": [
		"@babel/plugin-syntax-export-default-from",
		"@babel/plugin-proposal-export-default-from",
		"@babel/plugin-transform-react-jsx"
	]
}

when I run gulp, I got this dist src

The jsx-type-file did not be compiled, I want to know what should I modify my code can get corret result. I would be very happy if someone can help me.

Thanks.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
lanyuechencommented, Nov 9, 2018

Oh, I have figure out what the problem it is. The *.jsx file use static property in the class, so the .babelrc file should config the plugins of @babel/plugin-proposal-class-properties, just like the below:

{
	"presets": ["@babel/preset-env", "@babel/preset-react"],
	"plugins": [
		"@babel/plugin-syntax-export-default-from",
		"@babel/plugin-proposal-export-default-from",
		["@babel/plugin-proposal-decorators", {"legacy": true}],
		"@babel/plugin-proposal-class-properties"
	]
}
1reaction
loganfsmythcommented, Nov 9, 2018

I don’t see anything obviously wrong with your code. Would you be able to make a small repository that recreates the issue?

Read more comments on GitHub >

github_iconTop Results From Across the Web

babel/plugin-transform-react-jsx
Automatic runtime is a feature added in v7.9.0 . With this runtime enabled, the functions that JSX compiles to will be imported automatically....
Read more >
How convert .jsx to .js with Gulp and Babel? - Stack Overflow
First you need to install these two packages: npm install gulp-babel babel-plugin-transform-react-jsx. then you can convert like this:
Read more >
Introducing the New JSX Transform – React Blog
Although React 17 doesn't contain new features, it will provide support for a new version of the JSX transform. In this post, we...
Read more >
@babel/plugin-transform-react-jsx - npm
Start using @babel/plugin-transform-react-jsx in your project by running `npm i @babel/plugin-transform-react-jsx`.
Read more >
React 17 introduces new JSX transform - Saeloun Blog
But, browsers do not understand this as JSX is not valid JavaScript code. This is where a transpiler like Babel comes into the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found