Error in building package this example with react

[alokmahor]

I am using this example with react. My project structure is

.
├── README.md
├── build
├── dist
├── node_modules
├── osn-data
├── package-lock.json
├── package.json
├── public
├── src
├── tsconfig.json
├── yarn-error.log
└── yarn.lock

My package.json is like

{
  "name": "alok",
  "version": "0.5.0",
  "main": "public/electron.js",
  "private": true,
  "homepage": ".",
  "dependencies": {
    "react": "^17.0.1",
    "rxjs": "^6.6.6",
    "obs-studio-node": "https://obsstudionodes3.streamlabs.com/osn-0.10.10-release-win64.tar.gz"
    // ... more modules
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "electron-dev": "concurrently \"BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\"",
    "electron-local-dev": "electron .",
    "make": "electron-forge make",
    "electron-forge-start": "electron-forge start",
    "preelectron-pack": "yarn build",
    "electron-pack": "electron-builder -c.extraMetadata.main=build/electron.js",
    "postinstall": "electron-builder install-app-deps"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "electron": "^11.0.3",
    "electron-builder": "^22.9.1",
    "wait-on": "^5.2.1"
    // more modules
  },
  "config": {

  },
  "build": {
    "mac": {
      "icon": "build/icon.png"
    },
    "win": {
      "icon": "build/icon.png"
    }
  }
}

on running command yarn electron-pack I am getting error which can be seen on this iamge https://i.stack.imgur.com/jEvgm.png This error is related to app.asar path

How can I fix this?

[hrueger]

I only have little experience with react, but it would be interesting to know what package causes the problem. If you move the program to C:\myapp, the path should be shorter and visible in the error message.

[alokmahor]

Thank you for idea of moving directory to C: for shorter path. That error is at https://i.stack.imgur.com/PM8SL.png

[hrueger]

You could unpack the app.asar file using npx asar extract app.asar unpackedAsar and have a look at the package.json file. Is it valid json? Does it even exist?

[alokmahor]

Yes C:\alok\resources\app.asar.unpacked\node_modules\obs-studio-node\package.json a valid json file. Its part of obs-studio-node module. This is working fine without react.

I guess C:\alok\resources\app.asar.unpacked\node_modules\obs-studio-node\package.json should be path ineasted of C:\alok\resources\app.asar\node_modules\obs-studio-node\package.json to make it work. Dont know what electron-builder is doing

[hrueger]

Hm, I'm sorry, I believe this is a react specific problem if it works fine without it. For Angular I had to create a custom webpack configuration, however, I don't specify anything about osn here.

[alokmahor]

setting "asar": false in build config is solving my problem :) Thank you @hrueger

[hrueger]

Great. However, using asar is recommended as it reduces the number of files quite a bit. You can try adding obs-studio-node? to theasarUnpack` configuration property like descriped here: https://www.electron.build/generated/platformspecificbuildoptions

[alokmahor]

I was using electron 11.0.3. this version have some bug that is why installer was failing according to https://github.com/electron/electron/issues/25438

Now I am using electron 11.1.0 for which installer is working fine