React Cannot read property 'Component' of undefined - javascript

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 !

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

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.

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 !

Related

Can't resolve '#react/dialog' in Login page

I'm trying to use react-dialog.
To install I did npm install react-dialog --legacy-peer-deps
When I run the application I'm getting the following error.
Error
Failed to compile.
Module not found: Error: Can't resolve '#react/dialog' in '/Users/elizafury/book-main/src/components/auth'
ERROR in ./src/components/auth/Login.js 8:0-39
Module not found: Error: Can't resolve '#react/dialog' in '/Users/elizafury/book-main/src/components/auth'
webpack compiled with 1 error
I've tried
installing and using yarn
updated npm
removed node_modules and package-lock.json and then reinstalled npm
Import Dialog from "react-dialog" which results in this error:
SyntaxError: /Users/efury1/book-main/node_modules/react-dialog/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (49:7):
47 |
48 | return (
> 49 | <div ref="modal" className={classes}>
| ^
50 | <div className="dialog-title">{this.props.title}</div>
51 | <section ref="dialogContent" className="dialog-content">{this.props.message}</section>
52 | <div className="dialog-action"{this.props.action}></div>
Add #babel/preset-react (https://github.com/babel/babel/tree/main/packages/babel-preset-react) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add #babel/plugin-syntax-jsx (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-jsx) to the 'plugins' section to enable parsing.
ERROR in ./node_modules/react-dialog/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
I'm still quite new to Javascript and I'm wondering how I should proceed to get dialog-react working?
My Code
I've done import {Dialog} from '#react/dialog' because I was following a video from the EpicReactCourse.
Here is the code I'm using react-dialog for:
import React, { Component } from 'react'
// eslint-disable-next-line
import ReactDOM from 'react-dom'
import {Logo} from '../Logo'
import {Dialog} from '#react/dialog'
export default class Login extends Component {
render() {
return (
<div>
<h1 className="home">Welcome to bookie</h1>
<Logo width="100" height="100"/>
<div>
<button onClick={() => alert('login clicked')}>Login</button>
</div>
<div>
<button onClick={() => alert('login clicked')}> Register</button>
</div>
<Dialog aria-label="Login form" isOpen={true}> //using Dialog
<div>
<button>Close</button>
</div>
<h3>Login</h3>
</Dialog>
</div>
);
}
}
Package.Json
{
"name": "books",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.12.0",
"#testing-library/react": "^11.2.6",
"#testing-library/user-event": "^12.8.3",
"dialog-react": "^1.1.4",
"react": "^17.0.2",
"react-dialog": "^0.1.0",
"react-dom": "^17.0.2",
"react-scripts": "^5.0.1",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

I can't display Reactstrap components in ReactJs

Hi guys I'm new to Reactjs, I can run <h1>Hello World </h1> in App.js. But when I use <Container></Container> in Reactstrap even though I have done all the imports, I get a blank page in the browser. App.js is not rendered when I use <Container></Container>.I am not getting any errors either.
App.js => rendered
import React, { Component } from 'react';
import { Container, Row } from 'reactstrap';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<h1>Hello World</h1>
</div>
);
}
}
export default App;
App.js => not rendered
import React, { Component } from 'react';
import { Container, Row } from 'reactstrap';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<Container>
<h1>Hello World</h1>
</Container>
</div>
);
}
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import 'bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);
package.json
{
"name": "test-react-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap": "^5.1.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "0.9.5",
"reactstrap": "^9.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Hey here it looks like react-scripts is low version.I upgraded it to 4.0.0 and added the following in package.json
,
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
Problem solved, thank you.

React - PropTypes not Enforcing isRequired

I'm creating a component which takes in two props. The first is a list of strings e.g. ['string1', 'string2'] and the second is a list of list of strings e.g. [['string1arr1' ,'string2arr1'], ['string3arr2', 'string4arr2']].
The is roughly what my component looks like:
import React from 'react';
import PropTypes from 'prop-types';
export default function ComponentName (props){
//insert component code here
}
ComponentName.propTypes = {
one: PropTypes.arrayOf(PropTypes.string).isRequired,
two: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)).isRequired,
}
When I pass through a prop with a different datatype, e.g.
<ComponentName one={123} two={'abc'} />
No PropTypes error occurs and the component executes as normal.
I've been going through several different tutorials trying to see what it is I've done wrong and from what I can see I'm using poropTypes correctly. I've also tried using simpler requirements such as one: PropTypes.string.isRequired and it still didn't work.
Version of react and prop-types installed:
"react": "^17.0.2",
"prop-types": "^15.8.1"
Babel Dependencies:
"#babel/core": "^7.16.7",
"#babel/plugin-proposal-class-properties": "^7.16.7",
"#babel/preset-env": "^7.16.7",
"#babel/preset-react": "^7.16.7",
"babel-loader": "^8.2.3",
It now works and I'm not sure what I did to fix it :/
It looks right. However I am not sure if your example above is the same semantics you are using in your code. You can't declare export default ComponentName (props), ComponentName is unknown, neither a function or a class. Try something like this instead and maybe it'll solve your problem:
import React from 'react';
import PropTypes from 'prop-types';
function ComponentName (props){
//insert component code here
}
ComponentName.propTypes = {
one: PropTypes.arrayOf(PropTypes.string).isRequired,
two: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)).isRequired,
}
export default ComponentName;
Edit:
Your code works here for me:
package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
App.js
import logo from "./logo.svg";
import "./App.css";
import ComponentName from "./ComponentName";
function App() {
return (
<div className="App">
<header className="App-header">
<ComponentName one={["123"]} two={[["923939"]]} />
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
ComponentName.js
import React from "react";
import PropTypes from "prop-types";
export default function ComponentName() {
return <div>ComponentName</div>;
}
ComponentName.propTypes = {
one: PropTypes.arrayOf(PropTypes.string).isRequired,
two: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)).isRequired,
};

