Cannot find module package.json with Electron + Strapi v4 - node.js

Question

I am experiencing a problem creating a boilerplate with Electron and Strapi CMS, with the Strapi v4 only.
A similar boilerplate already exist for Strapi v3 at the following url https://github.com/afdallismen/electron-strapi-boilerplate and it works fine.
So I made some changes and I made a similar one with Strapi v4: https://github.com/AsoStrife/Strapi-V4-Electron-Boilerplate
Here my two main files:
package.json:
{
"name": "Strapi-V4-Electron-Boilerplate",
"version": "1.0.0",
"description": "A minimal Electron application with Strapi v4",
"main": "main.js",
"scripts": {
"strapi-start": "strapi start",
"strapi-develop": "strapi develop",
"strapi-build": "strapi build",
"electron": "electron .",
"electron-build": "electron-builder",
"build": "strapi build && electron-builder"
},
"keywords": [
"Electron",
"Strapi",
"Boilerplate",
"CMS"
],
"author": "Andrea Corriga",
"license": "MIT",
"dependencies": {
"#strapi/plugin-i18n": "4.3.0",
"#strapi/plugin-users-permissions": "4.3.0",
"#strapi/strapi": "4.3.2",
"better-sqlite3": "7.4.6",
"electron-is-dev": "^2.0.0",
"electron-is-packaged": "^1.0.2"
},
"devDependencies": {
"electron": "^19.0.8",
"electron-builder": "^22.14.5"
},
"strapi": {
"uuid": "23376639-3e73-4487-812b-a57332ff6859"
},
"engines": {
"node": ">=12.x.x <=16.x.x",
"npm": ">=6.0.0"
}
}
and main.js
const { app, BrowserWindow } = require('electron')
const path = require('path')
const Strapi = require('#strapi/strapi')
const isPackaged = require('electron-is-packaged')
const strapi = Strapi()
if (isPackaged) {
const fs = require('fs')
const path = require('path')
const appPath = path.join(app.getPath('home'), app.getName())
const requiredFolderPaths = {
database: path.join(appPath, 'database'),
public: path.join(appPath, 'public'),
uploads: path.join(appPath, 'public', 'uploads'),
}
Object.values(requiredFolderPaths).forEach((folderPath) => {
if (!fs.existsSync(folderPath)) {
fs.mkdirSync(folderPath, { recursive: true });
}
})
}
process.env.NODE_ENV = isPackaged ? 'production' : 'development';
process.env.BROWSER = 'none';
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
preload: path.join(__dirname, 'preload.js')
}
})
win.maximize()
win.webContents.openDevTools()
strapi
.start()
.then(() => {
win.loadURL('http://localhost:1337/admin');
//win.loadFile('index.html')
})
.catch((err) => {
console.error(err)
})
win.on('closed', () => {
app.quit();
})
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
So where's the problem?
If I run npm run electron it works perfectly, Electron opens correctly, with Strapi UI, a working DB and API accessible by localhost.
But if I run npm run build or npm run electron-build I generate a Strapi-V4-Electron-Boilerplate.exe but it doesn't work.
It gives me this error and I don't know how to debug. All dependencies are correct (I suppose, since with the npm run electron command everything works.
Has anyone experienced similar problems? Do you have any idea how to debug this problem to figure out what is not working?
Update 05/08/2022 [DD/MM/YYYY]
The solution is to change the strapi constructor
const strapi = Strapi({
appDir: `${__dirname}/`,
})
In Strapi v4 the parameter is appDir instead of dir in v3.
Once the app is built, if you try to run the executable (eg..exe) and the app crashes on startup you may need to copy and paste the .envfile inside the folder where the executable is located.
So if your .exe is located on ./dist/win-unpacked copy the .env-example into that folder and rename it in .env. This file follow the Strapi guideline. Check out strapi's documentation to learn more.