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

Access the modal by simply clicking on the provided link

The command 'npm-run-all' is not valid and cannot be found, please check the command and try again

Efficient PHP caching solution for optimizing JavaScript and CSS performance

Unlock TypeScript code suggestions for extended objects

Exploring the Power of Angular Toastr Callback Functions

Utilizing JavaScript to retrieve data from a self-submitting form

Selenium webdriver cannot find the element within the JavaScript code

Using JavaScript to assign the title property to an <a> tag

Steps to include a title next to a progress bar:

Attempting to select an image with the intention of triggering a modal to appear through an ajax

Transferring $scope information to resolve in $stateProvider.state

Ways to prompt a specific text value to generate varied responses

Tips for seamlessly incorporating advertisements into a mixed application

Different Option for Ajax/Json Data Instead of Using Multiple Jquery Append Operations

What is the best way to compare all the elements in an array to the entries in another object, while also storing the results of each comparison?

What causes the reflection of JavaScript variables when there is a change in ng-model?

Detecting changes in arrays in Vue.js 2

Encountering difficulties launching development server for Next.js 14 using the latest version of Yarn Berry

Steps for dynamically loading the content of a Bootstrap 4 Modal

Why are imported modules unable to reach global variables in Node?