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.