Hi all,
I have run into the following problem: I am unable to upload data to IPFS from React when using the code provided by the Moralis documentation. I have checked out similar posts on this issue however it has not helped me to find a solution to it. Below you can find the code which show the two ways I have tried to upload data to IPFS and both result in the same error: Uncaught (in promise) Error: Moralis.start failed: serverUrl is required.
I have found and used the code in the docs to upload and retrieve data using regular JS and NodeJS and both run fine if executed from the command line. I have successfully uploaded and downloaded data so there is no problem here.
The problems started when I tried to use similar code as described above however executed via a button in React (code below). Mind you, I had been using moralis to manage the web3 aspects in the application and so far I have not encountered any problems whatsoever (Moralis be blessed). My index.js contains the moralis provider including serverurl/appid (although API-key seems to be the only thing needed nowadays if I understand correctly) and all the subsequent calls to moralis work fine. It is just this bit of code that is not working. To reiterate, when run the console reads: Uncaught (in promise) Error: Moralis.start failed: serverUrl is required.
Can anyone help me out or point me in the right direction? Thank you in advance
Code 1:
const uploadFolder = async () => {
await Moralis.start({
apiKey: "YOUR_API_KEY",
// ...and any other configuration
});
const options = {
abi: [
{
path: "moralis/logo.jpg",
content: {
name: "NFT Name",
description: "This will be the NFT description.",
},
},
],
};
const path = await Web3Api.storage.uploadFolder(options);
console.log(path);
};
const runApp = async () => {
await Moralis.start({
apiKey: "YOUR_API_KEY",
// ...and any other configuration
});
const abi = [
{
path: "YOUR_FILE_PATH",
content: "YOUR_JSON_OR_BASE64",
},
];
const response = await Moralis.EvmApi.ipfs.uploadFolder({ abi });
console.log(response.toJSON());
};
Dependencies in Package.json:
"dependencies": {
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",
"@material-ui/core": "^4.12.4",
"@moralisweb3/common-evm-utils": "^2.18.1",
"@mui/material": "^5.10.6",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^13.0.0",
"@testing-library/user-event": "^13.2.1",
"@walletconnect/web3-provider": "^1.8.0",
"@web3auth/web3auth": "^1.2.1",
"@web3uikit/core": "^0.1.5",
"@web3uikit/icons": "^0.1.5",
"@web3uikit/web3": "^0.1.5",
"apexcharts": "^3.36.3",
"axios": "^0.27.2",
"magic-sdk": "^9.0.0",
"moralis": "^2.18.1",
"moralis-v1": "^1.11.0",
"pako": "^2.1.0",
"react": "^18.2.0",
"react-apexcharts": "^1.4.0",
"react-css-transition": "^0.7.4",
"react-dom": "^18.2.0",
"react-icons": "^4.4.0",
"react-intersection-observer": "^9.4.0",
"react-moralis": "^1.4.2",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"react-switch": "^7.0.0",
"react-transition-group": "^4.4.5",
"web-vitals": "^2.1.0"
},