[Help]: Polyfill Node util.TextDecoder in Web Extension

[Antyos]

I have been struggling (for the past year) with trying to make my extension (https://github.com/Antyos/vscode-openscad) web-compatible.

Note: In case someone runs across it, I also asked this question on StackOverflow, but got no response

I am using util.TextDecoder to load WebView content from a .html file, which works fine when running in the desktop environment. However, when running the command openscad.openCheatsheet as a Web Extension, I get the following error: TypeError: util_1.TextDecoder is not a constructor when I try to create an instance of TextDecoder, and VS Code itself crashes.

From my understanding, I need to polyfill TextDecoder as a Web Extension, however, all my attempts seem to have failed. I ran across the StackOverflow thread, Polyfill for TextDecoder, which suggested a few things:

1. Use the text-encoding library. However, it is ~530kb, far more than I need in my bundle.
2. Try fastestsmallesttextencoderdecoder for both desktop/web versions of my extension, but there do not seem to be TypeScript types available for it, so it generates a lot of errors.
3. Polyfilling using npm util seems like the "correct" approach. The vscode-prettier extension seems to use this approach for TextEncoder. However, I still get the error noted above.

Where I use TextDecoder:
https://github.com/Antyos/vscode-openscad/blob/852e5dcb811b8178cba64361d8fec91f71f40434/src/cheatsheet/cheatsheet-content.ts#L167-L175

        const htmlDocument = await vscode.workspace.fs
            .readFile(
                vscode.Uri.joinPath(this._cheatsheetUri, 'cheatsheet.html')
            )
            .then((uint8array) => {
                const fileContent = new TextDecoder().decode(uint8array);
                // console.log(fileContent.toString());
                return parse(fileContent.toString());
            });

Here's my webpack config:
https://github.com/Antyos/vscode-openscad/blob/852e5dcb811b8178cba64361d8fec91f71f40434/webpack.config.ts#L66-L73

{
    // ...
    resolve: {
        ...nodeConfig.resolve,
        mainFields: ['browser', 'module', 'main'], // look for `browser` entry point in imported node modules
        fallback: {
            // eslint-disable-next-line unicorn/prefer-module
            util: require.resolve('util'),
        },
    },
}

Permalink to repo at the time having this issue: https://github.com/Antyos/vscode-openscad/tree/852e5dcb81

Can anyone offer guidance to make this work? I don't really understand Webpack all too well, so if there is a better way of doing this, I'm all ears.

[jrieken]

From my understanding, I need to polyfill TextDecoder as a Web Extension

That shouldn't be needed anymore. Modern browsers have TextDecoder (and encoder) builtin as globals: https://developer.mozilla.org/en-US/docs/Web/API/TextDecoder#browser_compatibility.

I am using this successfully in my web extensions that need it. Do you have any super special encoding requirements apart from the default ones: https://developer.mozilla.org/en-US/docs/Web/API/Encoding_API/Encodings

[Antyos]

Oh. That actually explains a lot, and (should) make things easier. I don't have any special encodings; the standard TextDecoder is fine.

How do I go about telling Webpack that TextDecoder is in util for the Node version but is in the global namespace for the web?

[jrieken]

For Node they are also global: https://nodejs.org/dist/latest-v16.x/docs/api/globals.html#textdecoder. So, no import required

[Antyos]

Oh, huh. I sure feel dumb. I think I literally spent almost a year (on and off) on this. Thank you!