Unable to compile without other dependencies, Dropbox, Emscripten, HTML5FS &etc.?

[SamuelMarks]

Related: https://github.com/jvilk/BrowserFS/issues/200 https://github.com/jvilk/BrowserFS/issues/233

Using a package that recommends BrowserFS, so I run npm i -S browserfs; npm i -D @types/browserfs. Then I import it like so:

import * as BrowserFS from 'browserfs';
import FS, { FSModule } from 'browserfs/dist/node/core/FS';

Now I get these errors (Angular 7.1 app):

ERROR in node_modules/browserfs/dist/node/backend/Dropbox.d.ts(2,23): error TS2688: Cannot find type definition file for 'dropboxjs'.
node_modules/browserfs/dist/node/backend/Dropbox.d.ts(18,13): error TS2503: Cannot find namespace 'Dropbox'.
node_modules/browserfs/dist/node/backend/Dropbox.d.ts(44,25): error TS2503: Cannot find namespace 'Dropbox'.
node_modules/browserfs/dist/node/backend/Dropbox.d.ts(54,68): error TS2503: Cannot find namespace 'Dropbox'.
node_modules/browserfs/dist/node/backend/Dropbox.d.ts(59,21): error TS2503: Cannot find namespace 'Dropbox'.
node_modules/browserfs/dist/node/backend/Dropbox.d.ts(65,51): error TS2503: Cannot find namespace 'Dropbox'.
node_modules/browserfs/dist/node/backend/Dropbox.d.ts(93,18): error TS2503: Cannot find namespace 'Dropbox'.
node_modules/browserfs/dist/node/backend/Emscripten.d.ts(19,19): error TS2304: Cannot find name 'NodeBuffer'.
node_modules/browserfs/dist/node/backend/Emscripten.d.ts(20,23): error TS2304: Cannot find name 'NodeBuffer'.
node_modules/browserfs/dist/node/backend/Emscripten.d.ts(21,18): error TS2304: Cannot find name 'NodeBuffer'.
node_modules/browserfs/dist/node/backend/Emscripten.d.ts(22,22): error TS2304: Cannot find name 'NodeBuffer'.
node_modules/browserfs/dist/node/backend/HTML5FS.d.ts(1,23): error TS2688: Cannot find type definition file for 'filesystem'.
node_modules/browserfs/dist/node/backend/HTML5FS.d.ts(10,37): error TS2304: Cannot find name 'FileEntry'.
node_modules/browserfs/dist/node/backend/HTML5FS.d.ts(32,9): error TS2304: Cannot find name 'FileSystem'.
node_modules/browserfs/dist/node/core/node_fs_stats.d.ts(18,22): error TS2720: Class 'import("proj-name/node_modules/browserfs/dist/node/core/node_fs_stats").default' incorrectly implements class 'import("fs").Stats'. Did you mean to extend 'import("fs").Stats' and inherit its members as a subclass?
  Property 'atimeMs' is missing in type 'Stats'.

Am I doing something wrong?

---

EDIT: Progress thus far has been made by:

npm i -D @types/dropboxjs @types/node @types/filesystem

Adding below export default class Stats implements fs.Stats { in node_modules/browserfs/dist/node/core/node_fs_stats.d.ts:

atimeMs: number;
mtimeMs: number;
ctimeMs: number;
birthtimeMs: number;

Replaced NodeBuffer with Buffer in node_modules/browserfs/dist/node/backend/Emscripten.d.ts.

[bmfs]

Are you using the ForkTsCheckerWebpackPlugin in webpack?

[abhishiv]

I'm also having this problem but only with Stats class

node_modules/browserfs/dist/node/core/node_fs_stats.d.ts:18:22 - error TS2720: Class 'import("/Users/abhishiv/work/gratico/kernel/node_modules/browserfs/dist/node/core/node_fs_stats").default' incorrectly implements class 'import("fs").Stats'. Did you mean to extend 'import("fs").Stats' and inherit its members as a subclass?

Trying to exclude the .d.ts file via tsconfig.json didn't work as usual - probably because of this

  "exclude": [
    "node_modules/browserfs/dist/node/backend/HTML5FS.d.ts",
    "node_modules/browserfs/dist/node/core/node_fs_stats.d.ts",
    "node_modules/browserfs/dist/node/backend/Emscripten.d.ts",
    "node_modules/browserfs/dist/node/backend/Dropbox.d.ts",
    "node_modules",
    "build"
  ]

EDIT: As mentioned in the message, changing implements to extends in node_fs_stats.d.ts does fix the error, and I can compile my project

//Stats/// <reference types="node" /> // comment this out as well
export default class Stats extends fs.Stats {

[shawn-bandy-urbag]

I was able to alleviate the two errors above by matching the version of the types in my project's package.json to those in browserfs (1.4.3):

    "@types/dropboxjs": "0.0.28",
    "@types/filesystem": "0.0.29",
    "@types/node": "~7.0",
    "browserfs": "^1.4.3",

[jvilk]

I'm happy to accept PRs that improve compatibility here.

[dsl400]

Help!!

npm i -D @types/browserfs
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types%2fbrowserfs - Not found
npm ERR! 404
npm ERR! 404  '@types/browserfs@latest' is not in the npm registry.

any suggestion would be appreciated

[jcoutch]

@dsl400 - There is no types package for BrowserFS, since BrowserFS is already written in TypeScript. :-)

[NickStrupat]

@jcoutch you're right, but it's broken.

[jsmith]

Jumping on this thread to add my solution. Since I'm only really using a subset of the API I just created a simple type file and modified my tsconfig.json file to point the compiler in the right direction 😄

// browserfs.d.ts
declare module 'browserfs' {
  export function configure(o: { fs: string, options: any }, onError: (e?: Error) => void): void;
}

// tsconfig.json
{
    ...
    "paths": {
      "browserfs": [
        "src/types/browserfs.d.ts"
      ]
    },
    ...
}

[kevzettler]

I followed shawn-bandy-urbag suggestion and installed explicit versions in to my host project.

"@types/dropboxjs": "0.0.28",
"@types/filesystem": "0.0.29",
"@types/node": "~7.0",
"browserfs": "^1.4.3",

I tried to create a PR to fixe theses issues but couldn't figure out how to get the SharedArrayBuffer reference exporting to the consumer projects.

[james-pre]

@SamuelMarks @abhishiv

Does this bug still exist?

[james-pre]

Closing (stale). If you would like to reopen this issue, please do so by creating a new issue in the relevant repositories of @browser-fs