RangeError when using GridView or BoxView
cobus-meyer opened this issue · 4 comments
cobus-meyer commented
Describe the bug
I am unable to use GridView or BoxView as layout for my app. Any sort of implementation of these two layout returns RangeError: Maximum call stack size exceeded
To Reproduce
I assume this is very specific to my setup since I see no other related issues, but even if I use the featured examples of these layouts (https://react.nodegui.org/docs/guides/layout) based on the react-nodegui-starter app scaffolding I get the error.
I followed the steps as suggested on the Getting Started guide:
# Clone the repository
$ git clone https://github.com/nodegui/react-nodegui-starter
# Go into the repository
$ cd react-nodegui-starter
# Install dependencies
$ npm install
# Run the dev server
$ npm run dev
# Run the app on a separate terminal tab or window
$ npm start
I made a few changes because I need to have roslibjs installed, this included one or two additional packages, and a few changes to the webpack.config.js file:
const path = require("path");
const webpack = require("webpack");
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const nodeExternals = require('webpack-node-externals');
module.exports = (env, argv) => {
const config = {
mode: "production",
entry: ["./src/index.tsx"],
target: "node",
output: {
path: path.resolve(__dirname, "dist"),
filename: "index.js"
},
module: {
rules: [
{
test: /\.(j|t)sx?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: { cacheDirectory: true, cacheCompression: false }
}
},
{
test: /\.(png|jpe?g|gif|svg|bmp|otf)$/i,
use: [
{
loader: "file-loader",
options: { publicPath: "dist" }
}
]
},
{
test: /\.node/i,
use: [
{
loader: "native-addon-loader",
options: { name: "[name]-[hash].[ext]" }
}
]
}
]
},
plugins: [new CleanWebpackPlugin()],
resolve: {
extensions: [".tsx", ".ts", ".js", ".jsx", ".json"]
},
externals: [nodeExternals({
allowlist: ['webpack/hot/poll?1000']
})],
};
if (argv.mode === "development") {
config.mode = "development";
config.plugins.push(new ForkTsCheckerWebpackPlugin());
config.devtool = "source-map";
config.watch = true;
}
return config;
};
Desktop (please complete the following information):
- OS: Ubuntu 20.04
- NodeGUI version:
"@nodegui/nodegui": "^0.30.1" - React NodeGUI version:
"@nodegui/react-nodegui": "^0.10.2"
app.tsx file:
import {Text, Window, hot, GridView, GridRow, GridColumn} from "@nodegui/react-nodegui";
import React from "react";
class App extends React.Component {
render() {
return (
<Window>
<GridView>
<GridRow>
<GridColumn width={2}>
<Text>Can not</Text>
</GridColumn>
<GridColumn width={2}>
<Text>Use Grid</Text>
</GridColumn>
</GridRow>
<GridRow>
<GridColumn width={2}>
<Text>Can not</Text>
</GridColumn>
<GridColumn width={2}>
<Text>Use Grid</Text>
</GridColumn>
</GridRow>
</GridView>
</Window>
);
}
}
export default hot(App);
index.tsx file:
import { Renderer } from "@nodegui/react-nodegui";
import React from "react";
import App from "./app";
process.title = "My NodeGui App";
Renderer.render(<App />);
// This is for hot reloading (this will be stripped off in production by webpack)
if (module.hot) {
module.hot.accept(["./app"], function() {
Renderer.forceUpdate();
});
}
package.json:
{
"name": "react-nodegui-starter",
"version": "1.0.0",
"main": "index.js",
"author": "Atul R <atulanand94@gmail.com>",
"license": "MIT",
"private": true,
"scripts": {
"build": "webpack -p",
"dev": "webpack --mode=development --hot",
"start": "qode ./dist/index.js",
"debug": "qode --inspect ./dist/index.js"
},
"dependencies": {
"@nodegui/nodegui": "^0.30.1",
"@nodegui/react-nodegui": "^0.10.2",
"@types/roslib": "^1.1.1",
"chokidar": "^3.5.1",
"open": "^7.2.1",
"react": "^16.13.1",
"roslib": "^1.1.0"
},
"devDependencies": {
"@babel/core": "^7.11.6",
"@babel/preset-env": "^7.11.5",
"@babel/preset-react": "^7.10.4",
"@babel/preset-typescript": "^7.10.4",
"@nodegui/packer": "^1.4.1",
"@types/node": "^14.11.1",
"@types/react": "^16.9.49",
"@types/webpack-env": "^1.15.3",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"file-loader": "^6.1.0",
"fork-ts-checker-webpack-plugin": "^5.2.0",
"native-addon-loader": "^2.0.1",
"typescript": "^4.0.3",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12",
"webpack-node-externals": "^3.0.0"
}
}
npm run dev:
cobus@cobus-woot ~/workspace/arci-gui/react-nodegui-starter master ± npm run dev
> react-nodegui-starter@1.0.0 dev
> webpack --mode=development --hot
webpack is watching the files…
Hash: 61d63e2e77f642662cec
Version: webpack 4.44.2
Time: 452ms
Built at: 05/13/2021 3:30:28 PM
Asset Size Chunks Chunk Names
08ef36629f2fe40bdcbe135ae303d949.jpg 58.1 KiB [emitted] [immutable]
index.js 36 KiB main [emitted] main
index.js.map 34.2 KiB main [emitted] [dev] main
Entrypoint main = index.js index.js.map
[0] multi ./src/index.tsx 28 bytes {main} [built]
[./assets/nodegui.jpg] 59 bytes {main} [built]
[./src/app.tsx] 1.42 KiB {main} [built]
[./src/index.tsx] 381 bytes {main} [built]
[@nodegui/nodegui] external "@nodegui/nodegui" 42 bytes {main} [built]
[@nodegui/react-nodegui] external "@nodegui/react-nodegui" 42 bytes {main} [built]
[react] external "react" 42 bytes {main} [built]
Issues checking in progress...
No issues found.
Hash: 58d2bd7b2020da0cc9b2
Version: webpack 4.44.2
Time: 59ms
Built at: 05/13/2021 3:33:17 PM
Asset Size Chunks Chunk Names
61d63e2e77f642662cec.hot-update.json 46 bytes [emitted] [immutable] [hmr]
index.js 34.4 KiB main [emitted] main
index.js.map 33.1 KiB main [emitted] [dev] main
main.61d63e2e77f642662cec.hot-update.js 3.09 KiB main [emitted] [immutable] [hmr] main
main.61d63e2e77f642662cec.hot-update.js.map 1.73 KiB main [emitted] [dev] main
Entrypoint main = index.js main.61d63e2e77f642662cec.hot-update.js index.js.map main.61d63e2e77f642662cec.hot-update.js.map
[./src/app.tsx] 965 bytes {main} [built]
+ 4 hidden modules
Issues checking in progress...
No issues found.
error message:
✘ cobus@cobus-woot ~/workspace/arci-gui/react-nodegui-starter master ± npm start
> react-nodegui-starter@1.0.0 start
> qode ./dist/index.js
The above error occurred in the <gridview> component:
in gridview (created by App)
in mainwindow (created by App)
in App
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
/home/cobus/workspace/arci-gui/react-nodegui-starter/node_modules/react-reconciler/cjs/react-reconciler.development.js:1815
throw error;
^
RangeError: Maximum call stack size exceeded
at RNGridView.get layout [as layout] (/home/cobus/workspace/arci-gui/react-nodegui-starter/node_modules/@nodegui/react-nodegui/dist/components/GridView/RNGridView.js:48:15)
at RNGridView.get layout [as layout] (/home/cobus/workspace/arci-gui/react-nodegui-starter/node_modules/@nodegui/react-nodegui/dist/components/GridView/RNGridView.js:49:21)
at RNGridView.get layout [as layout] (/home/cobus/workspace/arci-gui/react-nodegui-starter/node_modules/@nodegui/react-nodegui/dist/components/GridView/RNGridView.js:49:21)
at RNGridView.get layout [as layout] (/home/cobus/workspace/arci-gui/react-nodegui-starter/node_modules/@nodegui/react-nodegui/dist/components/GridView/RNGridView.js:49:21)
at RNGridView.get layout [as layout] (/home/cobus/workspace/arci-gui/react-nodegui-starter/node_modules/@nodegui/react-nodegui/dist/components/GridView/RNGridView.js:49:21)
at RNGridView.get layout [as layout] (/home/cobus/workspace/arci-gui/react-nodegui-starter/node_modules/@nodegui/react-nodegui/dist/components/GridView/RNGridView.js:49:21)
at RNGridView.get layout [as layout] (/home/cobus/workspace/arci-gui/react-nodegui-starter/node_modules/@nodegui/react-nodegui/dist/components/GridView/RNGridView.js:49:21)
at RNGridView.get layout [as layout] (/home/cobus/workspace/arci-gui/react-nodegui-starter/node_modules/@nodegui/react-nodegui/dist/components/GridView/RNGridView.js:49:21)
at RNGridView.get layout [as layout] (/home/cobus/workspace/arci-gui/react-nodegui-starter/node_modules/@nodegui/react-nodegui/dist/components/GridView/RNGridView.js:49:21)
at RNGridView.get layout [as layout] (/home/cobus/workspace/arci-gui/react-nodegui-starter/node_modules/@nodegui/react-nodegui/dist/components/GridView/RNGridView.js:49:21)
anwar-kt commented
Did you resolve this issue ?
cobus-meyer commented
Did you resolve this issue ?
Hi Anwar, unfortunately not. I moved over to a different GUI building framework.
phungthelam1996 commented
My solution to fixed
get layout() { return this.layout; }
change this code to below in file https://github.com/nodegui/react-nodegui/blob/master/src/components/GridView/RNGridView.ts
get layout() { return this._layout; }
a7ul commented
Can you raise a pr @phungthelam1996 ?