Unsure how to resolve TypeError: _utils_ipfs__WEBPACK_IMPORTED_MODULE_5_

A problem has appeared on my React project which I was not previously experiencing. I am quite certain that the problem began after I updated React to v17.0.0 and a number of other libraries as well.

Basically, one of my pages has an input for uploading an image, which makes the file into an array buffer to be uploaded to IPFS. It used to work, but I tested it again recently (after doing a number of package/library updates as mentioned) and it now gives me the error TypeError: _utils_ipfs__WEBPACK_IMPORTED_MODULE_5__.default.files.add is not a function.

To try to rectify this error I tried npm update to make sure that everything was up to date, but that didn't work.

Here's the console error I get:

getHash NewReview.js:18
NewReview NewReview.js:30
React 5
    invokePassiveEffectCreate
    callCallback
    invokeGuardedCallbackDev
    invokeGuardedCallback
    flushPassiveEffectsImpl
unstable_runWithPriority scheduler.development.js:468
React 3
    runWithPriority$1
    flushPassiveEffects
    commitBeforeMutationEffects
workLoop scheduler.development.js:417
flushWork scheduler.development.js:390
performWorkUntilDeadline scheduler.development.js:157

Here's what I am pretty sure are the parts of NewReview.js relevant to the error:

import ipfs from "../utils/ipfs";

export default function NewReview() {

    const [ipfsHash, setIpfsHash] = useState("");
    const [buffer, setBuffer] = useState(null);

    function getHash() {
        ipfs.files.add(Buffer.from(buffer), (error, result) => {
            if (error) {
                console.error(error)
                return
            }
            setIpfsHash(result[0].hash);
    }});

    useEffect(() => {
        if (buffer) {
            getHash()
        }
    });

// ...

Here is what ipfs.js looks like:

const { create } = require('ipfs-http-client');
const ipfs = create({host: 'ipfs.infura.io', port: 5001, protocol: 'https'});

export default ipfs;

As another attempt to rectify this issue I tried using ipfs.default.files.add as I had seen that suggested as a solution on another Stack Overflow post, but that didn't work unfortunately. Again, the code used to work perfectly as it is so I'm not sure that the cause of this issue is due to a mistake in how the code is written.

Thanks for your help! If you need me to elaborate on anything please feel free to ask.

CodePudding user response：

I managed to resolve my issue on my own! Here's what was going wrong.

The TypeError was actually caused by the fact that I had switched from ipfs-api to ipfs-http-client. ipfs.files.add isn't a valid function in ipfs-http-client, which explains why I was getting that TypeError. I switched the line to ipfs.add and I was able to get it to work.

I would also like to note that I had to use ipfs.add as part of an async/await function in order to get it to work, as otherwise it doesn't seem to execute at all. Figuring that out was a totally separate issue which took me a reasonable amount of time to do as well. I don't think the need for it to be part of an async/await function is very well documented, frankly.