ide-extension fails to import dynamically

[openscript]

Problem

[error] TypeError: A dynamic import callback was not specified.
	at new NodeError (node:internal/errors:371:5)
	at importModuleDynamicallyCallback (node:internal/process/esm_loader:39:9)
	at main (/home/user/.vscode/extensions/inlang.vs-code-extension-0.4.3/dist/main-186ff56f.cjs:7379:20)

Steps to reproduce

Load production build of ide-extension in VSCode and start it.

Expected behavior

Imports dynamically

Additional information

https://stackoverflow.com/questions/75002605/vscode-extension-a-dynamic-import-callback-was-not-specified
microsoft/vscode#152052 leads to microsoft/vscode#130367
https://stackoverflow.com/questions/70620025/how-do-i-import-an-es6-javascript-module-in-my-vs-code-extension-written-in-type
https://gist.github.com/samthor/3ff82bd5b11314fec2e1826d4a96ce7c
https://github.com/uupaa/dynamic-import-polyfill
https://github.com/GoogleChromeLabs/dynamic-import-polyfill
https://github.com/rich-harris/shimport
microsoft/vscode#166265

[felixhaeberle]

@openscript @samuelstroschein It works now 🎉
Now it's only about waiting for the vscode team to release the next version – they want to ship early May (first week).
see this: microsoft/vscode#178951

Tested with these specs:

Version: 1.78.0-insider (Universal)
Commit: 208bbb0d788cce3eb80799e3565ee2204391b86d
Datum: 2023-04-20T05:22:30.460Z (Vor 5 Stunde(n))
Electron: 22.4.7
Chromium: 108.0.5359.215
Node.js: 16.17.1
V8: 10.8.168.25-electron.0
Betriebssystem: Darwin arm64 22.4.0
Sandkasten: Yes

and this config file:

// @ts-check

/**
 * @type { import("@inlang/core/config").DefineConfig }
 */
export async function defineConfig(env) {
  const plugin = await env.$import(
    "https://cdn.jsdelivr.net/gh/samuelstroschein/inlang-plugin-json@1/dist/index.js"
  );

  const { standardLintRules } = await env.$import(
    "https://cdn.jsdelivr.net/gh/inlang/standard-lint-rules@1/dist/index.js"
  );

  const pluginConfig = {
    pathPattern: "./resources/{language}.json",
  };

  return {
    referenceLanguage: "en",
    languages: await plugin.getLanguages({ ...env, pluginConfig }),
    readResources: (args) => plugin.readResources({ ...args, ...env, pluginConfig }),
    writeResources: (args) => plugin.writeResources({ ...args, ...env, pluginConfig }),
    lint: {
      rules: [standardLintRules()],
    },
    ideExtension: {
      messageReferenceMatchers: [
        async ( /** @type {{ "documentText": string; }} */ args) => {
          const regex = /(?<!\w){?t\(['"](?<messageId>\S+)['"]\)}?/gm;
          const str = args.documentText;
          let match;
          const result = [];

          while ((match = regex.exec(str)) !== null) {
            const startLine =
              (str.slice(0, Math.max(0, match.index)).match(/\n/g) || [])
              .length + 1;
            const startPos =
              match.index - str.lastIndexOf("\n", match.index - 1);
            const endPos =
              match.index +
              match[0].length -
              str.lastIndexOf("\n", match.index + match[0].length - 1);
            const endLine =
              (
                str
                .slice(0, Math.max(0, match.index + match[0].length))
                .match(/\n/g) || []
              ).length + 1;

            if (match.groups && "messageId" in match.groups) {
              result.push({
                messageId: match.groups["messageId"],
                position: {
                  start: {
                    line: startLine,
                    character: startPos,
                  },
                  end: {
                    line: endLine,
                    character: endPos,
                  },
                },
              });
            }
          }
          return result;
        },
      ],
      extractMessageOptions: [{
          callback: (messageId) => `{t("${messageId}")}`,
        },
        {
          callback: (messageId) => `t("${messageId}")`,
        },
      ],
    },
  };
}

[felixhaeberle]

this can be closed due to the latest vs code release. 🎉

[felixhaeberle]

Turns out this is not yet fixed as the issue is still open & not working in production.

microsoft/vscode#130367

[samuelstroschein]

The immediate (and maybe only solution) that I can think of:

1. Use a custom $import in the ide extension that:
2. Transpiles code imported by $import to commonjs.
3. Uses require(transpiledCode) instead of import.

That workaround is heavy but it might work. Potential problems:

• require doesn't support data imports -> create a .inlang folder that stores the imports as actual files

[felixhaeberle]

@samuelstroschein I implemented this (6994510) as suggested and this surprisingly works, but now I'm getting the "Invalid host defined options" from other sources.

And after manually saving the main.cjs file to get a better line number for debugging, this is what causes the error:

[samuelstroschein]

@felixhaeberle See my comment 6994510#r113406606

[felixhaeberle]

the transpiled config output look like this, just in case this is interesting:

"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.defineConfig = void 0;
/**
 * @type { import("@inlang/core/config").DefineConfig }
 */
function defineConfig(env) {
    return __awaiter(this, void 0, void 0, function* () {
        const { default: jsonPlugin } = yield env.$import("https://cdn.jsdelivr.net/gh/samuelstroschein/inlang-plugin-json@2/dist/index.js");
        const { default: sdkPlugin } = yield env.$import("https://cdn.jsdelivr.net/npm/@inlang/sdk-js-plugin@0.4.2/dist/index.js");
        const { default: ideExtensionPlugin } = yield env.$import("https://cdn.jsdelivr.net/npm/@inlang/ide-extension-plugin@latest/dist/index.js");
        return {
            referenceLanguage: "en",
            plugins: [
                jsonPlugin({
                    pathPattern: "./languages/{language}.json",
                }),
                sdkPlugin({
                    languageNegotiation: {
                        strategies: [{ type: "url" }],
                    },
                }),
                ideExtensionPlugin(),
            ],
        };
    });
}
exports.defineConfig = defineConfig;

[felixhaeberle]

Sadly, also after a complete import refactor, this doesn't work.

[samuelstroschein]

@felixhaeberle should I try to take over this issue?

Pros

• I might be able to fix it faster / this week. Given that you are OOO for the rest of the week, we can push the extension out faster.

Neutral

• You need to do CLI inlang machine translate command #760 tomorrow instead of me

Cons

• I want you to be in charge of the IDE extension. Jumping in to solve issues seems to mix ownership. But, this issue seems deep and of high importance to finally get the ide extension running.

[felixhaeberle]

@samuelstroschein I'm in the office until Wednesday afternoon. But you taking this over would benefit from seeing a solution from a new angle.

I can take over machine translate on the CLI and see how far I can take it tomorrow. 👍

I don't see a ownership problem 🤲

I know my way around the extension very good already and are totally into developing it further, but this build bug is killing me right now. Invested a whole day into it.

[samuelstroschein]

@felixhaeberle Okay, I take over this bug and assign you the CLI command.

[felixhaeberle]

@samuelstroschein thank you for fixing this 😊

[samuelstroschein]

@felixhaeberle you're welcome!