web3-storage / web3.storage

DEPRECATED ⁂ The simple file storage service for IPFS & Filecoin
https://web3.storage
Other
503 stars 119 forks source link

"web3.storage": "^4.3.0" has issues with Angular 14.0.3 with files-from-path and graceful-fs dependencies #1606

Closed javaspeak closed 2 years ago

javaspeak commented 2 years ago

In my package.json I have:

"web3.storage": "^4.3.0"

In an Angular project I added:

import { Web3Storage, getFilesFromPath } from 'web3.storage';

When I run command:

ng build

I get:

% ng build   
✔ Browser application bundle generation complete.

Error: node_modules/files-from-path/types/index.d.ts:76:8 - error TS1192: 
Module '"/Users/javaspeak/workspace3/symbiont/poc/symbiontpoc1/node_modules/@types/graceful-fs/index"' 
has no default export.

76 import fs from "graceful-fs";

My versions are as follows:

% ng version 
 Angular CLI: 14.0.3
Node: 14.17.3
Package Manager: npm 6.14.13 
OS: darwin x64

 Angular: 14.0.3
     ... animations, cli, common, compiler, compiler-cli, core, forms
     ... platform-browser, platform-browser-dynamic, router

Package                         Version
 ---------------------------------------------------------
@angular-devkit/architect       0.1400.3
@angular-devkit/build-angular   14.0.3
@angular-devkit/core            14.0.3
@angular-devkit/schematics      14.0.3
@schematics/angular             14.0.3
rxjs                            7.5.5
typescript                      4.7.4

It seems that the angular compiler using typescript 4.7.4 does not find the code in graceful-fs / files-from-path compliant.

Not sure if graceful-fs needs to change its code or files-from-path needs to change its code. However all I can see is that with the above versions I am unable to consume web3.storage from angular 14.0.3

I have also raised this ticket at:

 https://github.com/web3-storage/files-from-path/issues/21

 https://github.com/isaacs/node-graceful-fs/issues/233

I raised the other ticket as am not sure if we all need to work in tandem to solve this one.

To consume web3.storage the non angular way I had to do this:

 At the top of the angular typescript file added:

       declare var require: any;

 Then at the consume place:

      const { Web3Storage, File } = require('web3.storage') 

 This worked but is not the typescript way.

I had also tried adding node types with:

     npm install @types/node --save-dev

 and adding this to tsconfig.json:

      "types" : [ "node" ]

Do you expect your code to be consumed by Angular or is it a nodeJs only thing?

I thank you in advance for any time you spend answering or advising on a resolution to this issue. Am feeling blocked.

Thank you

vasco-santos commented 2 years ago

Closing this issue. Let's track a solution on https://github.com/web3-storage/files-from-path/issues/21