Sveltekit & Fleek(IPFS)导入语法问题?

发布于 2025-01-12 05:17:07 字数 2683 浏览 2 评论 0原文

我已成功使用 fleek 通过直接 JavaScript 更新 IPFS。我现在尝试将此功能添加到 svelteKit 应用程序的全新安装中。我认为我在导入周围的语法方面遇到了问题,但不确定我做错了什么。当我单击index.svelte上的按钮时,我收到以下错误

Uncaught ReferenceError: require is not defined
    uploadIPFS upload.js:3
    listen index.mjs:412..........(I truncated the error here)

一些想法

我想知道它是否可以在javascript中工作,因为它是在节点中调用(在服务器上运行)但在客户端上以svelte运行?

更多详细信息

index.svelte 文件看起来像这样

<script>
    import {uploadIPFS} from '../IPFS/upload'
</script>

<button on:click={uploadIPFS}>
    upload to ipfs
</button>

upload.js 文件看起来像这样

export const uploadIPFS = () => {
  const fleek = require('@fleekhq/fleek-storage-js');   
    const apiKey = 'cZsQh9XV5+6Nd1+Bou4OuA==';
    const apiSecret = '';
    const data = 'pauls test load';
    const testFunctionUpload = async (data) => {
        const date = new Date();
        const timestamp = date.getTime();

        const input = {
            apiKey,
            apiSecret,
            key: `file-${timestamp}`,
            data
        };

        try {
            const result = await fleek.upload(input);
            console.log(result);
        } catch (e) {
            console.log('error', e);
        }
    };

    testFunctionUpload(data);
}; 

我也尝试过使用其他导入语法,当我这样做时,我得到以下错误,

500

global is not defined....

使用其他语法导入是

import fleekStorage from '@fleekhq/fleek-storage-js';
function uploadIPFS()  {

  console.log('fleekStorage',fleekStorage)
};

export default uploadIPFS;

*我删除了 api 秘密上面的代码。将来我会将它们存储在 .env 文件中。

更多详细信息(如果您需要)

下面的文件将更新 IPFS 并通过命令运行 npm 运行上传 该文件如下。对于我在 svelte 中使用的版本,我通过删除所有文件管理并仅加载变量而不是文件来简化文件(如下例所示)

const fs = require('fs');
const path = require('path');
const fleek = require('@fleekhq/fleek-storage-js');   
require('dotenv').config()
const apiKey = process.env.FLEEK_API_KEY;
const apiSecret = process.env.FLEEK_API_SECRET;


const testFunctionUpload = async (data) => {
  const date = new Date();
  const timestamp = date.getTime();

  const input = {
    apiKey,
    apiSecret,
    key: `file-${timestamp}`,
    data,
  };

  try {
    const result = await fleek.upload(input);
    console.log(result);
  } catch(e) {
    console.log('error', e);
  }
}
// File management not used a my svelte version to keep it simple
const filePath = path.join(__dirname, 'README.md');

fs.readFile(filePath, (err, data) => {
  if(!err) {
    testFunctionUpload(data);
  }
})

I have managed to use fleek to update IPFS via straight javascript. I am now trying to add this functionality to a clean install of a svelteKit app. I think I am having trouble with the syntax around imports, but am not sure what I am doing wrong. When I click the button on the index.svelte I get the following error

Uncaught ReferenceError: require is not defined
    uploadIPFS upload.js:3
    listen index.mjs:412..........(I truncated the error here)

A few thoughts

I am wondering if it could be working in javascript because it is being called in node (running on the server) but running on the client in svelte?

More Details

The index.svelte file looks like this

<script>
    import {uploadIPFS} from '../IPFS/upload'
</script>

<button on:click={uploadIPFS}>
    upload to ipfs
</button>

the upload.js file looks like this

export const uploadIPFS = () => {
  const fleek = require('@fleekhq/fleek-storage-js');   
    const apiKey = 'cZsQh9XV5+6Nd1+Bou4OuA==';
    const apiSecret = '';
    const data = 'pauls test load';
    const testFunctionUpload = async (data) => {
        const date = new Date();
        const timestamp = date.getTime();

        const input = {
            apiKey,
            apiSecret,
            key: `file-${timestamp}`,
            data
        };

        try {
            const result = await fleek.upload(input);
            console.log(result);
        } catch (e) {
            console.log('error', e);
        }
    };

    testFunctionUpload(data);
}; 

I have also tried using the other import syntax and when I do I get the following error

500

global is not defined....

import with the other syntax is

import fleekStorage from '@fleekhq/fleek-storage-js';
function uploadIPFS()  {

  console.log('fleekStorage',fleekStorage)
};

export default uploadIPFS;

*I erased the api secret in the code above. In future I will store these in a .env file.

Even more details (if you need them)

The file below will update IPFS and runs via the command
npm run upload
That file is below. For my version that I used in svelte I simplified the file by removing all the file management and just loading a variable instead of a file (as in the example below)

const fs = require('fs');
const path = require('path');
const fleek = require('@fleekhq/fleek-storage-js');   
require('dotenv').config()
const apiKey = process.env.FLEEK_API_KEY;
const apiSecret = process.env.FLEEK_API_SECRET;


const testFunctionUpload = async (data) => {
  const date = new Date();
  const timestamp = date.getTime();

  const input = {
    apiKey,
    apiSecret,
    key: `file-${timestamp}`,
    data,
  };

  try {
    const result = await fleek.upload(input);
    console.log(result);
  } catch(e) {
    console.log('error', e);
  }
}
// File management not used a my svelte version to keep it simple
const filePath = path.join(__dirname, 'README.md');

fs.readFile(filePath, (err, data) => {
  if(!err) {
    testFunctionUpload(data);
  }
})

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文