CODEWITHSUNDEEP
ruby-on-rails-4reactjsreact-router
Aakanksha
Aakanksha

Reputation: 976

Uncaught Error: Cannot find module "react"

starting with, i am a beginner in React with Rails and trying things out. I am currently working with routing and i'm not sure where i'm going wrong. Please guide me.

I have a container folder with UserWorld.jsx file. Its content are as follows:

import React, { PropTypes } from 'react';
import User from '../containers/User';

// Simple example of a React "smart" component
export default class UserWorld extends React.Component {
  constructor(props, context) {
    super(props, context);
    // How to set initial state in ES6 class syntax
    // https://facebook.github.io/react/docs/reusable-components.html#es6-classes
    this.state = { users: this.props.data
    };
  }
  render() {
    var userNodes = this.state.users.map(function(user) {
      return (
          <User key={user.id} first_name={user.first_name} last_name={user.last_name} email={user.email} city={user.city} address={user.address} />
      );
    });
    return (
      <table>
        <thead>
          <tr>
            <td>First Name</td>
            <td>Last Name</td>
            <td>Email</td>
            <td>Address</td>
            <td>City</td>
          </tr>
        </thead>
        <tbody>
          {userNodes}
        </tbody>
      </table>
    );
  }
}

Now, i wish to add a link and i'm including

import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router'

However this gives me an error in the console as follows:

Uncaught Error: Cannot find module "react"
Exception in rendering!
message: Could not find component registered with name UserWorldApp. Registered component names include [ HelloWorldApp ]. Maybe you forgot to register the component?

Now i have no clue about whats happening here. I would be obliged if someone could help me out here. Also, if i can get references for the same. I am facing trouble with the different syntax that are found all around.

Update:

I see that the error is appearing in the var _react = require('react'); line in the Router.js in react-router folder in the node_modules folder.

I get this in console:

ERROR in ../~/react-router/lib/Router.js
18:03:09 client.1 | Module not found: Error: Cannot resolve module 'imports' in /Users/c193/Documents/React/test-react-on-rails/node_modules/react-router/lib
18:03:09 client.1 |  @ ../~/react-router/lib/Router.js 19:13-29

P.S: All the docs and articles i read are way too technical for me to understand and i only understand bits and pieces of it. Its just been two weeks since i started.

Upvotes: 4

Views: 4832

Answers (2)

Matthew Hinea
Matthew Hinea

Reputation: 1931

I had a similar issue, but with "react-router" instead of "react." Check the package.json in the client directory, and if anything's missing, add it manually and run npm install from that directory. That solved the issue for me, although as somebody commented, you probably have a few other issues here as well.

I don't think running npm install react-router --save from the root project directory is a good idea, because React on Rails uses yarn, so the only thing in the node_modules directory in the main project folder should be a .yarn.integrity file. Everything you need for React should be in the package.json file and node_modules directory in the client folder, so check if something's missing from there.

Here's what their client/package.json looks like in the tutorial: https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client/package.json

Upvotes: 3

Aakanksha
Aakanksha

Reputation: 976

I dont know what the problem was or what i missed. However, in a completely new project, I ran npm install react-router --save. I put import { Link } from 'react-router/lib/Link'; in my react component. Restarted the server and i was good to go. I did these same steps in my previous app an it somehow didn't work for me. Anyways, i don't know what i was missing but the problem is solved for now.

P.S: I'm now facing a new issue regarding this and opening a new question for the same.

Thank you anyways people. :)

Upvotes: 0

Related Questions