WIP Upgrade from Node 10 to Node 20

[benfrancis]

This is a work in progress PR to upgrade Node.js from version 10 to version 20 (the latest LTS) as per #3134.

So far I have just bumped the version in .nvmrc, run npm install to regenrate package-lock.json, run npm update to do minor version upgrades to dependencies and applied one small TypeScript fix.

Ideally I would like to update all dependencies to their latest versions as per npm outdated, but first there are bunch more TypeScript errors to fix when you run npm start (which runs the TypeScript compiler).

Any help would be appreciated.

[benfrancis]

The next batch of TypeScript compile errors to fix:

> rm -rf build && cp -rL src build && find build -name '*.ts' -delete && tsc -p . && webpack

node_modules/@types/eventsource/dom-monkeypatch.d.ts:42:14 - error TS2717: Subsequent property declarations must have the same type.  Property 'AT_TARGET' must be of type 'number', but here has type '2'.

42     readonly AT_TARGET: 2;
                ~~~~~~~~~

  node_modules/typescript/lib/lib.dom.d.ts:5221:14
    5221     readonly AT_TARGET: number;
                      ~~~~~~~~~
    'AT_TARGET' was also declared here.

node_modules/@types/eventsource/dom-monkeypatch.d.ts:43:14 - error TS2717: Subsequent property declarations must have the same type.  Property 'BUBBLING_PHASE' must be of type 'number', but here has type '3'.

43     readonly BUBBLING_PHASE: 3;
                ~~~~~~~~~~~~~~

  node_modules/typescript/lib/lib.dom.d.ts:5222:14
    5222     readonly BUBBLING_PHASE: number;
                      ~~~~~~~~~~~~~~
    'BUBBLING_PHASE' was also declared here.

node_modules/@types/eventsource/dom-monkeypatch.d.ts:44:14 - error TS2717: Subsequent property declarations must have the same type.  Property 'CAPTURING_PHASE' must be of type 'number', but here has type '1'.

44     readonly CAPTURING_PHASE: 1;
                ~~~~~~~~~~~~~~~

  node_modules/typescript/lib/lib.dom.d.ts:5223:14
    5223     readonly CAPTURING_PHASE: number;
                      ~~~~~~~~~~~~~~~
    'CAPTURING_PHASE' was also declared here.

node_modules/@types/eventsource/dom-monkeypatch.d.ts:45:14 - error TS2717: Subsequent property declarations must have the same type.  Property 'NONE' must be of type 'number', but here has type '0'.

45     readonly NONE: 0;
                ~~~~

  node_modules/typescript/lib/lib.dom.d.ts:5224:14
    5224     readonly NONE: number;
                      ~~~~
    'NONE' was also declared here.

node_modules/webdriverio/build/commands/element/getProperty.d.ts:23:177 - error TS2304: Cannot find name 'CheckVisibilityOptions'.

