canvas
canvas copied to clipboard
NativeScript
Importing 'canvas-polyfill' crashes on 'div.getElementsByTagName' when using 'solid-js'
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": {}
}
