如何在reactjs中使用带有节点v14的第三个v14合同？

Question

大家好，我正在使用@thirdweb dev/ useStorageUpload将NFT映像和元数据上传到ipf，但是它给我带来了错误，我不知道我在哪里做错了。

这是我的密码-

import { useStorageUpload } from "@thirdweb-dev/storage";

const { mutateAsync: upload } = useStorageUpload();

    const addNft = async () => {
        const name = artCollectionss_name;
        const price = artCollectionss_price;
        const description = artCollectionss_short_desc;

        if (!name || !description || !price || !collectionsImg) {
            return;
        }
        const data = JSON.stringify({
            name, description, image: collectionsImg
        });

        const uri = await upload({ data: data });
        console.log(uri);
}

以下是错误：-

./node_modules/@thirdweb-dev/storage/dist/thirdweb-dev-storage.esm.js 384:40
Module parse failed: Unexpected token (384:40)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   constructor(options) {
|     _defineProperty(this, "uploadWithGatewayUrl", void 0);
>     this.uploadWithGatewayUrl = options?.uploadWithGatewayUrl || false;
|   }
|   async uploadBatch(data, options) {

检查错误后，我发现我的项目使用的是节点版本14，这支持版本18。

那么，有谁能告诉我，如何在v14中使用ReactJS中的节点sdk呢？另外，我需要知道我是否需要api密钥来使用第三个key？

Answer 1

解决这个问题的一个解决方案是从@thirdweb dev/react中导入useStorageUpload，而不是从@thirdweb dev/存储中导入

这是更新的代码-

import { useStorageUpload } from "@thirdweb-dev/react";