23 } | NamedNodeMap | DOMTokenList | ((this: Element, ev: Event) => any) | ((this: Element, ev: Event) => any) | ShadowRoot | ((init: ShadowRootInit) => ShadowRoot) | ((options?: CheckVisibilityOptions | undefined) => boolean) | {
                                                                                                                                                                                   ~~~~~~~~~~~~~~~~~~~~~~

node_modules/webdriverio/build/commands/element/getProperty.d.ts:26:24 - error TS2552: Cannot find name 'MathMLElementTagNameMap'. Did you mean 'HTMLElementTagNameMap'?

26     <K_4 extends keyof MathMLElementTagNameMap>(selector: K_4): MathMLElementTagNameMap[K_4] | null;
                          ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/webdriverio/build/commands/element/getProperty.d.ts:26:65 - error TS2552: Cannot find name 'MathMLElementTagNameMap'. Did you mean 'HTMLElementTagNameMap'?

26     <K_4 extends keyof MathMLElementTagNameMap>(selector: K_4): MathMLElementTagNameMap[K_4] | null;
                                                                   ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/webdriverio/build/commands/element/getProperty.d.ts:28:12 - error TS2304: Cannot find name 'StylePropertyMapReadOnly'.

28 } | (() => StylePropertyMapReadOnly) | ((qualifiedName: string) => string | null) | ((namespace: string | null, localName: string) => string | null) | (() => string[]) | ((qualifiedName: string) => Attr | null) | ((namespace: string | null, localName: string) => Attr | null) | (() => DOMRectList) | ((classNames: string) => HTMLCollectionOf<Element>) | {
              ~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/webdriverio/build/commands/element/getProperty.d.ts:31:24 - error TS2552: Cannot find name 'MathMLElementTagNameMap'. Did you mean 'HTMLElementTagNameMap'?

31     <K_7 extends keyof MathMLElementTagNameMap>(qualifiedName: K_7): HTMLCollectionOf<MathMLElementTagNameMap[K_7]>;
                          ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/webdriverio/build/commands/element/getProperty.d.ts:31:87 - error TS2552: Cannot find name 'MathMLElementTagNameMap'. Did you mean 'HTMLElementTagNameMap'?

31     <K_7 extends keyof MathMLElementTagNameMap>(qualifiedName: K_7): HTMLCollectionOf<MathMLElementTagNameMap[K_7]>;
                                                                                         ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/webdriverio/build/commands/element/getProperty.d.ts:51:25 - error TS2552: Cannot find name 'MathMLElementTagNameMap'. Did you mean 'HTMLElementTagNameMap'?

51     <K_11 extends keyof MathMLElementTagNameMap>(selectors: K_11): MathMLElementTagNameMap[K_11] | null;
                           ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/webdriverio/build/commands/element/getProperty.d.ts:51:68 - error TS2552: Cannot find name 'MathMLElementTagNameMap'. Did you mean 'HTMLElementTagNameMap'?

51     <K_11 extends keyof MathMLElementTagNameMap>(selectors: K_11): MathMLElementTagNameMap[K_11] | null;
                                                                      ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/webdriverio/build/commands/element/getProperty.d.ts:57:25 - error TS2552: Cannot find name 'MathMLElementTagNameMap'. Did you mean 'HTMLElementTagNameMap'?

57     <K_15 extends keyof MathMLElementTagNameMap>(selectors: K_15): NodeListOf<MathMLElementTagNameMap[K_15]>;
                           ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/webdriverio/build/commands/element/getProperty.d.ts:57:79 - error TS2552: Cannot find name 'MathMLElementTagNameMap'. Did you mean 'HTMLElementTagNameMap'?

57     <K_15 extends keyof MathMLElementTagNameMap>(selectors: K_15): NodeListOf<MathMLElementTagNameMap[K_15]>;
                                                                                 ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/webdriverio/build/commands/element/getProperty.d.ts:60:65 - error TS2304: Cannot find name 'StylePropertyMap'.

60 } | ((...nodes: (string | Node)[]) => void) | HTMLSlotElement | StylePropertyMap | CSSStyleDeclaration | DOMStringMap | undefined>;
                                                                   ~~~~~~~~~~~~~~~~


Found 15 errors in 2 files.

Errors  Files
     4  node_modules/@types/eventsource/dom-monkeypatch.d.ts:42
    11  node_modules/webdriverio/build/commands/element/getProperty.d.ts:23

[tim-hellhake]

You also want to update this: https://github.com/WebThingsIO/gateway/blob/master/.github/workflows/build.yml#L21

[benfrancis]

Update: npm ci and npm start now execute successfully but the front end fails to start, with the following error in the browser console:

Uncaught ReferenceError: exports is not defined
    76204 b7dca6ee7ecbed09bad8-setup-subdomain.js:1

I suspect this may be caused by webpack since it seems to come up when people configure webpack for a Node.js target but the code is meant to run in a web browser. Our webpack configuration was working before, so it's possible there's some problem with the newer version of webpack. I tried downgrading the webpack, webpack-cli and html-webpack-plugin back to where they were before, but I still get the same error.

Edit: Could also be to do with module imports or TypeScript configuration

[benfrancis]

Closing in favour of #3176