[Packaging] Packed application's *.appimage or AppRun doesn't execute on double click in Linux

[KRTirtho]

Describe the Problem After packaging the application with nodegui-packer, even after a successful build the generated <app-name>.appimage or AppRun doesn't get executed after double clicking from the file-explorer.. But the application works fine if I execute using the terminal or commandline

To Reproduce Steps to reproduce the behavior:

1. Go to My Application's source code & git clone
2. run npm install; npm run build; npx nodegui-packer -p ./dist
3. Navigate to ./deploy/linux/build/<app-name> from file manager
4. Double click on the <app-name>.appimage or AppRun & suffer

Expected behavior Application's window pops up on double click in the binary/appimage

Desktop:

• OS: Linux (pop!_os)
• NodeGUI version : 0.27.0
• React NodeGUI version: 0.10.0
• OS Version: pop!_os 20.10 with linux kernel 5.8.0-7642-generic

[a7ul]

Not sure the use case

but seems like the app tries to read a file from tmp directory that doesnt exist ?

You can verify this by running the app image via commandline like so:

./deploy/linux/build/spotube/Application-x86_64.AppImage

This doesnt look like the issue caused by nodegui and hence will be closed.

[KRTirtho]

Sorry @a7ul, I mistakenly didn't push my updates to the upstream😅 thus this issue was available at that time... Please try now pulling the updates from upstream, I fixed this issue... Sorry for the hazards... But its a great project of yours Thanks for presenting this to the community❤️

[a7ul]

I tried this and could build the app and run it as expected. All I did was bump the nodegui and react nodegui to latest versions and use packer to build. You can download it here: https://gofile.io/d/3YVFJY

The app launches successfully when I launch it by double clicking or even if i execute via commandline

[KRTirtho]

Thanks, @a7ul , upgrading to latest nodegui & react-nodegui version fixed the issue. But for some reason the ScrollArea widget seems to be not working & also the BoxView is throwing error. To test if my code was wrong, I created a new test project with the react-nodegui-starter repo & updated the dependencies to latest version but the ScrollArea still doesn't work & there are no scrollbars (horizontal or vertical). The children inside the ScrollArea gets mashed into each other Code:

import { Text, Window, hot, View, ScrollArea } from "@nodegui/react-nodegui";
import React from "react";
import { QIcon } from "@nodegui/nodegui";
import { StepOne } from "./components/stepone";
import { StepTwo } from "./components/steptwo";
import nodeguiIcon from "../assets/nodegui.jpg";

const minSize = { width: 500, height: 520 };
const winIcon = new QIcon(nodeguiIcon);
class App extends React.Component {
  render() {
    const Comp = () => (
      <Text>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus quo ducimus autem ratione quasi officia sapiente. Corrupti odio dolorem ipsum obcaecati cum unde omnis. Necessitatibus qui
        officia facere doloremque dolor? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus ducimus debitis porro quasi soluta est maxime iste error, molestias quisquam. Lorem ipsum
        dolor sit amet consectetur adipisicing elit. Laborum facere libero aliquid dolorum, delectus tenetur voluptate consectetur dicta magnam. Magnam modi quas nemo totam nostrum obcaecati nesciunt
        officiis dignissimos tempore eaque quia ducimus maiores incidunt quis illum id corrupti tenetur aut repudiandae dolore,
      </Text>
    );
    return (
      <Window windowIcon={winIcon} windowTitle="Hello 👋🏽" minSize={minSize} styleSheet={styleSheet}>
        <View style={containerStyle}>
          <Text id="welcome-text">Welcome to NodeGui 🐕</Text>
          <Text id="step-1">1. Play around</Text>
          <StepOne />
          <Text id="step-2">2. Debug</Text>
          <StepTwo />
          <ScrollArea style="max-height: 200px; flex: 1;" mouseTracking>
            <View style="flex-direction: 'column';">
              {[...Array(30).keys()].map((_, i) => <Comp key={i}/>)}
            </View>
          </ScrollArea>
        </View>
      </Window>
    );
  }
}

const containerStyle = `
  flex: 1; 
  flex-direction: 'column';
  height: '100%';
`;

const styleSheet = `
  #welcome-text {
    font-size: 24px;
    padding-top: 20px;
    qproperty-alignment: 'AlignHCenter';
    font-family: 'sans-serif';
  }

  #step-1, #step-2 {
    font-size: 18px;
    padding-top: 10px;
    padding-horizontal: 20px;
  }
`;

