Can't import from @theia/filesystem in my theia extension created using yeoman generator

[BariekR]

Let's say I created theia extension using yo theia-extension (with the empty template option). I have folders empty, browser-app and electron-app in the directory. Then I executed yarn, yarn build:browser and yarn start:browser. Everything works as expected (I just had to add "resolutions": {"inversify": "6.0.3"} to the root package.json based on #14431 to make it work), the application is accessible at http://localhost:3000/.

In my theia extension called empty, I wanted to use @theia/filesystem dependency. So I navigated to the empty folder and executed yarn add @theia/filesystem and yarn. package.json in the empty folder contains "dependencies": {"@theia/core": "1.55.0", "@theia/filesystem": "1.55.0"}. But something is wrong. When I try to import { FileService } from "@theia/filesystem"; in the empty-contribution.ts (located under empty\src\browser), I get the error Cannot find module '@theia/filesystem' or its corresponding type declarations.ts(2307). And the project won't compile.

I am quite new to the Theia platform, so I probably miss something. Does anyone know how I could fix this?

I installed all prerequisites https://github.com/eclipse-theia/theia/blob/master/doc/Developing.md#prerequisites (I use Windows 11). I use VS Code as my IDE. I also tried the widget template from yeoman, but the issue is the same. Thanks for any clue.

[msujew]

Hey @BariekR,

can you provide a reproducible example so we can quickly check it out?

Also, FileService isn't directly exported from the @theia/filesystem package. Since all packages are separated into node and browser parts, you need to import the browser related services from @theia/filesystem/lib/browser. @theia/filesystem only contains the common components that are shared across backend and frontend.

[BariekR]

Hello @msujew,

Thanks for the details. Please have a look in this repository. In bariekr-theia-nodes/src/browser/bariekr-theia-nodes-widget.tsx, I can't import anything from @theia/filesystem.

[msujew]

When running yarn install it already shows a warning immediately notifying you of the issue:

warning Pattern ["@theia/filesystem@latest"] is trying to unpack in the same destination "C:\\Users\\Mark\\AppData\\Local\\Yarn\\Cache\\v6\\npm-@theia-filesystem-1.55.0-9021c6bc299a7f058455a7e45d6d7130209c1ed7-integrity\\node_modules\\@theia\\filesystem" as pattern ["@theia/[email protected]","@theia/[email protected]","@theia/[email protected]","@theia/[email protected]","@theia/[email protected]","@theia/[email protected]","@theia/[email protected]","@theia/[email protected]","@theia/[email protected]","@theia/[email protected]"]. This could result in non-deterministic behavior, skipping.

You're trying to use @theia/filesystem@latest in here. You should use a specific version (like 1.55.0 like all the other @theia/* dependencies. That should resolve the issue.

[BariekR]

Thank you, @msujew – I followed the answer and the import from @theia/filesystem/lib/browser now works.