Node SerialPort code in Main.ts will not work on package??

[KeyOnTech]

First let me say thank you for this boiler plate it has been a great help on the build process with React in 1 package.

I have an Electron app that uses
Node SerialPort - https://serialport.io/docs/guide-installation
npm i serialport

I used HTML to make a basic debug page it loads using Main - Preload - Renderer - Index.html
Buttons click, work, serial calls all work
I made the test app everything works and decided its time to make it react based front end

I have worked in React and would like to use State to manage the Serial port settings and other field changes in State.

I downloaded your boilerplate as I could not get my React / Electron Build process to consistently work.
Your project works great everything is working until I add the SerialPort code to the Main.ts file.... or Preload.ts or App.txs

There are no TypeScript errors I worked all those out.
If I simply add the import nothing goes wrong, but when I try to use the SerialPort and make a new SerialPort{} in all 3 files things will not work either on local build or it works and then will not work on Package process the serialPort node module is missing on build

When I launch and run it runs but when I build the package the Serial node module is not being added even though I'm obviously adding it to the Main.ts file.

I've gone through so many ideas and I'm stuck I don't know what to do to make this file include on package with the Main.ts file

I'm going to try and share what you need to recreate the issue and hopefully its a simple WebPack setting or something because I am stuck and need help

Thank You

npm install serialport
TEST 1
Main.ts - this works when you run local but not when you package the serialPort module will not export to the package???

Add this to bottom of Main.ts

// TEST 1 ---- Copy and paste this --- start
// Main.ts
/*** SERIAL PORT --- start /
import { SerialPort } from 'serialport';
import { InterByteTimeoutParser } from '@serialport/parser-inter-byte-timeout';
// /** Create a port */
const port = new SerialPort({
path: '/dev/tty-usbserial1',
baudRate: 57600,
})
// TEST 1 ---- Copy and paste this --- end

Add this to Preload.ts remove above from Main.ts

// TEST 2 ---- Copy and paste this --- start
// - Preload.ts - remove the Main.ts code and add this to Preload.ts
// - - starts local but has errors. If you comment out the const port = new Serialport... but leave the import statement no errors runs local.
// as soon as you add back the const = port = new Serialport... things break on local and package

// Copy and paste this --- start
// Preload.ts
import { SerialPort } from 'serialport'
// /*** Create a port */
const port = new SerialPort({
path: '/dev/tty-usbserial1',
baudRate: 57600,
})
// TEST 2 ---- Copy and paste this --- end

[pronebird]

Hi,

We don't support typescript out of the box, so perhaps that is the reason why you experience those issues.

[KeyOnTech]

I think I found the issue.......
On your docs page I missed this and this is a huge step

https://electron-react-boilerplate.js.org/docs/adding-dependencies

I needed to add
"serialport": "^10.4.0"
to both package.json files....

the regular file and the release/package.json file

"dependencies": {
"serialport": "^10.4.0"

}

I ran local fine
I ran a package and finally it started with no errors !!!

In your read me file if you could add this link above and a simple statement if you have dependencies please add to both package.json files here is the link to adding dependencies that would be a huge help and possibly prevent unneeded issue postings as most know to add to package.json but might completely miss this step to add to the release/package.json file

Again, This was all my fault just a suggestion for you and your users piece of mind lol

Thank you for your reply it kept me going and I apologize for not seeing this step sooner in the docs
I'm going to keep pressing on and will reply if I see any issues and looking forward to being done and sleeping again lol :)
thanks again for your hard work and this boilerplate

[pronebird]

The link you shared points to a different boilerplate for electron. I am happy to know that you have managed to build your app but are you sure that you use this boilerplate and not the other? :-)

[KeyOnTech]

thank you for your help you guys / gals are great