This is the first react app i am trying to make but i am stuck with this error. the file structure seems to be correct and also my starting point.Please help me figure it out why it cannot find main.jsx module .
file structure
react-skeleton
|
+-- node_modules
|
+-- public
| |
| +-- js
| | |
| | +-- main.js
| |
| +--index.html
|
+-- src
| |
| |
| +-- components
| | |
| | +-- List.jsx
| | |
| | +-- Listitem.jsx
| |
| +--main.jsx
|
|
+-- package.json
index.html
<!DOCTYPE html>
<html>
<head>
<title>CommonJS React skeleton</title>
</head>
<body>
<div id="ingredients">
</div>
<script src="js/main.js"></script>
</body>
</html>
List.jsx
var React = require('react');
var ListItem = require('./Listitem.jsx');
var ingredients = [{"id":1, "text":"ham"},{"id":2, "text":"cheese"},{"id":3, "text":"potato"}];
var List = React.createClass({
render: function(){
var listItems = ingredients.map(function(item){
return <ListItem key={item.id} ingredient = {item.text} />;
});
return (<ul>{listItems}</ul>);
}
});
module.exports = List;
Listitem.jsx
var React = require('react');
var ListItem = React.createClass({
render: function(){
return (
<li>
<h4>{this.props.ingredient}</h4>
</li>
);
}
});
module.exports = ListItem;
main.jsx
var React = require('react');
var ReactDOM = require('react-dom');
var List = require('./components/List.jsx');
ReactDOM.render(<List />, document.getElementById('ingredients'));
package.json
{
"name": "react-skeleton",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "watchify ./src/main.jsx -v -t [babelify --presets [ react ] ] -o ./public/js/main.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/SoeRatch/react-skeleton.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/SoeRatch/react-skeleton/issues"
},
"homepage": "https://github.com/SoeRatch/react-skeleton#readme",
"dependencies": {
"babel-cli": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babelify": "^7.3.0",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"watchify": "^3.9.0"
}
}
I run it on my terminal using npm start and the error on my terminal is this:
> [email protected] start /home/suraj/Desktop/REACTJS/project/react-skeleton
> watchify src/main.jsx -v -t [babelify --presets [ react ] ] -o public/js/main.js
Error: Cannot find module '/home/suraj/Desktop/REACTJS/project/react-skeleton/src/main.jsx' from '/home/suraj/Desktop/REACTJS/project/react-skeleton'