Encountered an error when trying to access the 'modules' property of undefined in the /node_modules/bindings/bindings.js file while working with electron and setting up

Question

Encountered an error when trying to access the 'modules' property of undefined in the /node_modules/bindings/bindings.js file while working with electron and setting up

1.  npm install -g node-gyp
2.  npm install serialport -S
3.  npm install electron-rebuild -D
4. ./node_modules/.bin/electron-rebuild.cmd

and after that, the rebuild process is completed.

When I execute the command: npm run electron:serve, I encounter an error in the browser's Electron inspector similar to this.

If I inspect the bindings.js code, I can pinpoint the error:

nodePreGyp:
  'node-v' +
    process.versions.modules

Here is a snippet from my package.json file:

{"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  },
  ...
}

Could someone please help me locate the issue and provide guidance on resolving it?

javascript npm electron vue-cli node-serialport

Answer 1

Answer №1

If you are using electron with VueJS, I recommend checking out the code at https://github.com/SimulatedGREG/electron-vue. It provides all the necessary code and is quite helpful.

When implementing an existing VueJS project's SerialPort Package with Electron for the first time, you may encounter some issues.

enter image description here

<template>
  <div id="wrapper">
    <h2>Hello world</h2>

    <button @click="listMyPorts">Show Ports</button>

    <pre v-if="msg.length">{{msg}}</pre>

  </div>
</template>

<script>
  const serialport = require('serialport')

  export default {
    name: 'landing-page',
    data: () => ({
      msg: []
    }),
    methods: {
      async  listSerialPorts () {
        await serialport.list().then((ports, err) => {
          if (err) {
            this.msg.push(err.message)
            return
          } else {
            this.msg.push('')
          }
          console.log('ports', ports)
          this.msg.push(ports)

          if (ports.length === 0) {
            this.msg.push('No ports discovered')
          }
        })
      },
      listMyPorts () {
        let vm = this
        setTimeout(function listPorts () {
          vm.listSerialPorts()
          setTimeout(listPorts, 2000)
        }, 2000)
      }
    }
  }
</script>

<style scoped>
</style>

Answer 2

If you are using electron with VueJS, I recommend checking out the code at https://github.com/SimulatedGREG/electron-vue. It provides all the necessary code and is quite helpful.

When implementing an existing VueJS project's SerialPort Package with Electron for the first time, you may encounter some issues.

enter image description here

<template>
  <div id="wrapper">
    <h2>Hello world</h2>

    <button @click="listMyPorts">Show Ports</button>

    <pre v-if="msg.length">{{msg}}</pre>

  </div>
</template>

<script>
  const serialport = require('serialport')

  export default {
    name: 'landing-page',
    data: () => ({
      msg: []
    }),
    methods: {
      async  listSerialPorts () {
        await serialport.list().then((ports, err) => {
          if (err) {
            this.msg.push(err.message)
            return
          } else {
            this.msg.push('')
          }
          console.log('ports', ports)
          this.msg.push(ports)

          if (ports.length === 0) {
            this.msg.push('No ports discovered')
          }
        })
      },
      listMyPorts () {
        let vm = this
        setTimeout(function listPorts () {
          vm.listSerialPorts()
          setTimeout(listPorts, 2000)
        }, 2000)
      }
    }
  }
</script>

<style scoped>
</style>

Encountered an error when trying to access the 'modules' property of undefined in the /node_modules/bindings/bindings.js file while working with electron and setting up

Answer №1

Similar questions

Determine the position of the cursor in an editable span

What is the best way to include a check mark icon using MUI or Tailwind CSS for every item selected in a dropdown menu?

There is no compatible version available for @typescript-eslint/[email protected]

Conceal the element if the offspring is devoid of content

Adjustable value range slider in HTML5 with ng-repeat directive in AngularJs

How can I manually set a date in Angular bootstrap datepicker?

Using Rails' link_to method within Bootstrap modals

What is the best way to implement this ajax preloader?

Steps to connect two drop-down menus and establish a starting value for both

Node.js is encountering an error with the post method where req.body is returning an empty

Alternate. (individually)

Why does appending to a TextArea field fail in one scenario but succeed in another when using Javascript?

react component fails to rerender upon state change

Implementing Google Places reviews on a website with the help of JavaScript

Guide on verifying the status of a switch toggle using Selenium and C#

verifying the presence of offspring in knockout js

What is the best way to add external javascript files to bookmarklets?

The FaceDetector within the expo application continues to activate the "onFacesDetected" event in "accurate" mode unnecessarily, even when no face is present

Text that appears as an HTML button is displayed after being compiled using the $

The Ajax search box displays results from the most recent query