NativeScript / NativeScript/canvas

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

Open
#134 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
C++
Stars
103
Forks
21
Avg merge
16h 10m
Merged PRs (30d)
8

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the provided index.js reproduction and inspect node_modules/@nativescript/canvas-polyfill/DOM/Element.js together with node_modules/query-selector/dist-web/index.js, where the stack trace fails. Reproduce the crash with the listed NativeScript, SolidJS, and canvas versions, then verify that importing the polyfill no longer throws the getElementsByTagName error.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
computer-graphics, mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.