yarn electron:serve fails in Mac M1

[esafwan]

yarn electron:serve fails on Mac M1 (BigSur 11.4). The error I get is given below.

Yarn Version: 1.22.17
Node Version : v16.13.0
NPM Version : 8.1.0

INFO Starting development server...
/Users//Code/frappe_book/books2/node_modules/webpack/lib/RuleSet.js:167
throw new Error(
^

Error: Rule can only have one resource source (provided resource and test + include + exclude) in {
"type": "javascript/auto",
"include": [
{}
],
"use": []
}
at checkResourceSource (/Users/safwan/Code/frappe_book/books2/node_modules/webpack/lib/RuleSet.js:167:11)
at Function.normalizeRule (/Users/safwan/Code/frappe_book/books2/node_modules/webpack/lib/RuleSet.js:198:4)
at /Users/safwan/Code/frappe_book/books2/node_modules/webpack/lib/RuleSet.js:110:20
at Array.map ()
at Function.normalizeRules (/Users/safwan/Code/frappe_book/books2/node_modules/webpack/lib/RuleSet.js:109:17)
at new RuleSet (/Users/safwan/Code/frappe_book/books2/node_modules/webpack/lib/RuleSet.js:104:24)
at new NormalModuleFactory (/Users/safwan/Code/frappe_book/books2/node_modules/webpack/lib/NormalModuleFactory.js:115:18)
at Compiler.createNormalModuleFactory (/Users/safwan/Code/frappe_book/books2/node_modules/webpack/lib/Compiler.js:636:31)
at Compiler.newCompilationParams (/Users/safwan/Code/frappe_book/books2/node_modules/webpack/lib/Compiler.js:653:30)
at Compiler.compile (/Users/safwan/Code/frappe_book/books2/node_modules/webpack/lib/Compiler.js:661:23)
at /Users/safwan/Code/frappe_book/books2/node_modules/webpack/lib/Watching.js:77:18
at _next0 (eval at create (/Users/safwan/Code/frappe_book/books2/node_modules/tapable/lib/HookCodeFactory.js:33:10), :25:1)
at eval (eval at create (/Users/safwan/Code/frappe_book/books2/node_modules/tapable/lib/HookCodeFactory.js:33:10), :36:1)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[esafwan]

For now, I did the following:

1. Deleted the node_modules directory & yarn.lock files
2. Added "webpack": "^4.44.2" dev dependencies in package.json file as per this post.
3. Ran npm i --force command.
4. Then ran npm run electron:serve command.

The app is running now. Need to check if anything is broken.

[18alantom]

@esafwan was this on a fresh clone of books? If not did, it occur earlier?

webpack is a dependency of this plugin, so it's latest version 4 should've been there in node_modules

I noticed that you mentioned yarn above and used npm below; if you've used both in the books folder this may cause issues.

[esafwan]

1. Code was cloned yesterday and this is the first time am doing this on Apple M1 based machine.
2. I got this error 2 days back too.
3. I had to install nvm and to reinstall node using nvm. Also, as you can see I used npm instead of Yarn.
4. When using Yarn, it was not working. So after deleting node_modules and yarn.lock I ran the below two commands and it worked.

Steps, that worked which doesn't involve yarn.

1. Added "webpack": "^4.44.2" dev dependencies in package.json.
2. Ran npm i --force command.
3. Ran npm run electron:serve command.

If you are interested, I can share output of npm i and npm run electron:serve command without the webpack entry in package.json.

[18alantom]

If you are interested, I can share output of npm i and npm run electron:serve command without the webpack entry in package.json.

Yup please do. I don't have access to an M1 Mac right now but will check it once I do.

[esafwan]

I did the following without success:

1. Cloned the repo's master branch freshly.
2. Ran npm i & then npm run electron:serve

Please find the screenshots of the outputs of all commands below.

Git Clone:

NPM Install

NPM Electron Serve

[esafwan]

On another instance, I tried the same steps with yarn, please find the out put below:

Yarn command output:

yarn electron:serve Output:

Versions:

[18alantom]

@esafwan can you send me this file (yarn-error.log). I don't get the commit hash error, need to see what that is about. Checking the error log may help debug the issue.

The reason why npm ran (after setting webpack) is because there is no package-lock.json. The output is the same for yarn after removing the yarn.lock file.

But you shouldn't have to remove the lock file. This messes up things.

Thanks for sharing these!

[esafwan]

Here is the log: yarn-error.log

I am not sure if this helps, but as I play around with the code I have to exit the app and run npm run electron:serve again to get it to load again. Or else I will be staring at a blank screen. Even if I force reload. However, changes that don't have any error works just fine and reload smoothly.

[18alantom]

Thanks for the log, this seems like an unresolved issue yarn/issues/2976.

Looks like it's caused by frappejs dependency being a direct link.

I've added yarn to engines (ref), seems to have worked for a few people, let me know if it works for you.

---

However, changes that don't have any error works just fine and reload smoothly.

This is proper. But if you do type in changes that have issues, webpack will throw errors (if syntactical) else you'll find errors in the chromium console (F12).

But fixing the issues should cause it to continue working. If it doesn't you can press ⌘ 5 for refresh.

You shouldn't have to run serve again.

[esafwan]

I made a fresh clone of the project and ran the yarn command. However, I got the below error first.

I was able to successfully run yarn after I went ahead and removed both yarn & node with Homebrew. I reinstalled node with NVM and yarn with npm command.

However, it got stuck after that in the rebuilding native dependency step.

Something related to node-pre-gyp I guess.

I tried this step with no result.
https://github.com/nodejs/node-gyp/blob/master/docs/Updating-npm-bundled-node-gyp.md

[18alantom]

The electron issue (first screenshot) is cause there is arm64 was supported only from electron 11.
But this shouldn't be happening in the first place cause frappejs and books
both have v15.3 as their dependency, so why was it trying to install v5?! This is strange.

The second issue is cause sqlite3 is not building on arm64 (M1's arch).
I can't find any M1 related threads, this is the closest I found electron-builder/issues/4658 (x64 not M1).

This is mostly cause M1, I'll be getting an M1 Mac in about a month, I'll try fixing this then.
Will keep you updated. Meanwhile, if you find a fix do let me know.

[esafwan]

For now, I did the following:

1. Deleted the node_modules directory & yarn.lock files
2. Added "webpack": "^4.44.2" dev dependencies in package.json file as per this post.
3. Ran npm i --force command.
4. Then ran npm run electron:serve command.

The app is running now. Need to check if anything is broken.

These steps are working for me. I am able to develop. However, when some errors happen, I have to restart. Reload won't let you continue.

But overall better than not being able to develop at all.

[18alantom]

Update: just got an M1 laptop so was able to attend to this.

To Make Things Work

Without local frappejs:

git clone https://github.com/frappe/books
yarn upgrade frappejs
yarn electron:serve

With local frappejs:

git clone https://github.com/frappe/books
git clone https://github.com/frappe/frappejs

cd frappejs
yarn
yarn link

cd ../books
yarn upgrade frappejs
yarn link frappejs
yarn electron:serve

Sqlite3 Issue

• mapbox/node-sqlite3 doesn't provide arm64 (M1) binaries ref.
• This causes a pre-built binary not found error and then tries to build from source using node-gyp which also fails.
• Other than that, high severity vulnerabilities have not been addressed by the maintainers.

To address the above issues switched to sqlite3 to this: https://github.com/microsoft/vscode-node-sqlite3 fork, this seems to have solved this issue.

Webpack Issue

Changing the sqlite3 fork and refreshing frappejs yarn.lock to latest commit (cause else yarn fails which needs to be done before linking) caused some weird package.lock issue causing webpack to break with this issue.

None of the suggested solutions worked.

What worked was running yarn upgrade frappejs in the books repository.

The yarn.lock caused by this command has been commited but on cloning it still causes the issue, so the command yarn upgrade frappejs has to be run for things to work.

On re-running the command the yarn.lock doesn't change but things work which is very strange and I suspect is cause of some local cache not being updated until upgrade is run.

---

Closing this since local setup with frappejs is working for me on an M1 laptop.

cc @esafwan