RangeError when using GridView or BoxView

[cobus-meyer]

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]

Did you resolve this issue ?

[cobus-meyer]

Did you resolve this issue ?

Hi Anwar, unfortunately not. I moved over to a different GUI building framework.

[phungthelam1996]

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]

Can you raise a pr @phungthelam1996 ?