需要模块给出模块未加载错误

我正尝试使用基于组件的方法在react.js中编写一个简单的Hello World应用程序。所以我使用的是requie.js。我有4个文件在同一个文件夹中，即index.html, index.js,world.js and require.js。我在index.html中有一个脚本标记，它将加载index.js。但我使用module.exports通过require.js加载world.js，这会导致错误。这里是我的代码
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) 
    } 

})

我打算显示Hello, World。但我收到以下错误

Uncaught SyntaxError: Unexpected token < 
fbcdn-dragon-a.akamaihd.net/hphotos-ak-xtf1/t39.3284-6/11057100_835863049837306_1087123501_n.js:314 You are using the in-browser JSX transformer. Be sure to precompile your JSX for production - http://facebook.github.io/react/docs/tooling-integration.html#jsx 
require.js:8 Uncaught Error: Module name "world" has not been loaded yet for context: _. Use require([]) 
http://requirejs.org/docs/errors.html#notloaded 
:8000/index.js:5 Uncaught SyntaxError: Unexpected token <

来源

2015-07-13 gates

是否有可能在github上共享实际代码并提供可下载的链接？我认为最好是有整个代码，这样我才能看到它现在正在做什么。 –

是的，这是非常可能的。请给我一些时间来推代码 – gates

https://github.com/vamsipavanmahesh/helloworld/tree/master @HatemJaber – gates

这里至少有三个问题。首先，您没有使用正确的require语法来进行异步加载。你index.js应该是：

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

其次，由于index.js和world.js是JSX文件，requirejs需要一个插件，会告诉它。喜欢的东西：

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

最后，由于您是通过requirejs加载index.js，你并不需要：

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

来源

2015-07-13 15:12:07

首先，该组件的 “世界” 的第一个开始大写。我继续将代码放在一个文件，这样你可以看到它多一点明确：

<!DOCTYPE html> 
<html> 

<head> 

    <title>Hello React!</title> 
    <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> 
    </head> 
    <body> 
    <div id="example"></div> 
    <script type="text/jsx"> 
    var World = React.createClass({ 
     render: function(){ 
     return (
     <div>World!</div> 
     ); 
     } 

    }); 

    var Hello = React.createClass({ 
     render:function(){ 
     return (
     <div> 
      <div>Hello, 
      <World /> 
      </div> 
     </div> 
     ); 

     } 

    }); 

    React.render(<Hello />,document.getElementById('example')); 
    </script> 
    </body> 
</html>

我会建议为你设置与安装的节点和NPM发展正确的环境。我在github上有一个项目，它是一个可以用来启动和运行的框架，而不必担心它现在如何工作：reactjs skeleton。

我希望这有助于！

来源

2015-07-13 15:19:22

不幸的是，我能够以你所做的风格进行编码。但是想要组件化。所以问题是我的努力。尽管如此，感谢您的帮助。 – gates

请记住，当你编写组件时，确保组件只做一件事，这样事情变得更容易管理。你应该看看建立一个环境，它会使开发变得更容易。 –

需要模块给出模块未加载错误

回答

相关问题