787 viewsMern Amazona
2 Comments

Hello Basir,

I was wondering if you already had a proposed solution to the error at 2 hours 20 minutes into the tutorial. It seems like they stopped supporting ReactDOM and maybe that’s the issue? I am not sure how to fix it myself because this is my first experience with web-based coding. I tried to post screenshots but I don’t have permission. The error occurred right after we put

<Nav className=”me-auto”>
                <Link to=”/cart” className=”nav-link”>
                  Cart
                  {createImageBitmap.cartItems.length > 0 && (
                    <Badge pill bg=”danger”>
                      {cart.cartItems.length}
                    </Badge>
                  )}
into the App.js file at the end of lesson 14 and checked the website for the cart counter. My website is just a white page now. Thank you for any help you can provide!

Here are the errors from the console:

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it’s running React 17. Learn more: https://reactjs.org/link/switch-to-createroot react-dom.development.js:86

Uncaught TypeError: createImageBitmap.cartItems is undefined

    App App.js:25

    React 16

    js index.js:10
    factory react refresh:6

    Webpack 3

App.js:25

The above error occurred in the <App> component: App@http://localhost:3000/static/js/bundle.js:51:56 r@http://localhost:3000/static/js/bundle.js:51203:19 StoreProvider@http://localhost:3000/static/js/bundle.js:271:78 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. react-dom.development.js:18687

    React 16

    js index.js:10
    factory react refresh:6

    Webpack 3

Bassir Posted new comment October 12, 2022

hello there,

the issue is in createImageBitmap.cartItems

it is undefined. in the code we don’t use createImageBitmap. we use this code:

https://github.com/basir/mern-amazona/blob/master/frontend/src/App.js#L96

make it like this to fix the issue.

Bassir Answered question October 11, 2022