Cannot load web view

[gee4vee]

We are refactoring our GLSP diagram to integrate it with our existing language server-based extension. We are at the point where we can launch the GLSP server using this code snippet in our extension's activate function:

  const serverProcess = new GlspServerLauncher({
    executable: path.join(__dirname, '../../server/glsp-server-node/lib/index.js'),
    socketConnectionOptions: {
      port: JSON.parse(process.env.GRAPH_EDITOR_SERVER_PORT || DEFAULT_SERVER_PORT)
    },
    additionalArgs: [
      '--fileLog',
      '--logDir',
      path.join(os.homedir(), '.se-graphical')],
    logging: true,
    serverType: 'node'
  });
  context.subscriptions.push(serverProcess);
  await serverProcess.start();

And I can see the server does start:

GLSP-Server: 9:33:44 AM info -  [SocketServerLauncher] The GLSP server is ready to accept new client requests on port: 5007 

extensionHostProcess.js:100
GLSP-Server: [GLSP-Server]:Startup completed

extensionHostProcess.js:100
[GLSP-Server]:Startup completed
socket-server-launcher.js:47
GLSP-Server: 9:33:44 AM info -  [SocketServerLauncher] Starting GLSP server connection for client: '127.0.0.1' 
9:33:44 AM info -  [GraphEditorServer] Initializing server with: applicationId: a566d19f-5bdc-40cb-a4a9-778b57e3e5a6, protocolVersion: 0.9.0 

However when we open a document that triggers the GLSP diagram, I can see the following message but the editor tab is just blank:

GLSP-Server: 9:33:45 AM info -  [GraphEditorServer] Initializing client session with: clientSessionId: 'graph-editor_0', diagramType: 'graph-editor' 

Is there a way to enable more debug logging to get more info? I cannot find any other errors or warnings in any other view. Also my breakpoints are not working so I cannot step into any of the provider code.

We are still on older versions of GLSP because the migration to 1.x has caused many other problems for us:

    "@eclipse-glsp/client": "0.10.0-next.c94277c.176+c94277c",
    "@eclipse-glsp/vscode-integration": "next",
    "@eclipse-glsp/vscode-integration-webview": "next",
    "@eclipse-glsp/layout-elk": "1.0.0",
    "@eclipse-glsp/server-node": "1.0.0",

I also had to update to webpack 5 to get the webpack build to work:

const path = require('path');

const outputPath = path.resolve(__dirname, '../../../out/graphical/vscode/pack');

/** @type {import('webpack').Configuration}*/
const config = {
  target: 'web',

  entry: path.resolve(__dirname, 'index.ts'),
  output: {
    filename: 'webview.js',
    path: outputPath
  },
  mode: 'development',

  resolve: {
    extensions: [
      '.ts',
      '.tsx',
      '.js'
    ],
    fallback: {
      os: false,
      crypto: false,
      net: false
    }
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: ['ts-loader']
      },
      {
        test: /\.js$/,
        use: ['source-map-loader'],
        enforce: 'pre'
      },
      {
        test: /\.css$/,
        exclude: /(codicon|\.useable)\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /codicon.css$/,
        use: ['ignore-loader']
      }
    ]
  },
  stats: {
    warningsFilter: [/Failed to parse source map/]
  }
};

module.exports = config;

[gee4vee]

I have found this error in the developer tools. Are we missing a binding or something?

[planger]

This looks like a wrong combination of GLSP library versions.

"@eclipse-glsp/client": "0.10.0-next.c94277c.176+c94277c",
"@eclipse-glsp/vscode-integration": "next",
"eclipse-glsp/vscode-integration-webview": "next",
"@eclipse-glsp/layout-elk": "1.0.0",
"@eclipse-glsp/server-node": "1.0.0",

It looks like you are using a @eclipse-glsp/vscode-integration-webview version that is incompatible with your rather old @eclipse-glsp/client version. The package @eclipse-glsp/vscode-integration-webview is likely pulling a newer version of @eclipse-glsp/client than what you use in your application. Thus, resulting in inversify keys in the bindings that don't match.

Can you double-check that you have only one version of @eclipse-glsp/client in your yarn.lock? I assume you have multiple versions in there, which will always lead to problems. So if you don't want to upgrade to 1.0, you'd have to find the VS Code GLSP integration packages that fit to your nightly glsp-client version.

[gee4vee]

Thank you. How can I find a nightly version that matches the client version? I dont see any tags besides 0.9.0 and 1.0.0 and beyond.

[planger]

Since the glsp-client version you are using is a nightly build, I'm afraid you'll have to match the corresponding vscode integration version by comparing the release dates and try. :-/ I'm sorry!

If you are using actual releases (e.g. 1.0), this is certainly much easier as all compatible GLSP components are released simultaneously with the same version number.

[planger]

One more note: Since 1.0 we are also releasing monthly release candidates of all components to allow staying on the more recent unpublished versions, but still find easily compatible versions across all components.

[gee4vee]

Looks like we were able to get everything working with 1.0.0 versions. Thanks!

    "@eclipse-glsp/client": "^1.0.0",
    "@eclipse-glsp/layout-elk": "^1.0.0",
    "@eclipse-glsp/server-node": "^1.0.0",
    "@eclipse-glsp/vscode-integration": "^1.0.0",
    "@eclipse-glsp/vscode-integration-webview": "^1.0.0",
    "inversify": "^5.0.1",
    "sprotty": "^0.12.0",

[gee4vee]

Per guidance above, fixed it with these versions:

    "@eclipse-glsp/client": "^1.0.0",
    "@eclipse-glsp/layout-elk": "^1.0.0",
    "@eclipse-glsp/server-node": "^1.0.0",
    "@eclipse-glsp/vscode-integration": "^1.0.0",
    "@eclipse-glsp/vscode-integration-webview": "^1.0.0",
    "inversify": "^5.0.1",
    "sprotty": "^0.12.0",