Node-serialport: 'The "path" argument must be of type string. Received type undefined' in Quasar Framework

[snow-drop]

Good day! I'm trying to play around using serialport and Electron from Quasar Framework for Arduino projects. When I try to run my project, this error occurs instead of running gracefully.

NodeError: The "path" argument must be of type string. Received type undefined
 at assertPath (path.js:39:11)
    at dirname (path.js:1270:5)
    at Function.getRoot (webpack-internal:///../node_modules/bindings/bindings.js:151:13)
    at bindings (webpack-internal:///../node_modules/bindings/bindings.js:60:32)
    at eval (webpack-internal:///../node_modules/@serialport/bindings/lib/linux.js:1:92)
    at Object.../node_modules/@serialport/bindings/lib/linux.js (http://localhost:8080/0.js:89:1)
    at __webpack_require__ (http://localhost:8080/app.js:768:30)
    at fn (http://localhost:8080/app.js:131:20)
    at eval (webpack-internal:///../node_modules/@serialport/bindings/lib/index.js:14:22)
    at Object.../node_modules/@serialport/bindings/lib/index.js (http://localhost:8080/0.js:67:1)
logError @ vue.runtime.esm.js?e832:1737

Here's my code snippet:
[Vue.js]

import SerialPort from 'serialport'

.....

created () {
    const port = new SerialPort('/dev/ttyUSB0', {baudRate: 9600})

    port.on('data', (data) => {
        console.log('Data: ' + data)
    })
}

The error occurs during the line import SerialPort from 'serialport'. I also tried using const SerialPort = require('serialport') but the issue persists. I've already tried researching for about half a day and still can't find any solutions.

Here's my current environment:
[package.json]

 "scripts": {
    "install": "electron-rebuild"
  },
  "dependencies": {
    "serialport": "^7.0.2"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.1",
    "devtron": "1.4.0",
    "electron": "3.0.8",
    "electron-debug": "2.0.0",
    "electron-devtools-installer": "2.2.4",
    "electron-packager": "^12.0.1",
    "electron-rebuild": "^1.8.2",
    "eslint": "^4.18.2",
    "eslint-config-standard": "^11.0.0",
    "eslint-friendly-formatter": "^4.0.1",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-import": "^2.9.0",
    "eslint-plugin-node": "^6.0.1",
    "eslint-plugin-promise": "^3.7.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.3.0",
    "quasar-cli": "^0.17.0",
    "strip-ansi": "=3.0.1"
  },
  "engines": {
    "node": ">= 8.9.0",
    "npm": ">= 5.6.0",
    "yarn": ">= 1.6.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 10"
  ]

serialport: ^7.0.2
Node.js: v11.2.0
npm: 6.4.1
OS: Kubuntu Linux 18.04

Thank you in advance for the help. :)

[snow-drop]

It also seems that the node_modules/serialport/ does not have a build folder.

[snow-drop]

I tried this: https://github.com/node-serialport/node-serialport/issues/1271#issuecomment-320144084
But still the issue occurs, though there is already a build folder on node_modules/serialport/

[HipsterBrown]

@snow-drop Do you know if Quasar is doing any sort of compression when building the app? I have seen a similar error when the bindings package is run through uglify.

[snow-drop]

@HipsterBrown I think it does not do compression stuffs during dev mode, only during production.

[snow-drop]

I tried cloning https://github.com/johnny-five-io/electron-serialport and it works, seems that there is some magic going on with Quasar. Anyway, I've already give up on this for now. I'll try this again next time if I have some time.

[HipsterBrown]

@snow-drop Ok thanks for letting us know. Closing the issue for now.

[snow-drop]

@HipsterBrown Your welcome. Thanks! :)

[lexetam]

Hi guys, I have the same issue in [email protected] and serialport@^7.0.0 but not with 6.2.0 version, I think the problem may be coming from webpack

[rgruenewald]

+1

[HipsterBrown]

@lexetam Can you create a new issue with details about what you're trying to accomplish with vue + serialport, plus the error message from webpack?

[Fredo70]

Same problem for me. Quasar electron app + serialport. Same error as in the first post.

[saintcrawler]

Same problem. Electron + serialport works fine. When I add webpack, the error comes.

This works for me, maybe it will be helpful for somebody.

https://stackoverflow.com/a/46554944

After many hours of frustration, I moved

const SerialPort = require('serialport');
from javascript file which is supposed to be bundled by webpack to index.html:

<script>
  const SerialPort = require('serialport');
</script>
<script src="dist/bundle.js"></script>

SerialPort is now recognized.

Also, it seems like webpack-dev-server doesn't work very well with Electron and serialport. I have to launch full electron app.

[saintcrawler]

Seems like you should also add:

externals: {
    serialport: 'serialport'
},

in your webpack config file

[lexetam]

@Fredo70 @saintcrawler are you triying with [email protected]?
In my case the solution of @Fredo70 does not work because it fails in the compilation of the component Vue, showing me the "error serialport is not defined".
I think we should look for the error in the branch @ ^ 7.0.0

[HipsterBrown]

@saintcrawler The solution you are suggesting works because webpack cannot bundle native dependencies, like @serialport/bindings which the Serialport package uses. Probably still a useful section to add to our docs somewhere.

@lexetam Do you have an example repo to recreate this issue?

[saintcrawler]

@lexetam I use [email protected]

[mkarliner]

@HipsterBrown I'm have exactly the same issue, except that I can't get @saintcrawler 's solution to work. I haven't worked with Vue for over a year, so I'm probably being very stupid, but I'd appreciate a pointer to a valid way to get serialport into Quasar. Thanks. BTW, I'm not including code, console logs etc, as I think the index.html include is a bit of a hack, and I'd like to know if there is a 'correct' way.

[saintcrawler]

@mkarliner I don't think it's a hack, since webpack documentation allows using external dependencies, which are not handled by webpack. If you don't like to write require in index.html you can do it in a separate .js file. I've created a simple demo.

I didn't work with Quasar, but I suppose you should extend your webpack config and add externals.

Something like this:

// quasar.conf.js
build: {
  extendWebpack (cfg) {
    cfg.externals = {
      serialport: 'serialport'
    }
  }
}

[mkarliner]

@saintcrawler - I did get this working once I'd correctly read your reply. It's been a week of red herrings, as serialport has it's own foibles, needing a recompile from source to get node versions to match, plus my own machine issues, like updating to MacOs Sierra but not upgrading Xcode. Thanks again.

[s-light]

@mkarliner could you mention again what were the necessary steps to get it working for you?
i have done the extendWebpack...cfg.externals... and including the require('serialport'); in the src/index.template.html file.
in the developer console i can use require('serialport'); all fine..
but the require in the html does not find it..

i created a minimal example at https://github.com/s-light/quasar_serialport_test