Failed to Parse Native Modules

[madhankk]

I have a very simple vue CLI 3 based sample project which I added vue-cli-plugin-electron builder to. Everything starts up correctly. Then I proceeded to add a simple nAPI native module which I compiled fine. I used the instructions here.

I added the following to a simple background.js

const testAddon = require('./testaddon.node');
module.exports = testAddon;

If I run

npm run electron:serve

I get

/ Bundling main process...

ERROR Failed to compile with 1 errors 10:14:03 AM

error in ./src/testaddon.node

Module parse failed: Unexpected character '�' (1:2)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

@ ./src/background.js 11:18-45
@ multi ./src/background.js

ERROR Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] electron:serve: vue-cli-service electron:serve
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] electron:serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

I have tried a variety of things including adding a vue.config.js as mentioned in your documentation to add it as an external.

module.exports = {
pluginOptions: {
electronBuilder: {
// List native deps here if they don't work
externals: ['testaddon.node'],
// If you are using Yarn Workspaces, you may have multiple node_modules folders
// List them all here so that VCP Electron Builder can find them
nodeModulesPath: ['../../node_modules', './node_modules']
}
}
}

Can you please let me know what configuration I am missing?
It looks like from what I could tell webpack trying to do something with the binary C++ dll and failing. But from what I have read in your documentation it appears that this native module support should work. Any points would be helpful.

• Windows 10 64 bit
• node version: 12.6.0
• npm version: 6.9.0
• vue-cli-plugin-electron-builder version : 1.3.6
• electron version: 5.0.0

[nklayman]

Try adding node-loader to the main process webpack config by setting your vue.config.js to:

module.exports = {
  pluginOptions: {
    electronBuilder: {
      chainWebpackMainProcess: config => {
        config.module.rule('node').test(/\.node$/).use('node-loader')
      },
    }
  }
}

The externals option is designed for native npm modules, not .node files, that is causing the error.

[madhankk]

Thanks, I tried adding node-loader and then adjusting the vue.config.js and it got this error.

Error: No loader specified at Function.normalizeUseItem (C:\Users\<>\vue\elec3\node_modules\webpack\lib\RuleSet.js:389:10) at Function.normalizeUse (C:\Users\<>\vue\elec3\node_modules\webpack\lib\RuleSet.js:360:19) at C:\Users\<>\vue\elec3\node_modules\webpack\lib\RuleSet.js:357:33 at Array.map (<anonymous>) at Function.normalizeUse (C:\Users\<>\vue\elec3\node_modules\webpack\lib\RuleSet.js:357:6) at Function.normalizeRule (C:\Users\<>\vue\elec3\node_modules\webpack\lib\RuleSet.js:288:26) at C:\Users\<>\vue\elec3\node_modules\webpack\lib\RuleSet.js:110:20 at Array.map (<anonymous>) at Function.normalizeRules (C:\Users\<>\vue\elec3\node_modules\webpack\lib\RuleSet.js:109:17) at new RuleSet (C:\Users\<>\vue\elec3\node_modules\webpack\lib\RuleSet.js:104:24) at new NormalModuleFactory (C:\Users\<>\vue\elec3\node_modules\webpack\lib\NormalModuleFactory.js:115:18) at Compiler.createNormalModuleFactory (C:\Users\<>\vue\elec3\node_modules\webpack\lib\Compiler.js:512:31) at Compiler.newCompilationParams (C:\Users\<>\vue\elec3\node_modules\webpack\lib\Compiler.js:529:30) at Compiler.compile (C:\Users\<>\vue\elec3\node_modules\webpack\lib\Compiler.js:537:23) at C:\Users\<>\vue\elec3\node_modules\webpack\lib\Compiler.js:278:11 at Compiler.readRecords (C:\Users\<>\vue\elec3\node_modules\webpack\lib\Compiler.js:405:11)

[madhankk]

For people who have this same problem, what did work to make the .node file load was using this:

var myaddon = __non_webpack_require__('testaddon.node');

But I am not sure if this is standard and there is any other more 'correct' approach. Thanks for all the help.

[nklayman]

Did you install the node-loader npm package? Sorry, I forgot to mention in my comment.

[madhankk]

Sorry for the late reply, yes I did add that but it didn't seem to help.

[nklayman]

Using non webpack require should be fine, but I'm not sure it'd work in a build.

[madhankk]

Thanks, we made the non_webpack_require work in a build

We did something like

var nodePath = path.join(__dirname, '../../electronToCppBridge.node');
if (isDevelopment)
{
    nodePath = path.join(__dirname, '../build/release/electronToCppBridge.node');
}
var electronToCppBridge = __non_webpack_require__(nodePath);

[hetsch]

This works for me so far:

    chainWebpackMainProcess: (config) => {
        config.module
          .rule("node")
          .test(/\.node$/)
          .use("node-loader")
          .loader("node-loader")
          .end();
      },
    },