How to open local website URI in mini-browser - URI type issues

Hi, I’m new to Typescript and Theia and trying to see how one can open a webpage hosted on a local server (e.g. 127.0.0.1:3000) with minibrowser.

I’ve been trying to derive something from the minibrowser example @kittaakos shared earlier in By default, open html file in preview by having this in my widget-contribution.ts:

[...other imports...]
import { MiniBrowserOpenHandler } from '@theia/mini-browser/lib/browser/mini-browser-open-handler';
import URI from '@theia/core/lib/common/uri';

@injectable()
export class TheiaWidgetContribution extends AbstractViewContribution<TheiaWidgetWidget> implements FrontendApplicationContribution {

        [...other contributions...] 

        app.shell.onDidAddWidget(widget => {
            const myUri: URI = new URI('127.0.0.1:3000').withScheme('http')
            this.miniBrowserOpenHandler.open(
                myUri,
                { widgetOptions: { ref: widget, mode: 'open-to-right' } }
            );
        });
}

When I try this I keep getting the error

src/browser/theia-widget-contribution.ts:57:17 - error TS2345: Argument of type ‘import("/me/my-theia-project/theia-widget/node_modules/@theia/core/lib/common/uri").default’ is not assignable to parameter of type ‘import("/me/my-theia-project/theia-widget/node_modules/@theia/mini-browser/node_modules/@theia/core/lib/common/uri").URI’.
myUri, [i.e. occurs in this.miniBrowserOpenHandler.open( ]

Property ‘toComponents’ is missing in type ‘import("/me/my-theia-project/theia-widget/node_modules/@theia/core/lib/common/uri").default’ but required in type ‘import("/me/my-theia-project/theia-widget/node_modules/@theia/mini-browser/node_modules/@theia/core/lib/common/uri").URI’

Any idea what I’m doing wrong?

Been trying variations and looking up the error and still rather stumped, have also tried doing import { UriComponents } from '@theia/core/lib/common/uri'; as well but that just resulted in another error:

src/browser/theia-widget-contribution.ts:10:10 - error TS2614: Module ‘"@theia/core/lib/common/uri"’ has no exported member ‘UriComponents’. Did you mean to use ‘import UriComponents from “@theia/core/lib/common/uri”’ instead?

which is confusing considering other areas of the theia source does just this.

@vivekgani thank you for the discussion, I don’t see anything wrong with the usage of uri in the snippet. If you have additional info or a small repo you can share that would be helpful. I made the changes locally (albeit likely missing some parts of your example) and it seems to compile and build fine for me.

@vivekgani can you check whether the version of @theia/mini-browser is the same as the pulled version of @theia/core? Incompatible type errors such as these are often the result of mismatched Theia package versions.

Thanks for the quick responses, I’ll try to see if I can share an example soon.

@vivekgani can you check whether the version of @theia/mini-browser is the same as the pulled version of @theia/core ? Incompatible type errors such as these are often the result of mismatched Theia package versions.

I had to double check my yarn.lock but this could be it:

I seem to have theia/core at 1.24.0…

@theia/core@1.24.0”, “@theia/core@latest”:
version “1.24.0”
resolved “https://registry.yarnpkg.com/@theia/core/-/core-1.24.0.tgz#ff278a6572b1088c2805a674207d69153cab2537
integrity sha512-HLId45qq3Sx0agclgWScWeatUyLktUg1iFnUz+UK+c84ZJF00wywym1r85LOcg/ny6jYLYnuyvGW0vGxyJ1/lA==
dependencies:
@babel/runtime” “^7.10.0”
@phosphor/algorithm” “1”
@phosphor/commands” “1”
@phosphor/coreutils” “1”
[…more dependencies…]

…but mini-browser at 1.25.0

@theia/mini-browser@latest”:
version “1.25.0”
resolved “https://registry.yarnpkg.com/@theia/mini-browser/-/mini-browser-1.25.0.tgz#78b055ac1e7f7cca2fd8ff348ae66b234afcd347
integrity sha512-30+AK3cqHRXgSX7Mwz6bD1gH99qKJrIni0+jP/p++xYl+Z0erLY3G2jTCFEfYI/ccVF4/RZs9QJt9m561+LwlQ==
dependencies:
@theia/core” “1.25.0”
@theia/filesystem” “1.25.0”
@types/mime-types” “^2.1.0”
mime-types “^2.1.18”
pdfobject “^2.0.201604172”
uuid “^8.0.0”
vhost “^3.0.2”

@vivekgani peforming yarn why @theia/core should tell you why you’re pulling two different versions of @theia/core which you can then fix.

Finally coming back to this, thanks for the responses so far. I’m still sorta stuck in understanding the issue, to explain what I’ve tried:

[1/4] Why do we have the module "@theia/core"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "@theia/core@1.24.0"
info Has been hoisted to "@theia/core"
info Reasons this module exists
   - "workspace-aggregator-d91aeedd-ef00-47d8-8aa7-143d77bc6e2d" depends on it
   - Hoisted from "_project_#@theia#filesystem#@theia#core"
   - Hoisted from "_project_#browser-app#@theia#editor#@theia#core"
   - Hoisted from "_project_#browser-app#@theia#markers#@theia#core"
   - Hoisted from "_project_#browser-app#@theia#messages#@theia#core"
   - Hoisted from "_project_#browser-app#@theia#monaco#@theia#core"
   - Hoisted from "_project_#browser-app#@theia#navigator#@theia#core"
   - Hoisted from "_project_#browser-app#@theia#preferences#@theia#core"
   - Hoisted from "_project_#browser-app#@theia#process#@theia#core"
   - Hoisted from "_project_#browser-app#@theia#terminal#@theia#core"
   - Hoisted from "_project_#browser-app#@theia#workspace#@theia#core"
   - Hoisted from "_project_#browser-app#@theia#monaco#@theia#outline-view#@theia#core"
   - Hoisted from "_project_#browser-app#@theia#preferences#@theia#userstorage#@theia#core"
   - Hoisted from "_project_#browser-app#@theia#editor#@theia#variable-resolver#@theia#core"
info Disk size without dependencies: "14.51MB"
info Disk size with unique dependencies: "48.12MB"
info Disk size with transitive dependencies: "73.48MB"
info Number of shared dependencies: 209
=> Found "theia-widget#@theia/core@1.25.0"
info This module exists because "_project_#theia-widget" depends on it.
info Disk size without dependencies: "13.87MB"
info Disk size with unique dependencies: "47.48MB"
info Disk size with transitive dependencies: "72.84MB"
info Number of shared dependencies: 209
=> Found "browser-app#@theia/core@1.25.0"
info This module exists because "_project_#browser-app" depends on it.
info Disk size without dependencies: "13.87MB"
info Disk size with unique dependencies: "47.48MB"
info Disk size with transitive dependencies: "72.84MB"
info Number of shared dependencies: 209
=> Found "electron-app#@theia/core@1.25.0"
info This module exists because "_project_#electron-app" depends on it.
info Disk size without dependencies: "13.87MB"
info Disk size with unique dependencies: "47.48MB"
info Disk size with transitive dependencies: "72.84MB"
info Number of shared dependencies: 209
=> Found "@theia/mini-browser#@theia/core@1.25.0"
info Reasons this module exists
   - "_project_#theia-widget#@theia#mini-browser" depends on it
   - Hoisted from "_project_#theia-widget#@theia#mini-browser#@theia#filesystem#@theia#core"
info Disk size without dependencies: "13.87MB"
info Disk size with unique dependencies: "47.48MB"
info Disk size with transitive dependencies: "72.84MB"
info Number of shared dependencies: 209
Done in 2.65s.

This causes theia to just hang at the loading screen when rebuilding/starting.
Any idea what to try next?

@vivekgani The workspace-aggregator isn’t really a package but rather a way for yarn to aggregate all packages in a workspace. Looking at your lock file, it seems that you’ve managed (or rather yarn did) to mismatch Theia versions, although all versions are the same in the actual package.json. You can probably simply delete the yarn.lock and the issue should fix itself.

However, it is generally recommended to pin all Theia packages to the same version, as you likely run into this problem again in the future. Also, keeping latest in there might accidentally pull breaking changes into your app, which are usually a pain to deal with.

This helped a lot @msujew , thank you. Still some work for me to get this demo to work right (now seeing some browser thing appear), but my steps in getting things running were:

  • Deleting yarn.lock
  • Editing the package.json files for electron-app, browser-app, and widget to ensure all theia-related dependencies were pinned to a specific version (1.26.0 as of this writing).
  • Running yarn install, (also yarn prepare , yarn rebuild:browser ), then yarn rebuild:electron . The intermediate steps seemingly were needed (including rebuild:browser) to get the electron build to run.