Importing 'canvas-polyfill' crashes on 'div.getElementsByTagName' when using 'solid-js'

从提供的 index.js 复现开始，检查 node_modules/@nativescript/canvas-polyfill/DOM/Element.js 以及 node_modules/query-selector/dist-web/index.js，stack trace 就是在这里失败的。使用列出的 NativeScript、SolidJS 和 canvas 版本复现崩溃，然后验证导入 polyfill 不再抛出 getElementsByTagName 错误。

I was trying to get Phaser working with 1.1.0, but it failed with this.parent.getBoundingClientRect is not a function. Digging further and testing I saw that there were new versions of canvas, so I updated them all to 2.0.0-rc.11

However, I ran into similar issues. Here is the log:

Restarting application on device emulator-5554...
  [DOMiNATIVE] Force making Span element based on TextBase.
  [DOMiNATIVE] Force making Span element based on ViewBase.
  [UNDOM-NG] Element type 'div' is not registered.
  [DOMiNATIVE][COMMENT]
  System.err: An uncaught Exception occurred on "main" thread.
  System.err: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Error calling module function
  System.err: TypeError: div.getElementsByTagName is not a function
  System.err: File: (file: src/webpack:/app/webpack/bootstrap:27:0)
  System.err:
  System.err: StackTrace:
  System.err: ./node_modules/query-selector/dist-web/index.js(file: src/webpack:/app/node_modules/query-selector/dist-web/index.js:164:0)
  System.err:   at __webpack_require__(file: src/webpack:/app/webpack/bootstrap:24:0)
  System.err:   at fn(file: src/webpack:/app/webpack/runtime/hot module replacement:61:0)
  System.err:   at ./node_modules/@nativescript/canvas-polyfill/DOM/Element.js(file:///data/data/org.nativescript.mobilesolid/files/app/vendor.js:1657:72)
  System.err:   at __webpack_require__(file: src/webpack:/app/webpack/bootstrap:24:0)
  System.err:   at fn(file: src/webpack:/app/webpack/runtime/hot module replacement:61:0)
  System.err:   at ./node_modules/@nativescript/canvas-polyfill/index.js(file:///data/data/org.nativescript.mobilesolid/files/app/vendor.js:6894:70)
  System.err:   at __webpack_require__(file: src/webpack:/app/webpack/bootstrap:24:0)
  System.err:   at fn(file: src/webpack:/app/webpack/runtime/hot module replacement:61:0)
  System.err:   at ./src/index.js(file:///data/data/org.nativescript.mobilesolid/files/app/bundle.js:212:87)
  System.err:   at __webpack_require__(file: src/webpack:/app/webpack/bootstrap:24:0)
  System.err:   at __webpack_exec__(file:///data/data/org.nativescript.mobilesolid/files/app/bundle.js:361:39)
  System.err:   at (file:///data/data/org.nativescript.mobilesolid/files/app/bundle.js:362:318)
  System.err:   at __webpack_require__.X(file: src/webpack:/app/webpack/runtime/startup entrypoint:6:0)
  System.err:   at (file:///data/data/org.nativescript.mobilesolid/files/app/bundle.js:362:47)
  System.err:   at (file:///data/data/org.nativescript.mobilesolid/files/app/bundle.js:367:3)
  System.err:   at require(:1:266)
  System.err:
  System.err:
  System.err: TypeError: div.getElementsByTagName is not a function
  System.err:
  System.err: StackTrace:
  System.err: ./node_modules/query-selector/dist-web/index.js(file: src/webpack:/app/node_modules/query-selector/dist-web/index.js:164:0)
  System.err:   at __webpack_require__(file: src/webpack:/app/webpack/bootstrap:24:0)
  System.err:   at fn(file: src/webpack:/app/webpack/runtime/hot module replacement:61:0)
  System.err:   at ./node_modules/@nativescript/canvas-polyfill/DOM/Element.js(file:///data/data/org.nativescript.mobilesolid/files/app/vendor.js:1657:72)
  System.err:   at __webpack_require__(file: src/webpack:/app/webpack/bootstrap:24:0)
  System.err:   at fn(file: src/webpack:/app/webpack/runtime/hot module replacement:61:0)
  System.err:   at ./node_modules/@nativescript/canvas-polyfill/index.js(file:///data/data/org.nativescript.mobilesolid/files/app/vendor.js:6894:70)
  System.err:   at __webpack_require__(file: src/webpack:/app/webpack/bootstrap:24:0)
  System.err:   at fn(file: src/webpack:/app/webpack/runtime/hot module replacement:61:0)
  System.err:   at ./src/index.js(file:///data/data/org.nativescript.mobilesolid/files/app/bundle.js:212:87)
  System.err:   at __webpack_require__(file: src/webpack:/app/webpack/bootstrap:24:0)
  System.err:   at __webpack_exec__(file:///data/data/org.nativescript.mobilesolid/files/app/bundle.js:361:39)
  System.err:   at (file:///data/data/org.nativescript.mobilesolid/files/app/bundle.js:362:318)
  System.err:   at __webpack_require__.X(file: src/webpack:/app/webpack/runtime/startup entrypoint:6:0)
  System.err:   at (file:///data/data/org.nativescript.mobilesolid/files/app/bundle.js:362:47)
  System.err:   at (file:///data/data/org.nativescript.mobilesolid/files/app/bundle.js:367:3)
  System.err:   at require(:1:266)
  System.err:   at __webpack_require__(file: src/webpack:/app/webpack/bootstrap:24:0)
  System.err:   at fn(file: src/webpack:/app/webpack/runtime/hot module replacement:61:0)
  System.err:   at ./node_modules/@nativescript/canvas-polyfill/DOM/Element.js(file:///data/data/org.nativescript.mobilesolid/files/app/vendor.js:1657:72)
  System.err:   at __webpack_require__(file: src/webpack:/app/webpack/bootstrap:24:0)
  System.err:   at fn(file: src/webpack:/app/webpack/runtime/hot module replacement:61:0)
  System.err:   at ./node_modules/@nativescript/canvas-polyfill/index.js(file:///data/data/org.nativescript.mobilesolid/files/app/vendor.js:6894:70)
  System.err:   at __webpack_require__(file: src/webpack:/app/webpack/bootstrap:24:0)
  System.err:   at fn(file: src/webpack:/app/webpack/runtime/hot module replacement:61:0)
  System.err:   at ./src/index.js(file:///data/data/org.nativescript.mobilesolid/files/app/bundle.js:212:87)
  System.err:   at __webpack_require__(file: src/webpack:/app/webpack/bootstrap:24:0)
  System.err:   at __webpack_exec__(file:///data/data/org.nativescript.mobilesolid/files/app/bundle.js:361:39)
  System.err:   at (file:///data/data/org.nativescript.mobilesolid/files/app/bundle.js:362:318)
  System.err:   at __webpack_require__.X(file: src/webpack:/app/webpack/runtime/startup entrypoint:6:0)
  System.err:   at (file:///data/data/org.nativescript.mobilesolid/files/app/bundle.js:362:47)
  System.err:   at (file:///data/data/org.nativescript.mobilesolid/files/app/bundle.js:367:3)
  System.err:   at require(:1:266)
  System.err:
  System.err:
  System.err: TypeError: div.getElementsByTagName is not a function
  System.err:   at android.app.ActivityThread.handleBindApplication(ActivityThread.java:6730)
  System.err:   at android.app.ActivityThread.access$1500(ActivityThread.java:247)
  System.err:   at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2053)
  System.err:   at android.os.Handler.dispatchMessage(Handler.java:106)
  System.err:   at android.os.Looper.loopOnce(Looper.java:201)
  System.err:   at android.os.Looper.loop(Looper.java:288)
  System.err:   at android.app.ActivityThread.main(ActivityThread.java:7839)
  System.err:   at java.lang.reflect.Method.invoke(Native Method)
  System.err:   at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:548)
  System.err:   at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1003)
  System.err: Caused by: com.tns.NativeScriptException: Error calling module function
  System.err: TypeError: div.getElementsByTagName is not a function
  System.err: File: (file: src/webpack:/app/webpack/bootstrap:27:0)
  System.err:
  System.err: StackTrace:
  System.err: ./node_modules/query-selector/dist-web/index.js(file: src/webpack:/app/node_modules/query-selector/dist-web/index.js:164:0)
  System.err:   at __webpack_require__(file: src/webpack:/app/webpack/bootstrap:24:0)
  System.err:   at fn(file: src/webpack:/app/webpack/runtime/hot module replacement:61:0)
  System.err:   at ./node_modules/@nativescript/canvas-polyfill/DOM/Element.js(file:///data/data/org.nativescript.mobilesolid/files/app/vendor.js:1657:72)
  System.err:   at __webpack_require__(file: src/webpack:/app/webpack/bootstrap:24:0)
  System.err:   at fn(file: src/webpack:/app/webpack/runtime/hot module replacement:61:0)
  System.err:   at ./node_modules/@nativescript/canvas-polyfill/index.js(file:///data/data/org.nativescript.mobilesolid/files/app/vendor.js:6894:70)
  System.err:   at __webpack_require__(file: src/webpack:/app/webpack/bootstrap:24:0)
  System.err:   at fn(file: src/webpack:/app/webpack/runtime/hot module replacement:61:0)
  System.err:   at ./src/index.js(file:///data/data/org.nativescript.mobilesolid/files/app/bundle.js:212:87)
  System.err:   at __webpack_require__(file: src/webpack:/app/webpack/bootstrap:24:0)
  System.err:   at __webpack_exec__(file:///data/data/org.nativescript.mobilesolid/files/app/bundle.js:361:39)
  System.err:   at (file:///data/data/org.nativescript.mobilesolid/files/app/bundle.js:362:318)
  System.err:   at __webpack_require__.X(file: src/webpack:/app/webpack/runtime/startup entrypoint:6:0)
  System.err:   at (file:///data/data/org.nativescript.mobilesolid/files/app/bundle.js:362:47)
  System.err:   at (file:///data/data/org.nativescript.mobilesolid/files/app/bundle.js:367:3)
  System.err:   at require(:1:266)
  System.err:
  System.err:
  System.err: TypeError: div.getElementsByTagName is not a function
  System.err:   at com.tns.Runtime.runModule(Native Method)
  System.err:   at com.tns.Runtime.runModule(Runtime.java:689)
  System.err:   at com.tns.Runtime.run(Runtime.java:681)
  System.err:   at com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:21)
  System.err:   at android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1211)
  System.err:   at android.app.ActivityThread.handleBindApplication(ActivityThread.java:6725)
  System.err:   ... 9 more

And here is the bootstrapped code to reproduce.

index.js

import { Application } from '@nativescript/core';
import { Canvas } from '@nativescript/canvas';
import '@nativescript/canvas-polyfill'; // tried to move this before/after other imports as well
import { render } from '@nativescript-community/solid-js'
import { registerElement } from "dominative";

import { App } from './app'

registerElement("canvas", Canvas);

Application.run({
  create: () => {
    document.body.actionBarHidden = true;
    render(() => <App />, document.body)
    return document;
  },
})

app.tsx

import { Route, RouteDefinition, StackRouter } from 'solid-navigation'
import Home from './components/home'

declare module 'solid-navigation' {
  export interface Routers {
    Default: {
      Home: RouteDefinition
    }
  }
}


const App = () => {
  return (
    <StackRouter initialRouteName="Home">
      <Route name="Home" component={Home} />
    </StackRouter>
  )
}

export { App }

home.tsx

import { useRoute } from 'solid-navigation';
import { Canvas } from "@nativescript/canvas";

export default function Home() {
	const route = useRoute();
	const message = 'Blank SolidJS App'
	let canvasRef: any;

	const canvasReady = (args: any) => {
		console.log("Canvas ready!");
		console.log(canvasRef);
		console.log(canvasRef.getBoundingClientRect());

		const canvas = args.object;
		const ctx = canvasRef.getContext('2d') as CanvasRenderingContext2D;
		ctx.fillStyle = 'purple';
		ctx.fillRect(0, 0, 100, 100);
	}

	return (
		<>
		  <flexboxlayout style="width: 100%; height: 100%; flexDirection: column;">
				<canvas ref={canvasRef}
					id="canvas"
				        style="flexGrow: 1;"
					width="100%"
					height="100%"
					on:ready={canvasReady}
				/>
			</flexboxlayout>
		</>
	)
}

package.json

{
  "name": "mobile-solid",
  "main": "src/index.js",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@nativescript-community/solid-js": "^0.1.1",
    "@nativescript/canvas": "^2.0.0-rc.11",
    "@nativescript/canvas-media": "^2.0.0-rc.11",
    "@nativescript/canvas-phaser": "^2.0.0-rc.11",
    "@nativescript/canvas-polyfill": "^2.0.0-rc.11",
    "@nativescript/core": "~8.9.0",
    "dominative": "^0.1.3",
    "solid-js": "^1.8.21",
    "solid-navigation": "1.0.0-alpha.16",
    "undom-ng": "^1.1.2"
  },
  "devDependencies": {
    "@babel/core": "^7.24.4",
    "@babel/preset-env": "^7.24.4",
    "@babel/preset-typescript": "^7.23.3",
    "@nativescript-dom/core-types": "1.0.29",
    "@nativescript-dom/solidjs-types": "1.0.23",
    "@nativescript/android": "8.9.1",
    "@nativescript/types": "~8.9.0",
    "@nativescript/webpack": "~5.0.0",
    "babel": "^6.23.0",
    "babel-loader": "^9.1.3",
    "babel-preset-solid": "^1.8.19",
    "solid-refresh": "^0.7.5",
    "typescript": "~5.4.0"
  },
  "scripts": {}
}