node-serialport does not work with Electron - node.js

Question

My task is to build a HTML5 desktop app, which works with serial port, because I have an arduino on the other side on COM-port.
I installed electron-prebuilt and serialport packages both (I specified them in package.json).
In my main web page I included main.js, and there I tried to require the serialport package, but I got the following error:
Uncaught Error: Cannot find module
'D:\Projects\arduino\HTMLPresentation\node_modules\serialport\build\serialport\v1.7.4\Release\node-v45-win32-x64\serialport.node'
I've read some QA topics about that problem (some abracadabras with node-gyp), but noting works for me: on both windows 8.1 and Ubuntu 15.04. I don't know how to adopt serialport package for electron.

Answer 1

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 --save-dev
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!

Answer 2

Use Electron-Rebuild: This executable rebuilds native io.js modules against the version of io.js that your Electron project is using. This allows you to use native io.js modules in Electron apps without your system version of io.js matching exactly.
npm install --save-dev electron-rebuild
# Every time you run "npm install", run this
./node_modules/.bin/electron-rebuild
# On Windows if you have trouble, try:
.\node_modules\.bin\electron-rebuild.cmd

Answer 3

This is how you would solve it
Install windows build tools in your computer by running this in your powershell with administrator access
npm install --global --production windows-build-tools
or npm --add-python-to-path='true' --debug install --global windows-build-tools
setx PYTHON "%USERPROFILE%\.windows-build-tools/python27/python.exe"
set PYTHON
set PYTHON helps you check if its set up correctly.
This is not enough install electron rebuild globally in your project files
npm install -g electron-prebuilt
npm install --save serialport
We have to rebuild serialport to work with electron. To do this, we need to >install electron-rebuild:
npm install --save-dev electron-rebuild
The last step is to run electron-rebuild, once again, just in the root >directory of the app:
./node_modules/.bin/electron-rebuild
import and use in your electron-vue project
<script>
const sp = require('serialport')
export default {
name: 'landing-page',
methods: {},
created () {
sp.list(function (error, ports) {
if (error) {
console.log(error)
} else {
console.log(ports)
}
})
}
}
</script>