Dave C Dave C - 1 month ago 14
React JSX Question

Change script type to "text/babel" using requireJS

I am using requireJS to load React components but I was getting the error "Uncaught SyntaxError: Unexpected token <" because the script type for the file is "text/javascript" instead of "text/babel". To solve this I have tried to set the scriptType as explained by requireJS docs and explained in this question, but I'm unable to get it working or find a good example of how to make this work.

requireConfig.js:

requirejs.config({
baseUrl: 'scripts/',
paths:
{
jquery: 'jquery-1.9.0',
react: 'libs/build/react',
reactdom: 'libs/build/react-dom',
browser: '//cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min',
inputWindow: 'inputWindow/inputWindow'
},
scriptType: {
'inputWindow': "text/babel"
}
});

define(function (require) {
var InputWindow = require('inputWindow');

InputWindow.initialize();


});


inputWindow.js:

define(function(require){

var React = require('react');
var ReactDOM = require('reactdom');

var InputWindow = React.createClass({

render: function(){
return(<div>
{this.props.message}
</div>)
}

});

function initialize(){
ReactDOM.render(<InputWindow message="Hello World!"/>, document.getElementById('inputWindowDiv'))
}

return {
initialize: initialize,
}
})


When I configure requireConfig.js with the section

scriptType:{
'inputWindow':'text/babel'
}


then the file inputWindow.js is loaded into index.html with the tag

type="[Object Object]"


until requireJS times out.

screen capture of inputWindow.js loaded with type=[Object Object]

Answer

Instead of

scriptType: {
    'inputWindow': "text/babel"
}

try

scriptType: 'text/babel'

It should work. Right now you're trying to stringify an object so no wonder it doesn't work. ;)