Serialport is not defined

[jsftsylvain]

Summary of Problem

(Please answer all 3)

• What are you trying to do? Get Serialport working with electron, react and webpack. (Just looking for a solution so that I can use electron and react along side serial port)

• What happens? Browser window compiles but I get an error in console log saying that serial port is not defined

• What should have happened? serialport should have been defined and it should have listed the available coms on my html page

Code to Reproduce the Issue

I used this boilerplate: https://github.com/alexdevero/electron-react-webpack-boilerplate

after which I entered the follow commands in the cli

npm i --save-dev electron-rebuild npm i npm i --save-dev serialport npm i .\node_modules.bin\electron-rebuild.cmd

In the root folder I changed webpack.dev.config.js to include: externals:{ serialport: 'serialport' }

Then in the src folder I changed index.js and added a secondary file called coms.js. I have added the code to those files below:

index.js

`import React from 'react' import { render } from 'react-dom' import App from './components/App'

// Since we are using HtmlWebpackPlugin WITHOUT a template, we should create our own root node in the body element before rendering into it let root = document.createElement('div')

root.id = 'root' document.body.appendChild(root)

//code that I added let script = document.createElement('script') script.innerHTML = require('./coms.js') document.body.appendChild(script) let port = document.createElement('div') port.id = 'port-list' document.body.appendChild(port) //end of code I added

// Now we can render our application into it render(, document.getElementById('root')) `

coms.js (normally do have the ` symbols when assigning the innerHTML, they just messed with the formatting on this page.

const SerialPort = require('serialport') SerialPort.list().then(ports => { document.getElementById("port-list").innerHTML =

Detected Serial Ports

${ports.map(port => `
• ${port.comName}
`).join('')}

})

once I start my application with yarn start I get the follow error Uncaught ReferenceError: serialport is not defined at Object.serialport (index.js:17) at __webpack_require__ (bootstrap:789) at fn (bootstrap:100) at Object../src/coms.js (coms.js:1) at __webpack_require__ (bootstrap:789) at fn (bootstrap:100) at Module../src/index.js (index.js:10) at __webpack_require__ (bootstrap:789) at fn (bootstrap:100) at Object.0 (index.js:17)

Looked for several hours with no progress or solutions. Hopefully someone is able to help.

Versions and Operating System

• SerialPort@9.0.0
• Node.js v14.40
• Windows 10

[Dardin-dale]

I've been working on something similar and have run into a lot of the issues that seem to be around the Electron + native dependencies space. Most of this just comes from me reading a bunch of forums so I am not sure if I am 100% correct on all of this.

What I've gathered is that Electron-Rebuild will run prebuild and recompile the serialport library such that it matches the targeted Electron environment. The problem is that Electron-Builder (uses Electron-Packager) and will ignore the re-compiled serialport anyways and if you run Electron-Builder they will even produce a warning that you should remove Electron-Rebuild as a dependency.

Electron-builder should ping the github releases for serialport and grab the correct prebuild for your electron version. But my experience has been that it targets the wrong v8x build for my version of electron. I haven't gone through the process of downloading the correct version and adding it to the local cache location that it specifies yet.

But those are errors for the Electron built executable. I think the error you are seeing comes from the webpack-dev-server not knowing how to integrate the native dependency even if you mark it as an external. It just isn't getting into the scope of the webpack-dev-server express environment.

I've been able to do hotloading by building off of a gulp.js build with a few tweaks but I haven't had success using static assets like css or videos because the import my_asset.css is actually a webpack feature not a standard JS feature but I think there are ways to use gulp in conjunction with webpack but not frequently enough that I've found boilerplate code that has all the bells and whistles that I would like. The way that the task running works also seems to get around some of the issues with Electron-Builder but that may have just been my electron/serialport versions meeting what electron-builder was expecting.

I would be highly interested in a full boilerplate that can integrate React + Electron + Serialport that gets around some of the initial stumbling blocks that I've run into.

[jsftsylvain]

@Dardin-dale Hey Dardin, not sure if you've made any progress with getting over those initial stumbling blocks. I ended up finding this boilerplate which worked with Serialport. One problem I did encounter with the boilerplate is that while installing style-loader and css-loader only using the yarn package manager worked. Not sure why the node package manager didn't work but at least I was able to find a solution. I would also be highly interested in a full boilerplate that can integrate React + Electron + Serialport as it took me a good week to find a boilerplate that includes react and works with serialport. Also, installing serialport with this boiler plate only worked with electron-rebuild.

Side note: make sure to add serial port as an external in webpack.config.js. module.exports = { externals: {serialport: true} }

[Dardin-dale]

Oh nice this is working for me! It looks like it's Windows specific which is fine. I installed with yarn and did as you said. I even was able to run with the latest version of Electron with yarn upgrade (Then rebuilding serialport with electron-rebuild) I can add a little front end and use some serialport usage example but I'm not sure where the best place to put that boilerplate would be other than my own git repo.

[jsftsylvain]

@Dardin-dale Hey Dardin, It's only windows specific because of this line in package.json right? "dist": "npm run \"bundle:react\" && node installers/windows/installer.js" Do you know if there is a way to build OS X and Linux bundles?

Also I ran into this problem today:

Uncaught ReferenceError: serialport is not defined

with this code:

const SerialPort = require("serialport");

Which I fixed with

const SerialPort = require( "electron" ).remote.require("serialport");

^^ avoid this duct tape fix and look into using IPC instead to avoid future problems

Just adding solutions to problems I encountered for other people as I found it difficult to find resources to solve these problems.

[Dardin-dale]

If you look at installer.js it is set to target windows/nsis as a build target using the electron-builder documentation. You should just need to make a new installer.js to fit the OSX configuration instead. I personally didn't have issues loading serialport in either my build or in dev. I only loaded it into the main process and use IPC to call serialport though. I've run into issues in the past trying to load it into the renderer process. But I'd have to do some more digging to figure out what is up with it.

[reconbot]

We don't yet support being run in the render processes because it requires a lot of rewriting to support nodejs workers. (There's an open issue)

[jsftsylvain]

@Dardin-dale Hi Dardin, as I am still relatively new to react, I am a bit confused as to where I need to load it in the main process and where my main process is. I am guessing that my render process is in my index.js where the app is rendered. Any help is appreciated!

[Dardin-dale]

From the boilerplate that you are working off, the main process is in Public/electron.js where the browser window is initiated and this is your entry point for normal node processes. src/index.js is the entry for your renderer process/react code that is the "client". Instead of using a http request you use an IPC connection for event emitters/listeners. You can find that info here. I'll try to work on a boilerplate that does some of this in the next few days. The one I currently have is pretty messy.

[Dardin-dale]

@jsftsylvain It's still a work in progress, and it can use some clean up, but here is a template I've been toying around with some basic use that works for the embedded devices that I'm working with.