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

Đang mở

#134 mở ngày 12/6/2025 1 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó: 4/5
Thời gian dự kiến: 3-5 ngày
Mức phù hợp với người mới: 25/100

Loại issue: Lỗi
Độ rõ ràng: Khá rõ ràng
Mức độ hoạt động: Đình trệ
Công nghệ: javascript, typescript
Lĩnh vực: computer-graphics, mobile-dev

Hướng nghiên cứu

Bắt đầu với bản tái hiện index.js được cung cấp và kiểm tra node_modules/@nativescript/canvas-polyfill/DOM/Element.js cùng với node_modules/query-selector/dist-web/index.js, nơi stack trace bị lỗi. Tái hiện crash bằng các phiên bản NativeScript, SolidJS và canvas được liệt kê, sau đó xác minh rằng việc import polyfill không còn gây ra lỗi getElementsByTagName.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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": {}
}

Ngôn ngữ chính: C++
Star: 103
Fork: 21
Merge trung bình: 16 giờ 10 phút
Pull request đã merge (30 ngày): 8

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
Fork repository và làm thay đổi trên một nhánh.
Mở pull request có tham chiếu số hiệu của issue.

Issue khác của NativeScript/canvas

Gamepad Đang mở

enhancement

Độ khó 5/5 Hơn một tuần Mức phù hợp với người mới 30/100

NativeScript/canvas#139 · Mở ngày 27/4/2026
NAPI Support Đang mở

enhancement

Độ khó 5/5 Hơn một tuần Mức phù hợp với người mới 15/100

NativeScript/canvas#131 · 1 reaction · Mở ngày 20/11/2024
VisionOS Support Đang mở

Canvas enhancement

Độ khó 5/5 Hơn một tuần Mức phù hợp với người mới 15/100

NativeScript/canvas#130 · 1 reaction · Mở ngày 20/11/2024
HardwareBuffer & IOSurface Đang mở

Canvas enhancement

Độ khó 5/5 Hơn một tuần Mức phù hợp với người mới 25/100

NativeScript/canvas#129 · 1 reaction · Mở ngày 20/11/2024
Not supported for Mac Catalyst Đang mở

enhancement

Độ khó 5/5 Hơn một tuần Mức phù hợp với người mới 25/100

NativeScript/canvas#122 · Mở ngày 28/6/2024

Tất cả issue của NativeScript/canvas

Issue tương tự

Mute ydb/tests/fq/streaming/test_udfs.py.TestUdfsUsage.test_dynamic_udf in main Đang mở

ai_reviewed

Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 68/100

ydb-platform/ydb#53869 · 3 bình luận · Mở ngày 23/9/2026
[TC-MEDIAFILEMANAGEMENT-2.1] TH crashes while sending file data over BDX. Đang mở

bug cert blocker needs triage

Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 82/100

project-chip/connectedhomeip#74373 · Mở ngày 23/9/2026
[request] tracy/0.14.1 Đang mở

upstream update

Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 75/100

conan-io/conan-center-index#31035 · Mở ngày 23/9/2026
Liberty - Unlawful Orders - no transformation type for Javelineer Đang mở

Bug

Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 68/100

wesnoth/wesnoth#11592 · Mở ngày 23/9/2026
[Doc]: Feedback for `/en/latest/user_guide/support_matrix/supported_models.html` Đang mở

documentation

Độ khó 1/5 Dưới một giờ Mức phù hợp với người mới 85/100

vllm-project/vllm-ascend#17329 · Mở ngày 23/9/2026

Thêm issue về C++