Getting an TypeError: t is undefined in React while accessing commerce.js public key

Question

I was trying to access the commercejs Library's Public Key in React. But i failed to do so and met with this error. I can't understand why i am getting this error.

src\lib\commerce.js

import Commerce from '@chec/commerce.js';

export const commerce = new Commerce(process.env.REACT_APP_CHEC_PUBLIC_KEY, true);

src\App.js

import React, {useState, useEffect} from 'react';
import {Products, Navbar} from './components';
import {commerce} from './lib/commerce';
const App = () => {
    
    const [products, setProducts] = useState([]);

    const fetchProducts = async () => {
        const {data} = await commerce.products.list();
    
        setProducts(data);
    }

    useEffect(() => {
        fetchProducts();
    })

    console.log(products);

    return (
        <div>
            <Navbar/>
            <Products/>
        </div>
    )
}

export default App;

Error

TypeError: t is undefined e node_modules/@chec/commerce.js/lib/index.js:1

Answer 1

Ah, I see you're a man of culture as well, watching Javascript Mastery on Youtube!

Just check where you created the .env file. It should be stored in the root folder. I had it in my src folder that's how I got this error. If it doesn't work, then go to your commercejs client, login and then at your settings, refresh your PUBLIC API. When you get a new one, just replace it. It should work after this.

Answer 2

I got to same error. You should write terminal npm install @chec/commerce.js and npm install -g @chec/cli or visit the website commerce.js => "https://dashboard.chec.io/" .

Answer 3

I also face this issue when I watching Javascript Mastery on Youtube. What I did was, disconnect the connection with .env file and just add the public key to commerce.js.This is not the best practice.

export const commerce = new Commerce("Your public key", true);

Answer 4

Robbie from Commerce.js here. We've had a number of issues from people following this tutorial, so here are a couple of things to watch out for:

1. Make sure your .env file is in your project's root folder (the same folder that your package.json file is in)
2. Ensure you have installed the dotenv package. You can make sure by running npm install dotenv or yarn add dotenv.
3. Put your public key in your .env file under the REACT_APP_CHEC_PUBLIC_KEY variable and ensure that your API key is valid. You can fetch your valid API keys from the Chec Dashboard.
4. Restart your local dev server after making changes to your .env file.

Hope this helps