React Components & App.js Error: Element Type is Invalid

Question

I have just started learning about React components and am having some trouble with the component and App.js files.

I am getting the following errors:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

My code is as follows:

Products component:

import React from 'react';
import Card from "react-bootstrap/Card";
import Container from "react-bootstrap/Container";
import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row";

function Products(props) {
    const listProducts = props.products.map((product, index) =>
    <Col key={index}>
    <Card className="productCard">
    <Card.Body>
    <Card.Title>{product.product_name}</Card.Title>
    <Card.Image src={product.product_image} alt="Services"/>
    <Card.Text>{product.product_description}</Card.Text>
    </Card.Body>
    </Card>
    </Col>
    );
    return (
    <Container>
    <Row>
    {listProducts}
    </Row>
    </Container>
    );
    }

export default Products;

console.log(Products);

App.js:

// Imported react libraries.
import React, {Component} from 'react';
import './App.css';
// Imported images.
// import gym from './images/gym.jpg';
// import spinning from './images/spinning.jpg';
// import personal from './images/personal.jpg';
// Imported components.
import Header from './components/Header.js';
import Landing from './components/Landing.js';
import Products from './components/Products.js';

const loggedIn = true;
const products = 
[{id: "1", 
product_name: "Classic Membership Plan", 
product_image: "./images/gym.jpg", 
product_description: "We have all of the equipment that is needed to enable anyone to achieve their ultimate goal. Gain access to our facilities and start your transformation."}, 
{id: "2", 
product_name: "Elite Membership Plan", 
product_image: "./images/spinning.jpg", 
product_description: "This membership plan gains you access to all of the equipment, as well as give you the option of joining up to two of our classes. Whether you into spinning classes, yoga, boxing or showing off your moves in a Zumba Fitness class."},
{id: "3", 
product_name: "Pro Membership Plan", 
product_image: "./images/personal.jpg", 
product_description: "This membership plan grants you full access to all of our facilities and classes. In addition you also get assiged a personal trainer that will help you with your work-out plans, as well as meal plans."}];

console.log (typeof products);

class App extends Component {
  render() {
    return (
      <div className="App">
      <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
      integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
      crossOrigin="anonymous"
      />
      <Header name="Chanelle" loggedIn={loggedIn}/>
      <Landing/>
      <Products products={products}/>
      </div>
    );
  }
}

//to render this App component.
export default App;

Please see below the information that I am getting from console and the stack frames:

