Specify gulp-inject Script Type

Question

I am using JSX with React. Is it possible to specify the type of the injected script in order to use the in-browser JSX transformer while working in dev mode?

<!-- inject:js -->
<script type="text/jsx" src="js/components/Component.js"></script>
<!-- endinject -->

Answer 1

gulp-inject considers JSX a different type than JavaScript. If you change the file suffix to .jsx and use the start tag inject:jsx instead of inject:js, the output contains the type="text/jsx" attribute.

Another option (if you need to keep the .js suffix) is to override the default transform function:

var inject = require('gulp-inject');

inject.transform.html.js = function (path) {
  return '<script type="text/jsx" src="'+path+'"></script>';
};