nextron: cannot use native modules?

When running npm run dev, I’m getting this from node-serialport:

The module <path/to/bindings> was compiled with NODE_MODULE_VERSION 70. This version of Node.js requires NODE_MODULE_VERSION 72

I’ve tried installing electron and using electron-rebuild, upgrading all my dependencies, and trying everything I could from the official tutorial but still get this message. Honestly, I have no idea how Electron is getting launched using npm run dev…

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 2
Comments: 25 (12 by maintainers)

Commits related to this issue

Add a missing config target (electron-renderer) in the next.config.js #38 — committed to saltyshiomix/nextron by saltyshiomix 5 years ago

Most upvoted comments

@saltyshiomix’s PR fixes the issue!

I found that electron-rebuild isn’t necessary, though. See https://github.com/boneskull/nextron-serialport/commit/c16805ee1a352973154d448c24c9110164ba6a8f

TL;DR: configure electron-builder to have option buildDependenciesFromSource = true

boneskull on Jul 25, 2019

I guess I can put that config in electron-builder.yml instead, but same idea.

boneskull on Jul 25, 2019

That’s also the conclusion I’ve come to. thanks for helping!

boneskull on Jul 29, 2019

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.

saltyshiomix on Jul 28, 2019

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?

boneskull on Jul 27, 2019

@saltyshiomix see https://github.com/boneskull/nextron-serialport for example

boneskull on Jul 24, 2019

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 to electron-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

boneskull on Jul 14, 2019

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

hadeeb on Jul 6, 2019