Unknown error in Reactjs

Question

I'm trying to learn how to use React and I'm trying to build a todo app. Right now my index.js file is as such:

var React = require('react');
var ReactDom = require('react-dom');

//create component
var TodoComponent = React.createClass({
    render: function(){
        return(
            <h1>Hello!</h1>
        );
    }
});

//put component into html page
ReactDom.render(<TodoComponent/>, document.getElementById('todo-wrapper'))

but in my terminal I get this error:

ERROR in ./~/react-dom/lib/ReactMount.js
Module not found: Error: Cannot resolve module 'react/lib/React' in /Users/tylerbray/Documents/Side Projects/Ninja React/react-playlist/node_modules/react-dom/lib
 @ ./~/react-dom/lib/ReactMount.js 15:12-38

here is my json file:

{
  "name": "react-playlist",
  "version": "1.0.0",
  "description": "A simple react to-do list",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "npm run build",
    "build": "webpack -d && webpack-dev-server --content-base src/ --inline --hot --port 1234"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/iamshaunjp/react-playlist.git"
  },
  "keywords": [
    "react"
  ],
  "author": "The Net Ninja",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/iamshaunjp/react-playlist/issues"
  },
  "homepage": "https://github.com/iamshaunjp/react-playlist#readme",
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^15.6.2"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^6.4.1",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^1.15.0",
    "webpack-dev-server": "^1.16.5"
  }
}

I'm not sure what to make of it and I was hoping someone here could point me in the right direction. Repo can be found here: https://github.com/Brayheart/react-todo

Answer 1

Problem is that you are using "react-dom": "^15.6.2" which is creating an issue. Packaging has changed after react 16, There is no react/lib/* and react-dom/lib/* anymore (check docs for more details: https://reactjs.org/blog/2017/09/26/react-v16.0.html#packaging).

To fix an issue

1. update "react-dom" to "^16.2.0".
2. Remove node_modules

3. Run "npm install"

4. Then you also need to change your "index.js" as you have upgraded react version. "React.createClass" is not a part of core package anymore it is extracted to separate package "create-react-class" (for more details check docs: https://reactjs.org/blog/2017/09/26/react-v16.0.html#packaging), So i have modified it to use React.component.

   import React from 'react';
   import ReactDom from 'react-dom';
   
   //create component 
   class TodoComponent extends React.Component {
       render() {
           return(
               <h1>Hello!</h1>
           );
       }
   }
   
   //put component into html page
   ReactDom.render(<TodoComponent/>, document.getElementById('todo-
   wrapper'))
   

5. run "npm start"

6. Opened app using url http://localhost:1234

it should work :)

Answer 2

var React = require('require');

should be:

var React = require('react');