Vscode plugin does not work in theia

MoHcmp commented 3 years ago

Hello. I have vscode plugin with custom editor. Custom editor has iframe in it. iframe loads local resources from this plugin. Plugin works fine in vscode but it does not work in theia. I get errors like: GET http://794a321d-e320-4e7d-ae32-fc4225828d18.webview.localhost:3000/webview/theia-resource/path/to/plugin/myCode.js net::ERR_ABORTED 404 (Not Found)

Operating System: Windows 10
Theia Version: 1.16

vince-fugnitto commented 3 years ago

@MoHcmp thank you for reporting the issue, please be sure to properly fill out the issue template including steps to reproduce so the community can better help you.

amos42 commented 3 years ago

In Windows, the resource cannot be found normally due to a path problem. Please try this on Linux or WSL.

MoHcmp commented 3 years ago

@amos42 Checked on linux, same problem. 404 Not Found when trying to load js file. Path to file is correct (and this plugin works fine in vscode)

tsmaeder commented 3 years ago

@MoHcmp unless we have more info about what VS Extension this is and what it's trying to do exactly, there's really nothing the team can do here 🤷

MoHcmp commented 3 years ago

My custom editor html is something like

<html>
  <body>
    <iframe />
  <body>
<html>

Iframe has html code that load .js file . I generate link to .js file inside CustomTextEditorProvider using webview.asWebviewUri(uri) and pass it to iframe. When iframe tries to load resource it fails with 404 error: GET http://794a321d-e320-4e7d-ae32-fc4225828d18.webview.localhost:3000/webview/theia-resource/path/to/plugin/myCode.js net::ERR_ABORTED 404 (Not Found)

Here some bugs with similar descriptions: https://github.com/cweijan/vscode-database-client/issues/79 https://github.com/eclipse-theia/theia/issues/8874

MoHcmp commented 3 years ago

Hello. Any news on this bug?

tsmaeder commented 3 years ago

@MoHcmp sorry, but we have not way to reproduce this issue. Unless you provide a way to reproduce the issue (for example, by providing the source to your VS Code extension), I don't see what we can do.

Jarthianur commented 3 years ago