export default hot(App);

Screenshot:

When I use BoxView instead of View the same code but with BoxView shows following error

The above error occurred in the <boxview> component:
    in boxview (created by App)
    in scrollarea (created by App)
    in boxview (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/krtirtho/development/desktop-dev/react-nodegui-test/dist/index.js:37901
      throw error;
      ^

RangeError: Maximum call stack size exceeded
    at RNBoxView.get layout [as layout] (/home/krtirtho/development/desktop-dev/react-nodegui-test/dist/index.js:17241:15)
    at RNBoxView.get layout [as layout] (/home/krtirtho/development/desktop-dev/react-nodegui-test/dist/index.js:17242:21)
    at RNBoxView.get layout [as layout] (/home/krtirtho/development/desktop-dev/react-nodegui-test/dist/index.js:17242:21)
    at RNBoxView.get layout [as layout] (/home/krtirtho/development/desktop-dev/react-nodegui-test/dist/index.js:17242:21)
    at RNBoxView.get layout [as layout] (/home/krtirtho/development/desktop-dev/react-nodegui-test/dist/index.js:17242:21)
    at RNBoxView.get layout [as layout] (/home/krtirtho/development/desktop-dev/react-nodegui-test/dist/index.js:17242:21)
    at RNBoxView.get layout [as layout] (/home/krtirtho/development/desktop-dev/react-nodegui-test/dist/index.js:17242:21)
    at RNBoxView.get layout [as layout] (/home/krtirtho/development/desktop-dev/react-nodegui-test/dist/index.js:17242:21)
    at RNBoxView.get layout [as layout] (/home/krtirtho/development/desktop-dev/react-nodegui-test/dist/index.js:17242:21)
    at RNBoxView.get layout [as layout] (/home/krtirtho/development/desktop-dev/react-nodegui-test/dist/index.js:17242:21)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-nodegui-starter@1.0.0 start: `qode ./dist/index.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the react-nodegui-starter@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/krtirtho/.npm/_logs/2021-03-07T09_16_57_387Z-debug.log

[a7ul]

@KRTirtho Can you bump the nodegui and react nodegui to latest version and try again

[KRTirtho]

Well, ScrollArea now works but for some reason View inside it isn't getting the full width even after using flex: 1; for the style of the View. Also if I don't use flex: 1; in ScrollArea nothing inside it is displayed. Code:

// App.tsx
function RealApp() {
  return (
    <Window windowIcon={winIcon} windowTitle="Hello 👋🏽" minSize={minSize} styleSheet={styleSheet}>
      <View style={containerStyle}>
        <Text id="welcome-text">Welcome to NodeGui 🐕</Text>
        <Text id="step-1">1. Play around</Text>
        <StepOne />
        <Text id="step-2">2. Debug</Text>
        <ScrollArea style="flex: 1;"> //always have to use flex: 1; in order to make it able to display itself
         // even after using flex-1 it doesn't get stretched to full
          <View style="flex: 1; flex-direction: 'column'; background-color: red; align-items: 'stretch'; justify-content: 'center';">
            <StepTwo />
            <StepTwo />
            <StepTwo />
            <StepTwo />
            <StepTwo />
            <StepTwo />
            <StepTwo />
            <StepTwo />
            <StepTwo />
          </View>
        </ScrollArea>
      </View>
    </Window>
  );
}
// style
const containerStyle = `
  flex: 1; 
  flex-direction: 'column';
  height: '100%';
`;

const styleSheet = `
  #welcome-text {
    font-size: 24px;
    padding-top: 20px;
    qproperty-alignment: 'AlignHCenter';
    font-family: 'sans-serif';
  }

  #step-1, #step-2 {
    font-size: 18px;
    padding-top: 10px;
    padding-horizontal: 20px;
  }
`;

This is how it looks with this code

I gave a bg-color to StepTwo component to visualize the difference & the red bg View should take the full space instead of taking half of the size. It seems like for some reason the View inside ScrollArea got stuck in a maximum width

[KRTirtho]

@a7ul would you kindly give me some kind of solution to the above problem. This issue still persist even after upgrading to latest version of nodegui@v0.30.2 & react-nodegui@v0.10.4. View inside ScrollArea taking only half of the size of the available space, flex: 1 or width: '100%' aren't working too