'React Cannot read property 'Component' of undefined

I'm trying to deploy my react application on my Cloud Web server. But I get the message "Cannot read property 'Component' of undefined".

Here is my code:

//App.js
import React from 'react';
import './App.css';
import './bootstrap.min.css';
import Listitems from './Listitems.js';
import Cart from './Cart.js';
import Products from './Products.json'


class App extends React.Component{
    constructor(props){
        super(props);
        this.handler = this.handler.bind(this)
        this.state = {
            inCart:[],
            ref:[],
            revenue:0
        }
    }

handler(obj, ref) {
    this.setState({
      inCart: obj,
      ref:ref
    });
    var x;
    var revenue = [];
    const reducer = (accumulator, currentValue) => accumulator + currentValue;  
    for(x in obj){
        revenue.push(obj[x].price * obj[x].quantity)
    }
    if(revenue.length !== 0) {
        this.setState({revenue:revenue.reduce(reducer)})
    } else {
        this.setState({revenue:0})
    }
}
render(){
    var x;
    var cartLength = 0;
    for(x in this.state.inCart){
        cartLength += this.state.inCart[x].quantity
    }
    return (
        <div className="App " >
            <div className="container-fluid">
                <nav className="navbar navbar-light bg-light shadow w-100">
                    <a className="navbar-brand" href="www.google.fr" >Mon projet panier</a>
                    <div>Panier <span data-v-d39b0b74="" className="badge badge-success">{cartLength}</span></div>
                </nav>
                <div id="mdm-cart" className="container">
                    <h1 className="title border-bottom mb-5 display-1">Mon panier</h1>
                    <div className="content">
                        <div className="row">
                            <div className="basket col-md-8">
                                <Cart  viewCart={this.state.viewCart} handler={this.handler} reference={this.state.ref} inCart={this.state.inCart} revenue={this.state.revenue}/>
                            </div>
                            <div className="liste col-md-4">
                                <h2>Produits en relation :</h2>
                                <Listitems key={Products.id} data={Products} handler={this.handler} reference={this.state.ref} inCart={this.state.inCart}/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
  );
}   
}

export default App;

I've also tried to use other import method like :

const { React } = require('react');
import React, { Component } from 'react';

Here is the error message :

Uncaught TypeError: Cannot read property 'Component' of undefined
at Module.<anonymous> (App.js:15)
at l ((index):1)
at Object.<anonymous> (main.e870a004.chunk.js:1)
at l ((index):1)
at a ((index):1)
at Array.e ((index):1)
at main.e870a004.chunk.js:1

Edit : Add Package.json file

{
 "name": "Mon projet panier",
 "version": "0.1.0",
 "private": true,
 "dependencies": {
   "@babel/polyfill": "^7.7.0",
   "babel-plugin-import": "^1.13.0",
   "bootstrap": "^4.4.1",
   "customize-cra": "^0.9.1",
   "react": "^16.12.0",
   "react-app-rewired": "^2.1.5",
   "react-bootstrap": "^1.0.0-beta.16",
   "react-dom": "^16.12.0",
   "react-scripts": "3.2.0"
 },
 "scripts": {
   "start": "react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test",
   "eject": "react-scripts eject"
 },
 "eslintConfig": {
   "extends": "react-app"
 },
 "browserslist": {
   "production": [
     ">0.2%",
     "not dead",
     "not op_mini all"
   ],
   "development": [
     "last 1 chrome version",
     "last 1 firefox version",
     "last 1 safari version"
   ]
 },
 "devDependencies": {
   "@babel/cli": "^7.7.7",
   "@babel/core": "^7.7.7",
   "@babel/preset-env": "^7.7.7"
 }
}

One thing that is odd is that the error is located in App:15 but the code need to know what is React.Component in order to go there.

If anyone have any clue, I'll appreciate !

javascript reactjs

Solution 1:^[1]

Try this: import React, { Component } from 'react';

Solution 2:^[2]

Component of undefined means that its parent which is React is undefined, so either your server environment doesn't support React build pack or take a look at the build script webpack configuration.

Solution 3:^[3]

I finally found the problem.

The files and folders were mixed up serveur side, App.js was in the wrong place. The server didn't even start at all because of this. The error made me think that the server started but were stopped because of the import React.

Anyway, I reoganized the server's folder and restart the server. And it works.

Thanks for you help !

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Irvin Sandoval
Solution 2
Solution 3	Julian

'React Cannot read property 'Component' of undefined

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]