Daniel Daniel - 15 days ago 7
Javascript Question

Where is the error that is resulting in this Uncaught Error: Cannot find module "./users/UserSection.jsx" message?

In the browser's cosole I am getting this error:

Uncaught Error: Cannot find module "./users/UserSection.jsx"


Yet I have looked over my UserSection file and directory for any syntax or typo errors and I cannot identify why it cannot find the module.

Here is the UserSection.jsx component:

import React, {Component} from 'react';
import UserForm from './UserForm.jsx';
import UserList from './UserList.jsx';

class UserSection extends Component{
render(){
return (
<div className='support panel panel-primary'>
<div className='panel-heading'>
<strong>Users</strong>
</div>
<div className='panel-body users'>
<UserList {...this.props.} />
<UserForm {...this.props} />
</div>
</div>
)
}
}

UserSection.PropTypes = {
users: React.PropTypes.array.isRequired,
setUserName: React.PropTypes.func.isRequired
}

export default UserSection


And here is the App.jsx file:

import React, {Component} from 'react';
import ChannelSection from './channels/ChannelSection.jsx';
import UserSection from './users/UserSection.jsx';
import MessageSection from './messages/MessageSection.jsx';

class App extends Component {
constructor(props){
super(props);
this.state = {
channels: [],
users: [],
messages: [],
activeChannel: {}
};
}
// componentDidMount(){
// let ws = new WebSocket('ws://echo.websocket.org');
// }
addChannel(name){
let {channels} = this.state;
channels.push({id: channels.length, name});
this.setState({channels});
// TODO: Send to Server
}
setChannel(activeChannel){
this.setState({activeChannel});
// TODO: Get Channel Messages
}
setUserName(name){
let {users} = this.state;
users.push({id: users.length, name});
}
addMessage(body){
let {messages, users} = this.state;
let createdAt = new Date;
let author = users.length > 0 ? users[0].name : 'anonymous';
messages.push({id: messages.length, body, createdAt, author});
this.setState({messages});
// TODO: Send to Server
}
render(){
return (
<div className='app'>
<div className='nav'>
<ChannelSection
{...this.state}
addChannel={this.addChannel.bind(this)}
setChannel={this.setChannel.bind(this)} />
<UserSection
{...this.state}
setUserName={this.setUserName.bind(this)} />
</div>
<MessageSection
{...this.state}
addMessage={this.addMessage.bind(this)} />
</div>

)
}
}

export default App


Here is my webpack.config.js file:

module.exports = {
entry: './index.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
}
]
}
}


Okay guys, here is the project strucuture:

├── app.css
├── bundle.js
├── components
│   ├── App.jsx
│   ├── channels
│   │   ├── Channel.jsx
│   │   ├── ChannelForm.jsx
│   │   ├── ChannelList.jsx
│   │   └── ChannelSection.jsx
│   ├── messages
│   │   ├── Message.jsx
│   │   ├── MessageForm.jsx
│   │   ├── MessageList.jsx
│   │   └── MessageSection.jsx
│   └── users
│   ├── User.jsx
│   ├── UserForm.jsx
│   ├── UserList.jsx
│   └── UserSection.jsx
├── index.html
├── index.js


by the way I have been troubleshooting it as well and the original error is gone, now I am getting these errors:

React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `App`

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `App`

Answer

When you get the error saying that React.createClass is null and you are certain it's an actual component, there are two common issues that could be causing this.

1. You forgot to export the custom component

It's easy to forget when you whip up a new component, but you need to ensure your calling module.exports = MyCustomComponent or if you're using ES6, export default MyCustomComponent.

2. You're using an index.js file in your folder to export all child components

When I'm using folders to organize components, I often use an index.js file to manually export all the nested components, so I can easily call import {Component1, Component2} from './components'. When I get this error it's because I forgot to add my new component to the index.js file. I don't think this applies to your scenario, but am including it for others who may have a similar issue.