log.js:24 [HMR] Waiting for update signal from WDS...
Products.js:30 ƒ Products(props) {
  const listProducts = props.products.map((product, index) => /*#__PURE__*/Object(react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_5__["jsxDEV"])(react_bootstrap_Col__WEBPACK_IMPORTED…
App.js:28 object

1. index.js:1 Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check your code at Products.js:13.
    at Products (http://localhost:3000/static/js/main.chunk.js:621:30)
    at div
    at App (http://localhost:3000/static/js/main.chunk.js:192:1)
console.<computed> @ index.js:1

2. react-dom.development.js:25058 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `Products`.
    at createFiberFromTypeAndProps (react-dom.development.js:25058)
    at createFiberFromElement (react-dom.development.js:25086)
    at createChild (react-dom.development.js:13446)
    at reconcileChildrenArray (react-dom.development.js:13719)
    at reconcileChildFibers (react-dom.development.js:14125)
    at reconcileChildren (react-dom.development.js:16990)
    at updateHostComponent (react-dom.development.js:17632)
    at beginWork (react-dom.development.js:19080)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
    at renderRootSync (react-dom.development.js:22670)
    at performSyncWorkOnRoot (react-dom.development.js:22293)
    at scheduleUpdateOnFiber (react-dom.development.js:21881)
    at updateContainer (react-dom.development.js:25482)
    at react-dom.development.js:26021
    at unbatchedUpdates (react-dom.development.js:22431)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:26020)
    at Object.render (react-dom.development.js:26103)
    at Module.<anonymous> (index.js:7)
    at Module../src/index.js (index.js:18)
    at __webpack_require__ (bootstrap:856)
    at fn (bootstrap:150)
    at Object.1 (reportWebVitals.js:14)
    at __webpack_require__ (bootstrap:856)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

3. index.js:1 The above error occurred in the <div> component:
at div
    at CardBody (http://localhost:3000/static/js/vendors~main.chunk.js:2451:27)
    at div
    at Card (http://localhost:3000/static/js/vendors~main.chunk.js:2065:23)
    at div
    at Col (http://localhost:3000/static/js/vendors~main.chunk.js:2195:23)
    at div
    at Row (http://localhost:3000/static/js/vendors~main.chunk.js:2312:23)
    at div
    at Container (http://localhost:3000/static/js/vendors~main.chunk.js:2265:23)
    at Products (http://localhost:3000/static/js/main.chunk.js:621:30)
    at div
    at App (http://localhost:3000/static/js/main.chunk.js:192:1)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
console.<computed> @ index.js:1

4. react-dom.development.js:23275 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `Products`.
    at createFiberFromTypeAndProps (react-dom.development.js:25058)
    at createFiberFromElement (react-dom.development.js:25086)
    at createChild (react-dom.development.js:13446)
    at reconcileChildrenArray (react-dom.development.js:13719)
    at reconcileChildFibers (react-dom.development.js:14125)
    at reconcileChildren (react-dom.development.js:16990)
    at updateHostComponent (react-dom.development.js:17632)
    at beginWork (react-dom.development.js:19080)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
    at renderRootSync (react-dom.development.js:22670)
    at performSyncWorkOnRoot (react-dom.development.js:22293)
    at scheduleUpdateOnFiber (react-dom.development.js:21881)
    at updateContainer (react-dom.development.js:25482)
    at react-dom.development.js:26021
    at unbatchedUpdates (react-dom.development.js:22431)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:26020)
    at Object.render (react-dom.development.js:26103)
    at Module.<anonymous> (index.js:7)
    at Module../src/index.js (index.js:18)
    at __webpack_require__ (bootstrap:856)
    at fn (bootstrap:150)
    at Object.1 (reportWebVitals.js:14)
    at __webpack_require__ (bootstrap:856)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

Stackframes:
createFiberFromTypeAndProps
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:25058
createFiberFromElement
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:25086
createChild
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:13446
reconcileChildrenArray
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:13719
reconcileChildFibers
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:14125
reconcileChildren
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:16990
updateHostComponent
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:17632
beginWork
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:19080
HTMLUnknownElement.callCallback
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:3945
invokeGuardedCallbackDev
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:3994
invokeGuardedCallback
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:4056
beginWork$1
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:23964
performUnitOfWork
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:22776
workLoopSync
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:22707
renderRootSync
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:22670
performSyncWorkOnRoot
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:22293
scheduleUpdateOnFiber
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:21881
updateContainer
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:25482
(anonymous function)
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:26021
unbatchedUpdates
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:22431
legacyRenderSubtreeIntoContainer
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:26020
render
C:/Users/chane/Desktop/TASK 9.1/my-company/node_modules/react-dom/cjs/react-dom.development.js:26103
Module.<anonymous>
C:/Users/chane/Desktop/TASK 9.1/my-company/src/index.js:7
Module../src/index.js
http://localhost:3000/static/js/main.chunk.js:983:30
__webpack_require__
C:/Users/chane/Desktop/TASK 9.1/my-company/webpack/bootstrap:856
fn
C:/Users/chane/Desktop/TASK 9.1/my-company/webpack/bootstrap:150
1
http://localhost:3000/static/js/main.chunk.js:1106:18
__webpack_require__
C:/Users/chane/Desktop/TASK 9.1/my-company/webpack/bootstrap:856
checkDeferredModules
C:/Users/chane/Desktop/TASK 9.1/my-company/webpack/bootstrap:45
Array.webpackJsonpCallback [as push]
C:/Users/chane/Desktop/TASK 9.1/my-company/webpack/bootstrap:32
(anonymous function)
http://localhost:3000/static/js/main.chunk.js:1:73

I initially thought that it has something to do with the images that have been included in the imports and being called in the array, so I have changed this but still receive this error.

My import and export seems to be fine. Maybe I might be mixing the languages though? I am not too sure where I am going wrong.

I have researched this error, visiting quite a few websites, on Google but cannot seem to find a solution for this.

I would appreciate any assistance that anyone is willing to offer.

Answer 1

Looking at the error labeled 3, it is saying that it is not your Product that isn't defined, but rather it's something inside your Card.Body that isn't defined.

I don't see a Card.Image in the react-bootstrap docs, but I do see a Card.Img. Try using that.