React.JS: Error: Invalid hook call. Hooks can only be called inside of the body of a function component

I have been working on a front-end (following a tutorial) for React.js and have ran into an error:
× Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
I have looked into each one of these issues and cannot seem to find the problem.. If anyone has a pointer that would be very helpful..
The 'App' Code:
import React from "react";
import { Container, AppBar, Typography, Grow, Grid } from "#material-ui/core";
import memories from "./images/memories.png";
const App = () => {
return (
<Container maxwidth="lg">
<AppBar position="static" color="inherit">
<Typography variant="h2" align="center">
Memories
</Typography>
<img src={memories} alt="memories" height="60" />
</AppBar>
</Container>
);
};
export default App;
The 'Package.json' Code:
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.5",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
The 'index.js' Code:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));
EDIT: as requested, i've added a few more files which maybe causing the issue.

Props not passed down to children using React-Redux

I am following this tutorial on React-Redux and I stumbled upon error on 1st part of section "React Redux tutorial: asynchronous actions in Redux, the naive way".
Post.componentDidMount
src/js/components/Posts.js:12
9 |
10 | componentDidMount() {
11 | // calling the new action creator
> 12 | this.props.getData();
| ^ 13 | }
14 |
15 | render() {
My understanding is that props from store is not passed down from the App component to Posts component. I have repeated the steps several times but I still cannot see the exact culprit. The source code from Git works just fine. I noticed, there are difference between my local and that of the GIT repo.
This is my package.json
{
"name": "react-redux-study",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
"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": {
"react-redux": "^7.2.0",
"redux": "^4.0.5"
}
}
And this is the package.json from the Git repo.
UPDATE: Added my App.js and Posts.js
App.js
import React from "react";
import List from "./List";
import Form from "./Form";
import { Post } from "./Posts";
const App = () => (
<>
<div>
<h2>Articles</h2>
<List />
</div>
<div>
<h2>Add a new article</h2>
<Form />
</div>
<div>
<h2>API posts</h2>
<Post />
</div>
</>
);
export default App;
Posts.js
import React, { Component } from "react";
import { connect } from "react-redux";
import { getData } from "../actions/index";
export class Post extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
// calling the new action creator
this.props.getData();
}
render() {
return null;
}
}
export default connect(
null,
{ getData }
)(Post);
I can actually just move on and use the source code from Git but I do want to understand what is the exact issue.
Issue :
// posts.js
export class Post extends Component { // <---- First : Export
...
}
export default connect( // <----- Second : Export
null,
{ getData }
)(Post);
// inside app.js
// you are importing first import, not the default which is connecting to you store
import { Post } from "./Posts";
Solution :
Change this line
import { Post } from "./Posts";
To
// import the default one
import Post from "./Posts";
In app component
<Post getData={postdata} />
In Posts component you can get data like this.
componentDidMount() {
let posts=this.props.getData;
}

Categories