node-loader not handling node_modules file

Question

When running

npm run electron:serve

I get this error:

in ./node_modules/msnodesqlv8/build/Release/sqlserverv8.node Module parse failed: Unexpected character '�' (1:2) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

I think I understand the error. My webpack doesn't know how to handle the .node file in this dependency ("msnodesqlv8": "^2.2.0")

I have tried adding node-loader but I've not had any success with it. I have tried configuring it in my vue.config.js like this:

module.exports = {
  transpileDependencies: [
    'vuetify'
  ],
  configureWebpack: {
    devtool: 'source-map'
  },
  pluginOptions: {
    electronBuilder: {
      preload: 'preload/preload.js',
      "directories": {
        "buildResources": "build"
      },
      mainProcessWatch:['src/services/background/**'],
      "files": [
        "build/**/*",
        "!node_modules"
      ],
      "win": {
          "asar": false,
          "target": "nsis",
          "icon": "build/icon.ico"
      },
      "nsis": {
        "installerIcon": "build/icon.ico",
        "installerHeaderIcon": "build/icon.ico",
        "deleteAppDataOnUninstall": true
      }
    }
  },
  chainWebpack: config => {
    config
        .plugin('html')
        .tap(args => {
            args[0].title = "Configuration Utility";
            return args;
        });

    config.module
          .rule('node')
          .test(/\.node$/)
          .use('node-loader')
          .loader('node-loader')
          .end();

    config.module
          .rule('pug')
          .test(/\.pug$/)
          .use('pug-plain-loader')
          .loader('pug-plain-loader')
          .end();
  }
}

I also tried adding a separate webpack.config.js with no success:

module.exports = {
    target: "node",
    node: {
    __dirname: false,
    },
    module: {
    rules: [
        {
        test: /\.node$/,
        loader: "node-loader",
        },
    ],
    },
};

How can I get this working?

Answer 1

You need to move the node loader into the chainWebpack of the electron builder for this to work.

module.exports = {
  transpileDependencies: [
    'vuetify'
  ],
  configureWebpack: {
    devtool: 'source-map'
  },
  pluginOptions: {
    electronBuilder: {
      preload: 'preload/preload.js',
      "directories": {
        "buildResources": "build"
      },
      // THESE NEXT 3 LINES HERE:
      chainWebpackMainProcess: config => {
        config.module.rule('node').test(/\.node$/).use('node-loader').loader('node-loader').end()
      },
      mainProcessWatch:['src/services/background/**'],
      "files": [
        "build/**/*",
        "!node_modules"
      ],
      "win": {
          "asar": false,
          "target": "nsis",
          "icon": "build/icon.ico"
      },
      "nsis": {
        "installerIcon": "build/icon.ico",
        "installerHeaderIcon": "build/icon.ico",
        "deleteAppDataOnUninstall": true
      }
    }
  },
  chainWebpack: config => {
    config
        .plugin('html')
        .tap(args => {
            args[0].title = "Configuration Utility";
            return args;
        });

    config.module
          .rule('pug')
          .test(/\.pug$/)
          .use('pug-plain-loader')
          .loader('pug-plain-loader')
          .end();
  }
}