use serialport in electron, I get error about "indexof"

[wiener0zyj]

Summary of Problem

(Please answer all 3)

• What are you trying to do?
  I'm tring to use serialport in electron with react, after i webpack my codes and run npm start, I get this:

### Uncaught TypeError: Cannot read property 'indexOf' of undefined

please help take a look at it.

• What happens?
  error happen when running:

Uncaught TypeError: Cannot read property 'indexOf' of undefined
    at Function.t.getFileName (bundle_Home.js:6)
    at t (bundle_Home.js:6)
    at Object.<anonymous> (bundle_Home.js:20)
    at n (bundle_Home.js:1)
    at Object.<anonymous> (bundle_Home.js:20)
    at n (bundle_Home.js:1)
    at Object.<anonymous> (bundle_Home.js:20)
    at n (bundle_Home.js:1)
    at Object.<anonymous> (bundle_Home.js:20)
    at n (bundle_Home.js:1)

• What should have happened?
  I think it should works well

Code to Reproduce the Issue

import React from 'react';
import {render} from 'react-dom';
import 'whatwg-fetch';
import SerialPort from 'serialport';

export default class Home extends React.Component{
    constructor(props){
        super(props);

        this.initSerialPort = this.initSerialPort.bind(this);
    }

    componentDidMount(){
        this.initSerialPort();
    }

    initSerialPort(){
        SerialPort.list(function (err, ports) {
            ports.forEach(function(port) {
              console.log(port.comName);
              console.log(port.pnpId);
              console.log(port.manufacturer);
            });
        });
    }

    render(){
        return (
            <div className="home">
                <span>Hello World</span>
            </div>
        );
    }
}

render(<Home/>, document.getElementById("home"));

const serialport = new SerialPort(path)

// Code

Versions, Operating System and Hardware

• SerialPort@?

• Node.js v?
  v10.15.0

• Windows? Linux? Mac?
  Win10

• Hardware and chipset? (Prolific/FTDI/Other)

[wiener0zyj]

could anyone help me to take a look?

[kfatehi]

I have seen this error too. The root cause may be related to this issue kusti8/proton-native#196 .. I wonder if porting the native library to https://github.com/charto/nbind would resolve issues like these.

[reconbot]

N-Api will help with these issues, someone is experimenting with it right now, come this April when we drop node 6 support we’ll be able to switch.

As I understand it Nbind won’t work because we have to be use c++ system calls

[reconbot]

Also I don’t think the two of you have similar issues.

[Nishkalkashyap]

I'm having exactly the same issue. The code runs perfectly in the development environment in electron application. But throws the same error in production. I tested the latest version of serialport@7.1.4 with latest major releases of electron 2.x.x, 3.x.x and 4.x.x. Throws the same error all the time. @wiener0zyj were you able to find a solution to this?

[Nishkalkashyap]

Ok. I think i found out what was causing the problem for me. I'm using webpack to bundle certain modules, was relying on webpack-node-extarnals package to ignore serialport and not build it. But as I found out it was bundling serialport for me. My bad. Silly mistake. :(

[wiener0zyj]

@Nishkalkashyap thanks very much! I have solved the problem, only electron 1.8.8 could support serialport.io. all the other versions such as 2.xx 3.xx and 4.xx could not work at all.

[reconbot]

Why?

[Nishkalkashyap]

Well. As I said earlier, serialport sure does works for me with electron. At least the version v4.0.5 of electron that I use.

To reiterate, my only problem was that I was bundling serialport with webpack, which fails. As soon as I add serialport as external module in webpack, everything works fine.

[dragongears]

I had the same issue with serialport in my Electron app when I tried to update from serialport 6.2.2 to 7.1.4. Reverting back to 6.2.2 solved my problem.

[agmangas]

I also found myself dealing with this. I'll leave the webpack configuration that worked for me for other users for future reference:

{
  externals:  {
    serialport: 'commonjs serialport'
  }
}

The serialport section in the output bundle for this configuration would look like this:

/***/ "serialport":
/*!*****************************!*\
  !*** external "serialport" ***!
  \*****************************/
/*! no static exports found */
/***/ (function(module, exports) {

eval("module.exports = require(\"serialport\");\n\n//# sourceURL=webpack:///external_%22serialport%22?");

This means that when the app requires serialport it will end up resolving to the one located in the node_modules in the parent folder of the webpack output directory.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in a week no further activity occurs. Feel free continue the discussion or ask for a never-stale label to keep it open. If this is a support issue, consider sharing it on stack overflow to get more eyes on your problem.

[s00500]

I was using vue-cli-plugin-electron-builder and had the same problem, the solution in my case was to mark serialport as external for the builder

// vue.config.js
module.exports = {
  pluginOptions: {
    electronBuilder: {
      externals: ['serialport']
    }
  }
}

See here: electron-userland/electron-builder#3696

[thrazu]

My enviroment:

Vue.js: 2.6.10
Electron: 2.0.18
Node: 8.9.3
Platform: linux

If you are using Eletron with Vue.js you need to rebuild the serialport module doing something like this:

npm install electron-rebuild

after this, you can add in your package.json > section "scripts", another line saying:

"rebuild": "electron-rebuild -f -w serialport"

You can rebuild the module with terminal command

npm run rebuild

Now the serialport module should be imported and will work as expected. Goog luck!