Comments (25)
@saltyshiomix's PR fixes the issue!
I found that electron-rebuild
isn't necessary, though. See boneskull/nextron-serialport@c16805e
TL;DR: configure electron-builder
to have option buildDependenciesFromSource = true
from nextron.
I guess I can put that config in electron-builder.yml
instead, but same idea.
from nextron.
I have never used electron-rebuild
, but electron-builder
always worked for me.
try electron-builder install-app-deps
, if you haven't already.
Or
add it as a postinstall
script
from nextron.
The steps I took here:
- Use
npx nextron init
to create a new thing - Run
npm install
in resulting dir - Install my dependency (which uses
serialport
as a dependency, containing the native module) - Add
import
statement to source code - Run
npm run dev
which shows the first error - I had to add
electronVersion: 5.0.6
toelectron-builder.yml
npx electron-builder install-app-deps
results in the first paste above- First error shown above (again) in app (no change)
- Run
npx electron-rebuild
; completes successfully, but results in the second error shown above
from nextron.
@saltyshiomix see https://github.com/boneskull/nextron-serialport for example
from nextron.
serialport is a Node.js module. It can't be used in the browser.
There's nothing special about serialport
other than it contains a native module (specifically, @serialport/bindings).
If we want to use server side scripts in the electron architecture, we must use the server scripts in the main process, not the renderer process.
I don't think that's right. As of Electron v5, using new BrowserWindow({webPreferences: {nodeIntegration: true}})
enables use of Node.js modules. IIRC prior to this version, it was enabled by default.
For example, I can do this in an index.html
loaded by BrowserWindow#load
:
<!DOCTYPE html>
<html>
<body>
<div class="container">
<ul id="ports"></ul>
</div>
</body>
<script>
(async () => {
const ports = await require('serialport').list();
ports.forEach(({comName}) => {
const li = document
.getElementById('ports')
.appendChild(document.createElement('li'));
li.textContent = comName;
});
})();
</script>
</html>
Result:
I think because in nextron
, the Next.js development server is actually serving the pages used by the renderer process, this is not possible to do. Does this sound right?
from nextron.
I think it's the best way to use server scripts whithin the main process if we want to use Next.js as the renderer process.
from nextron.
That's also the conclusion I've come to. thanks for helping!
from nextron.
Thank you for your issues!
If you can, please let me know more details?
Your error message is apparently the difference between NODE_MODULE_VERSION 70 and 72.
from nextron.
I have never been to create electron apps with custom native node binary, but I believe it is possible to do that.
from nextron.
will get back with steps to reproduce—maybe it’s something obvious, since i’m not too familiar with electron.
from nextron.
From console, the command below is checking your native dependencies are always matched electron version:
(as @hadeeb said)
$ npx electron-builder install-app-deps
from nextron.
Nextron v5 is out!
Still same error?
$ npm install --global nextron@latest
from nextron.
> electron-builder install-app-deps
• electron-builder version=21.0.15
• loaded configuration file=/Users/boneskull/projects/nextron-test/electron-builder.yml
• rebuilding native dependencies dependencies=@serialport/[email protected] platform=darwin arch=x64
• install prebuilt binary name=@serialport/bindings version=2.0.8 platform=darwin arch=x64
• build native dependency from sources name=@serialport/bindings
version=2.0.8
platform=darwin
arch=x64
reason=prebuild-install failed with error (run with env DEBUG=electron-builder to get more information)
error=prebuild-install info begin Prebuild-install version 5.3.0
prebuild-install WARN install prebuilt binaries enforced with --force!
prebuild-install WARN install prebuilt binaries may be out of date!
prebuild-install info looking for cached prebuild @ /Users/boneskull/.npm/_prebuilds/73d12e-bindings-v2.0.8-electron-v70-darwin-x64.tar.gz
prebuild-install http request GET https://github.com/node-serialport/node-serialport/releases/download/v2.0.8/bindings-v2.0.8-electron-v70-darwin-x64.tar.gz
prebuild-install http 404 https://github.com/node-serialport/node-serialport/releases/download/v2.0.8/bindings-v2.0.8-electron-v70-darwin-x64.tar.gz
prebuild-install WARN install No prebuilt binaries found (target=5.0.6 runtime=electron arch=x64 libc= platform=darwin)
added 1221 packages from 632 contributors and audited 24062 packages in 27.001s
found 0 vulnerabilities
It's obviously trying to use some prebuilt binary, which won't work. I get something like this:
The module '/Users/boneskull/projects/nextron-test/node_modules/@serialport/bindings/build/Release/bindings.node' was compiled against a different Node.js version using NODE_MODULE_VERSION 43. This version of Node.js requires NODE_MODULE_VERSION 72. Please try re-compiling or re-installing the module (for instance, using `npm rebuild` or `npm install`).
I'm not sure how to make electron-builder
do what I want here... it's not very helpful.
Trying the recommended electron-rebuild
--which builds from source--results in the app displaying the original error:
The module '/Users/boneskull/projects/nextron-test/node_modules/@serialport/bindings/build/Release/bindings.node' was compiled against a different Node.js version using NODE_MODULE_VERSION 70. This version of Node.js requires NODE_MODULE_VERSION 72. Please try re-compiling or re-installing the module (for instance, using `npm rebuild` or `npm install`).
What version of Node.js should I be running these commands with? Should it matter?
from nextron.
OK, I think I have an idea of what the problem is. The problem is that (correct me if I'm wrong) next
is running its dev server using node
. The native module is built using electron-rebuild
or electron-builder
or any other various commands; it only works in electron, which has NODE_MODULE_VERSION=70
.
Node.js, OTOH, has NODE_MODULE_VERSION=72
since 11.x. It has no version 70. Electron has its own NODE_MODULE_VERSION
numbers, as does Node.js, and they not the same (reference).
However, you can use ELECTRON_RUN_AS_NODE=1 nextron dev
to run next
as electron (somehow) and get a different runtime problem:
[ wait ] starting the development server ...
[ info ] waiting on http://localhost:8888 ...
Defining routes from exportPathMap
[ ready ] compiled successfully - ready on http://localhost:8888
[ wait ] compiling ...
[ ready ] compiled successfully - ready on http://localhost:8888
DONE Compiled successfully in 167ms 10:03:06 PM
/Users/boneskull/projects/nextron-test-js/app/background.js:115
const userDataPath = electron__WEBPACK_IMPORTED_MODULE_0__["app"].getPath('userData');
^
TypeError: Cannot read property 'getPath' of undefined
at Module../main/background.js (/Users/boneskull/projects/nextron-test-js/app/background.js:115:69)
at __webpack_require__ (/Users/boneskull/projects/nextron-test-js/app/background.js:21:30)
at /Users/boneskull/projects/nextron-test-js/app/background.js:85:18
at Object.<anonymous> (/Users/boneskull/projects/nextron-test-js/app/background.js:88:10)
at Module._compile (internal/modules/cjs/loader.js:815:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
at Module.load (internal/modules/cjs/loader.js:677:32)
at tryModuleLoad (internal/modules/cjs/loader.js:609:12)
at Function.Module._load (internal/modules/cjs/loader.js:601:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:880:10)
Evidently, this confuses webpack too much about where the packages live...
As much as I'd like to get this working, I'm gonna have to throw in the towel.
from nextron.
Mmm..., this is a complex problem.
If you are ok, could you tell me example repository which has this error?
from nextron.
I found the solution:
$ npx electron-rebuild -f -v <electron-version> -w serialport
from nextron.
The steps I took here:
- Use
npx nextron init
to create a new thing- Run
npm install
in resulting dir- Install my dependency (which uses
serialport
as a dependency, containing the native module)- Add
import
statement to source code- Run
npm run dev
which shows the first error- I had to add
electronVersion: 5.0.6
toelectron-builder.yml
npx electron-builder install-app-deps
results in the first paste above- First error shown above (again) in app (no change)
- Run
npx electron-rebuild
; completes successfully, but results in the second error shown above
These steps were so helpful :)
Thanks,
from nextron.
@saltyshiomix Your solution isn't working for me, so let me try again from the start. Thanks for following up... I had given up on it
from nextron.
(import 'serialport'
was added to home.jsx
in that project)
In a dev environment, Next.js runs a server in a node
process, right? It's not working because the node
process can't run the native module which was compiled for Electron via electron-rebuild
. I can think of two possible strategies to address (there may be more!):
-
use
ELECTRON_RUN_AS_NODE=1 npm run dev
, which results in a webpack error:/Users/boneskull/projects/boneskull/nextron-serialport/app/background.js:115 const userDataPath = electron__WEBPACK_IMPORTED_MODULE_0__["app"].getPath('userData'); ^ TypeError: Cannot read property 'getPath' of undefined at Module../main/background.js (/Users/boneskull/projects/boneskull/nextron-serialport/app/background.js:115:69) at __webpack_require__ (/Users/boneskull/projects/boneskull/nextron-serialport/app/background.js:21:30) at /Users/boneskull/projects/boneskull/nextron-serialport/app/background.js:85:18 at Object.<anonymous> (/Users/boneskull/projects/boneskull/nextron-serialport/app/background.js:88:10) at Module._compile (internal/modules/cjs/loader.js:839:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:851:10) at Module.load (internal/modules/cjs/loader.js:701:32) at tryModuleLoad (internal/modules/cjs/loader.js:633:12) at Function.Module._load (internal/modules/cjs/loader.js:625:3) at Function.Module.runMain (internal/modules/cjs/loader.js:904:10)
We might be able to figure out what's going on here and fix it.
-
Use
npm
's almost-entirely-undocumented "package aliases" functionality, which would allow two versions ofserialport
to be installed. Compile one fornode
, and the other forelectron
, and somehow tell the dev server to use thenode
one
from nextron.
Given the difficulties here, I'm thinking that Next (or Nuxt) isn't a great choice for what I'm doing, given its architecture.
from nextron.
I sent a PR which shows how to use SerialPort :)
boneskull/nextron-serialport#1
from nextron.
@saltyshiomix Can you think of any way to make serialport
run in the renderer process? I imagine this would work fine in a production build, but maybe not w/ Next.js' development server...
from nextron.
Sorry I'm not familiar to serialport
, does it support browser?
If so, you can use serialport
in the renderer process(it is just a web client process).
If we want to use server side scripts in the electron architecture, we must use the server scripts in the main process, not the renderer process.
from nextron.
I think you are right.
But I could not find another way for searching 3 hours, sorry.
from nextron.
Related Issues (20)
- Documentation on code signing for OSX? HOT 1
- when app router version is scheduled to be released HOT 4
- Node modules not installed? HOT 2
- Command failed with UNKNOWN: next -p 8888 renderer
- `.gitignore` in Root Directory Ignores Nested `app` Directories Unnecessarily HOT 1
- react-focus-lock Why can't I install this? HOT 1
- Electron process ignores config value HOT 1
- install directly with app router? HOT 2
- Command line arguments not working in dev command HOT 1
- Electron updater HOT 9
- ESM: latest sindresorhus packages support HOT 3
- IPC example HOT 14
- i18next Localization of dynamic pages does not work in the build HOT 2
- Nextron Tailwind Example does not work with `pnpm` HOT 2
- Vercel backend SSR / server actions HOT 1
- How to remove window.ipc.on listener? HOT 1
- cat not start debugger port
- error: unknown option '-o' HOT 12
- remote debugging HOT 1
- Nextron v9 with next js 14.2.4 white window in prod build with page router and electron 31 HOT 8
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from nextron.