Change script type to “text/babel” using requireJS

雨燕双飞 提交于 2021-01-27 06:32:49

问题


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]


回答1:


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. ;)



来源:https://stackoverflow.com/questions/35244020/change-script-type-to-text-babel-using-requirejs

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!