The very same issue appears with builtin markdown-language-features in version 1.55.2 for example. (Actually that's the reason I found this issue). Any version after 1.39.2 makes use of webviews and the 404 thing happens. I couldn't find out so far, whether there is a problem with webviews and the theia-resources path in general, or with the specific API calls used in those plugins.

I hope this hint is helping a bit.

tsmaeder commented 3 years ago

@Jarthianur do you have a scenario for proviking the issue with the markdown built-in?

Jarthianur commented 3 years ago

@tsmaeder Well my setup includes reverse proxy, keycloak and the like. I will spin up a container locally and look how it behaves without all these things.

Jarthianur commented 3 years ago

http://f130a982-875c-41b3-963f-d7a0a216c4c2.webview.localhost:3000/webview/theia-resource/file///home/theia/plugins/vscode-builtin-markdown-language-features/extension/media/index.js net::ERR_ABORTED 404

tsmaeder commented 3 years ago

But what do you do to provoke that?

Jarthianur commented 3 years ago

Build a theia docker application like in theia-apps using following package.json:

{
  "dependencies": {
    "@theia/bulk-edit": "next",
    "@theia/callhierarchy": "next",
    "@theia/console": "next",
    "@theia/core": "next",
    "@theia/debug": "next",
    "@theia/editor": "next",
    "@theia/editor-preview": "next",
    "@theia/file-search": "next",
    "@theia/filesystem": "next",
    "@theia/getting-started": "next",
    "@theia/git": "next",
    "@theia/keymaps": "next",
    "@theia/markers": "next",
    "@theia/messages": "next",
    "@theia/metrics": "next",
    "@theia/mini-browser": "next",
    "@theia/monaco": "next",
    "@theia/navigator": "next",
    "@theia/outline-view": "next",
    "@theia/output": "next",
    "@theia/plugin": "next",
    "@theia/plugin-dev": "next",
    "@theia/plugin-ext": "next",
    "@theia/plugin-ext-vscode": "next",
    "@theia/plugin-metrics": "next",
    "@theia/preferences": "next",
    "@theia/preview": "next",
    "@theia/process": "next",
    "@theia/property-view": "next",
    "@theia/scm": "next",
    "@theia/scm-extra": "next",
    "@theia/search-in-workspace": "next",
    "@theia/task": "next",
    "@theia/terminal": "next",
    "@theia/timeline": "next",
    "@theia/typehierarchy": "next",
    "@theia/userstorage": "next",
    "@theia/variable-resolver": "next",
    "@theia/workspace": "next"
  },
  "devDependencies": {
    "@theia/cli": "next"
  },
  "license": "Apache-2.0",
  "name": "@theia/myapp",
  "private": true,
  "scripts": {
    "preinstall": "node-gyp install"
  },
  "theia": {
    "frontend": {
      "config": {
        "applicationName": "My App",
        "preferences": {
          "files.enableTrash": false
        }
      }
    }
  },
  "theiaPlugins": {
"vscode-builtin-bat": "https://open-vsx.org/api/vscode/bat/1.55.2/file/vscode.bat-1.55.2.vsix",
    "vscode-builtin-configuration-editing": "https://open-vsx.org/api/vscode/configuration-editing/1.55.2/file/vscode.configuration-editing-1.55.2.vsix",
    "vscode-builtin-cpp": "https://open-vsx.org/api/vscode/cpp/1.55.2/file/vscode.cpp-1.55.2.vsix",
    "vscode-builtin-debug-auto-launch": "https://open-vsx.org/api/vscode/debug-auto-launch/1.55.2/file/vscode.debug-auto-launch-1.55.2.vsix",
    "vscode-builtin-docker": "https://open-vsx.org/api/vscode/docker/1.55.2/file/vscode.docker-1.55.2.vsix",
    "vscode-builtin-icon-theme-seti": "https://open-vsx.org/api/vscode/vscode-theme-seti/1.55.2/file/vscode.vscode-theme-seti-1.55.2.vsix",
    "vscode-builtin-image-preview": "https://open-vsx.org/api/vscode/image-preview/1.55.2/file/vscode.image-preview-1.55.2.vsix",
    "vscode-builtin-ini": "https://open-vsx.org/api/vscode/ini/1.55.2/file/vscode.ini-1.55.2.vsix",
    "vscode-builtin-json": "https://open-vsx.org/api/vscode/json/1.55.2/file/vscode.json-1.55.2.vsix",
    "vscode-builtin-json-language-features": "https://open-vsx.org/api/vscode/json-language-features/1.55.2/file/vscode.json-language-features-1.55.2.vsix",
    "vscode-builtin-log": "https://open-vsx.org/api/vscode/log/1.55.2/file/vscode.log-1.55.2.vsix",
    "vscode-builtin-make": "https://open-vsx.org/api/vscode/make/1.55.2/file/vscode.make-1.55.2.vsix",
    "vscode-builtin-markdown": "https://open-vsx.org/api/vscode/markdown/1.55.2/file/vscode.markdown-1.55.2.vsix",
    "vscode-builtin-markdown-language-features": "https://open-vsx.org/api/vscode/markdown-language-features/1.55.2/file/vscode.markdown-language-features-1.55.2.vsix",
    "vscode-builtin-merge-conflict": "https://open-vsx.org/api/vscode/merge-conflict/1.55.2/file/vscode.merge-conflict-1.55.2.vsix",
    "vscode-builtin-perl": "https://open-vsx.org/api/vscode/perl/1.55.2/file/vscode.perl-1.55.2.vsix",
    "vscode-builtin-powershell": "https://open-vsx.org/api/vscode/powershell/1.55.2/file/vscode.powershell-1.55.2.vsix",
    "vscode-builtin-search-result": "https://open-vsx.org/api/vscode/search-result/1.55.2/file/vscode.search-result-1.55.2.vsix",
    "vscode-builtin-shellscript": "https://open-vsx.org/api/vscode/shellscript/1.55.2/file/vscode.shellscript-1.55.2.vsix",
    "vscode-builtin-sql": "https://open-vsx.org/api/vscode/sql/1.55.2/file/vscode.sql-1.55.2.vsix",
    "vscode-builtin-theme-defaults": "https://open-vsx.org/api/vscode/theme-defaults/1.55.2/file/vscode.theme-defaults-1.55.2.vsix",
    "vscode-builtin-xml": "https://open-vsx.org/api/vscode/xml/1.55.2/file/vscode.xml-1.55.2.vsix",
    "vscode-builtin-yaml": "https://open-vsx.org/api/vscode/yaml/1.55.2/file/vscode.yaml-1.55.2.vsix",
    "vscode-clangd": "https://open-vsx.org/api/llvm-vs-code-extensions/vscode-clangd/0.1.11/file/llvm-vs-code-extensions.vscode-clangd-0.1.11.vsix",
    "vscode-editorconfig": "https://open-vsx.org/api/EditorConfig/EditorConfig/0.16.6/file/EditorConfig.EditorConfig-0.16.6.vsix",
    "vscode-eslint": "https://open-vsx.org/api/dbaeumer/vscode-eslint/2.1.8/file/dbaeumer.vscode-eslint-2.1.8.vsix",
    "vscode-references-view": "https://open-vsx.org/api/ms-vscode/references-view/0.0.80/file/ms-vscode.references-view-0.0.80.vsix"
  },
  "theiaPluginsDir": "plugins",
  "version": "1.4.1"
}

Then just open a .md file (readme or whatever) and find the 404 message in your browsers console.

tsmaeder commented 3 years ago

OK, thx.

sathya-1994 commented 2 years ago

@tsmaeder , @vince-fugnitto ,@MoHcmp ,

I am able to reproduce this issue using vscode's custom editor(https://code.visualstudio.com/api/extension-guides/custom-editors) API example https://github.com/microsoft/vscode-extension-samples/tree/main/custom-editor-sample.

Screenshot:

Expected custom editor:

I am using Blueprint Theia(https://download.eclipse.org/theia/latest/windows) and loading above example as plugin using command TheiaBlueprint.exe start --plugins=local-dir:"C:\my_work_space\"

Steps to reproduce:

Create a new folder with name extension under "C:\my_work_space". Copy all content form https://github.com/microsoft/vscode-extension-samples/tree/main/custom-editor-sample example into extension folder. Build extension folder with yarn command.
Run command TheiaBlueprint.exe start --plugins=local-dir:"C:\my_work_space\"
Open C:\my_work_space\extension\exampleFiles folder and try to open example.cscratch file.

Main issue: Webview will load external files as file URI. If custom editor's webview try to load external file then we are facing net::ERR_ABORTED 404 issue in the Theia. But this is working fine in vscode.

rbbl-dev commented 2 years ago

so i had the same issue today when working with sprotty and it turned out that the adblock extension of the browser blocked the request resulting in 404.

so try to disabling adblock if you face this issue

tsmaeder commented 2 years ago

@sathya-1994 @rbbl-dev @Jarthianur thanks for investigating. @MoHcmp can you check wether this is indeed a an adblock issue?

Jarthianur commented 2 years ago

I'm facing the issue in a clean and default chromium browser. No adblocker in place.

vince-fugnitto commented 2 years ago

@sathya-1994 do you experience the issue using master of this repository? I tried lately (both the example-browser and example-electron applications) and it seems to work fine (the second example pawDraw won't work yet since vscode.workspace.fs.isWritableFileSystem is not yet implemented).

browser:

electron:

rbbl-dev commented 2 years ago

@vince-fugnitto so we had this occure again.

with theia 1.14.x

we have theia 1.14.x in use.

the error does not happen when running theia straight from yarn(the yarn script uses the theia utility) and accessing it on localhost - everything works fine. when accessing it through 127.0.0.1 then the routing to the webview subdomain does not work resulting in a typical connection error.

When deployed on Kubernetes then its a bit different.

When the ssl cert is not trusted then the webview gets blocked.

When the ssl cert is trusted then the webview itself loads but loading css and js files from "inside" the vscode plugin results in a 404 for those resource. just like @sathya-1994 reported.

with theia 1.23.x

So i created a test branch where i bumped theia to 1.23.x and deployed it to a kubernetes cluster with trusted certificate and there it works.

Hope this helps somewhat.

vince-fugnitto commented 2 years ago

So i created a test branch where i bumped theia to 1.23.x and deployed it to a kubernetes cluster with trusted certificate and there it works.

@rbbl-dev happy to hear it works with the newer version :+1:

msujew commented 2 years ago

@rbbl-dev As far as I know, Webviews not working when accessing Theia through an IP address is expected. Theia serves them using subdomains, which aren't available on IP based URLs. See also this discussion

rbbl-dev commented 2 years ago

@msujew yeah i figured that already. just wanted to include it for a fuller picture.

eclipse-theia / theia

Vscode plugin does not work in theia #9918

with theia 1.14.x

with theia 1.23.x