requirejs - Requiring modules gives module not loaded error -


i trying write simple hello world app in react.js using component based approach. using requie.js. have 4 files in same folder namely index.html, index.js,world.js , require.js. having script tag in index.html load index.js. loading world.js via require.js using module.exports, result in error. here code
index.html 

<head> <script src="https://fb.me/react-0.13.3.js"></script> <!-- in-browser jsx transformer, remove when pre-compiling jsx. --> <script src="https://fb.me/jsxtransformer-0.13.3.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script data-main="index.js" src="require.js"></script>  </script>   </head>  <body>    <script type="text/jsx" src="index.js"></script> </body>


index.js

var world = require('./world');  var hello = react.createclass({   render:function(){     return (<div>         <div>hello,</div>         <world/>       </div>)    }  })  var element = react.createelement(hello);  react.render(element,document.body);

world.js

module.exports = react.createclass({   render: function(){     return (<div>world!</div)   }  })

i intending show hello, world. i'm getting following errors

uncaught syntaxerror: unexpected token < fbcdn-dragon-a.akamaihd.net/hphotos-ak-xtf1/t39.3284-6/11057100_835863049837306_1087123501_n.js:314 using in-browser jsx transformer. sure precompile jsx production - http://facebook.github.io/react/docs/tooling-integration.html#jsx require.js:8 uncaught error: module name "world" has not been loaded yet context: _. use require([]) http://requirejs.org/docs/errors.html#notloaded :8000/index.js:5 uncaught syntaxerror: unexpected token <

there @ least 3 issues here. first, not using correct require syntax asynchronous loading. index.js should be:

define(['world'], function(world) {      var hello = react.createclass({         render:function(){             return (<div>                     <div>hello,</div>                     <world/>                     </div>)          }      })      var element = react.createelement(hello);      react.render(element,document.body); });

second, since index.js , world.js jsx files, requirejs needs plugin tell that. like:

https://github.com/philix/jsx-requirejs-plugin

finally, since loading index.js via requirejs, don't need:

<script type="text/jsx" src="index.js"></script>

Comments

Post a Comment

Popular posts from this blog

searchKeyword not working in AngularJS filter -

i writing app using angularjs on front end. want search through table word/field; 1 search box everything. according article here: http://hello-angularjs.appspot.com/searchtable can use filter: searchkeyword this. this code, , not working expected. <label>search: <input ng-model="searchkeyword"></label> <table ng-repeat="post in posts | orderby: sort | filter: searchkeyword"> <tr> <td> {{index(post)}} </td> <td> {{post.title}} </td> <td> {{post.author}} </td> <td> {{post.content}} </td> <td> {{post.date | date: "d/m/yyyy"}} </td> </tr> </table> what should do? thank you try this: controller $scope.posts = [ {title:'title one', author:'author one', content: 'content one'}, {title:'title two', author:'author two', content: 'cont...
Read more

sequelize.js - Sequelize: sort by enum cases -

i have model ( article ) field (the name type ) of type enum('source', 'translated') , return 1 article ordered type field. source articles should returned before translated articles. like: article.findone(order: [ { type: [ 'source', 'translated' ] } ]); unfortunately there appears no built-in solution sorting enums. instead have sort by case , couldn't find documentation on how sequelize. what conventional approach here? sorting case hard in sequelize, sort field (the second answer in linked post) should possible: order: sequelize.fn('field', sequelize.col('type'), 'source', 'translated') it's supported mysql far know though
Read more

user interface - how to replace an ongoing process of image capture from another process call over the same ImageLabel in python's GUI TKinter -

i trying use following code create interactive gui changes color-space(hsv, rbg, grayscale etc) on event of button click. display opencv video in tkinter using multiprocessing being new python having problems multiprocessing , attempts on making gui change it's color space on button clicks hangs entire system. on it's implementation highly appreciated. thankyou. below code: import cv2 pil import image,imagetk import tkinter tk import numpy np multiprocessing import process , queue def quit_it(root,process): root.destroy() process.terminate() def black_andwhite(root,process): process.terminate p=process(target=capture_image, args=(5,queue, )) p.start() root.after(0, func=lambda: update_all(root, image_label, queue)) def update_image(image_label, queue): frame = queue.get() = image.fromarray(frame) b = imagetk.photoimage(image=a) image_label.configure(image=b) image_label._image_cache = b root.update() def update_all(root...
Read more