Apify-Client having trouble working with React - reactjs

Question

I hope you are having a fantastic day.
I am using this API: https://apify.com/petrpatek/covid-19-aggregator/api, for the first time, and I am having some issues getting it to work with React. This is the file where I am making my API call:
const ApifyClient = require('apify-client');
require('dotenv').config({ path: `${__dirname}/../../.env` });
const client = new ApifyClient({
token: process.env.REACT_APP_API_TOKEN,
});
const input = {};
const getItems = async () => {
// Run the actor and wait for it to finish
const run = await client.actor('petrpatek/covid-19-aggregator').call(input);
// Fetch and print actor results from the run's dataset (if any)
console.log('Results from dataset');
const { items } = await client.dataset(run.defaultDatasetId).listItems();
// console.log(items);
items.forEach((item) => {
console.dir(item);
});
return items;
};
getItems();
// export default getItems();
Most of the above is just copy-pasted from the API docs, this file has no problems running as a standalone, if I run node apify.js, it returns the correct data as I expect:
correct data
However when I try to run it inside of a React component, like so:
import { useEffect } from 'react';
import CountryCard from '../components/countryCard';
import Header from '../components/header';
import getItems from '../APIs/apify';
const AllCountriesPage = () => {
useEffect(() => {
getItems();
}, []);
return (
<div className="allCountriesPage">
<Header />
<CountryCard className="bannerCountry" />
<p className="allCountriesText">All countries</p>
<div className="allCountriesContainer">
{/* Some kind of for loop */}
<CountryCard />
</div>
</div>
);
};
export default AllCountriesPage;
It throws the following error:
error message
At first, I thought this was just a problem with the dependencies, but I do have them installed, or the file would not be running by itself, also this is my package.js file:
{
"name": "catalogue-of-statistics",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"apify-client": "^1.2.4",
"dotenv": "^8.2.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.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"
]
},
"devDependencies": {
"#babel/core": "^7.14.5",
"#babel/eslint-parser": "^7.14.5",
"#babel/plugin-syntax-jsx": "^7.14.5",
"#babel/preset-react": "^7.14.5",
"eslint": "^7.28.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"stylelint": "^13.13.1",
"stylelint-config-standard": "^21.0.0",
"stylelint-csstree-validator": "^1.9.0",
"stylelint-scss": "^3.19.0"
}
}

Answer 1

I see my colleague replied to you over our Discord.
For others:
You need to add mainFields: ['browser', 'main', 'module'], to your webpack config. The order is important. main needs to go before module. See https://webpack.js.org/configuration/resolve/#resolvemainfields

Answer 2

As Lukas was saying above, the Apify team answered my question directly in their discord, so I want to put the solution here if someone comes across it in the future.
You need to go to node_modules -> react_scripts -> config -> webpack.config.js inside the resolve: { ... } object, add this line: mainFields: ['browser', 'main', 'module'], make sure that main is before module.