RangeError when using GridView or BoxView#348
Description
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 <[email protected]>", "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 > [email protected] 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 > [email protected] 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)