Uncaught SyntaxError: The requested module does not provide an export named 'fs'

Question

I'm not good with javascript. I'm trying to upload a few files to nft.storage as a folder by modifying this example -> https://github.com/nftstorage/nft.storage/blob/main/packages/client/examples/node.js/storeDirectory.js

Instead of uploading via a form, my files are stored in my PC file system. Below is my js code.

<script type="module">
  import { NFTStorage, File } from 'https://cdn.skypack.dev/nft.storage'
  import { fs } from 'https://cdn.skypack.dev/fs-'

  const endpoint = 'https://api.nft.storage' // the default
  const token = 'RDA0NjI0MTIzMTA2Mzgy....' // your API key from https://nft.storage/manage

  function log(msg) {
    msg = JSON.stringify(msg, null, 2)
    document.getElementById('out').innerHTML += `${msg}\n`
  }

  document.querySelector('#upload-file-ipfs').addEventListener('click', async (e) => {
    e.preventDefault()
    
    const storage = new NFTStorage({ endpoint, token })
    const cid = await storage.storeDirectory([
        new File([await fs.promises.readFile('metadata.json')], 'metadata.json'),
        new File([await fs.promises.readFile('test.png')], 'test.png'),
    ])
    console.log({ cid })
    const status = await storage.status(cid)
    console.log(status)
  })
</script>

But I keep getting this error below.

Uncaught SyntaxError: The requested module 'https://cdn.skypack.dev/fs-' does not provide an export named 'fs'

I tried replacing 'https://cdn.skypack.dev/fs-' with 'https://www.skypack.dev/view/fs-extra' and ''https://cdn.skypack.dev/graceful-fs' and it gives me the same error.

If I remove the curly braces around 'fs', I get Uncaught Error: [Package Error] "fs" does not exist. (Imported by "fs-").

Any help is highly appreciated. My application is PHP+ JS, not node.js.

@CherryDT Thank you. Ok, I'm not good at js at all and my application is not based on node,js, it's PHP + JS. So is there a way for me to run the same code with fs on the browser? — vagef53574, Nov 15 '21 at 22:56
Please only tag your question with the tags that are relevant to the issue at hand. Since there's no PHP involved here, you should remove that tag. The same for node.js since you specifically say that your app is _not_ a node.js app. — M. Eriksson, Nov 15 '21 at 23:05

score 0 · Answer 1 · answered Nov 15 '21 at 22:55

It should be without curly braces, as shown in the docs for fs-, but the second error tells you the next problem: You are trying to use a package in the browser which is designed for node.js. (Browsers don't have a native fs module.) Use it in your backend node.js application, not the frontend.

Since you seem to be trying to use this in a browser, probably you shouldn't use the node.js example that you linked (nft.storage/packages/client/examples/node.js/storeDirectory.js) but rather the browser example: https://github.com/nftstorage/nft.storage/blob/main/packages/client/examples/browser

Remember however that a script in a browser can't just read random files from the user's file system. The user has to upload the file in a form (or give access to a certain directory using the browser file system APIs, but that's experimental).

Ok. So perhaps I should use FormData? Since my files I need my code to auto-read the files, instead of having user to upload the files to the form. — vagef53574, Nov 15 '21 at 23:00

Uncaught SyntaxError: The requested module does not provide an export named 'fs'

1 Answers1