CODEWITHSUNDEEP
node.jswebpackelectronelectron-forgewebtorrent
Inventor
Inventor

Reputation: 174

Absolute path after building app by webpack with webtorrent and electron

I have an app with electron forge, webtorrent and webpack. I created it using 2 commands:

npm init electron-app@latest my-app -- --template=webpack
yarn add webtorrent

Add import to main.js

import WebTorrent from "webtorrent";

And:

yarn package

After this my application only works on my computer because after the build there is an absolute path in the application code:

(0,n.createRequire)("file:///Users/prof1/projects/pw_castle/launcher_test/node_modules/node-datachannel/lib/index.js")("../build/Release/node_datachannel.node")

I don't understand why this is happening. If I remove the webtorrent import from my main.js, the absolute path disappears from the build. I know that webtorrent requires additional configuration for webpack. But it seems this is only required when used in a browser? Problem is only with webtorrent, other libs work perferctly. I tried different versions of webtorrent. It didn't help me.

My webpack.main.config.js (default for electron forge):

module.exports = {
  entry: './src/main.js',
  module: {
    rules: require('./webpack.rules'),
  },
};

webpack.rules.js (default for electron forge)

module.exports = [
  {
    test: /native_modules[/\\].+\.node$/,
    use: 'node-loader',
  },
  {
    test: /[/\\]node_modules[/\\].+\.(m?js|node)$/,
    parser: { amd: false },
    use: {
      loader: '@vercel/webpack-asset-relocator-loader',
      options: {
        outputAssetBase: 'native_modules',
      },
    },
  },
];

And forge.config.js (default for electron forge):

const { FusesPlugin } = require('@electron-forge/plugin-fuses');
const { FuseV1Options, FuseVersion } = require('@electron/fuses');

module.exports = {
  packagerConfig: {
    asar: true,
  },
  rebuildConfig: {},
  makers: [
    {
      name: '@electron-forge/maker-squirrel',
      config: {},
    },
    {
      name: '@electron-forge/maker-zip',
      platforms: ['darwin'],
    },
    {
      name: '@electron-forge/maker-deb',
      config: {},
    },
    {
      name: '@electron-forge/maker-rpm',
      config: {},
    },
  ],
  plugins: [
    {
      name: '@electron-forge/plugin-auto-unpack-natives',
      config: {},
    },
    {
      name: '@electron-forge/plugin-webpack',
      config: {
        mainConfig: './webpack.main.config.js',
        renderer: {
          config: './webpack.renderer.config.js',
          entryPoints: [
            {
              html: './src/index.html',
              js: './src/renderer.js',
              name: 'main_window',
              preload: {
                js: './src/preload.js',
              },
            },
          ],
        },
      },
    },
    new FusesPlugin({
      version: FuseVersion.V1,
      [FuseV1Options.RunAsNode]: false,
      [FuseV1Options.EnableCookieEncryption]: true,
      [FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,
      [FuseV1Options.EnableNodeCliInspectArguments]: false,
      [FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,
      [FuseV1Options.OnlyLoadAppFromAsar]: true,
    }),
  ],
};

Upvotes: 2

Views: 128

Answers (1)

avifen
avifen

Reputation: 1017

Add to webpack.rules.js:

 {
   test: /webtorrent[/\\].+\.node$/,
   use: 'node-loader',
 },

Change webpack.main.config.js to:

const path = require('path');

module.exports = {
  entry: './src/main.js',
  module: {
    rules: require('./webpack.rules'),
  },
  resolve: {
    extensions: ['.js', '.json'],
    alias: {
      // Add any necessary aliases here
    },
    fallback: {
      fs: false,
    },
  },
  output: {
    path: path.join(__dirname, 'dist'), 
    filename: 'main.js',
  },
};

Clean before next pack:

yarn clean
yarn package

And unless you have a reason not to: yarn add node-loader @vercel/webpack-asset-relocator-loader

Upvotes: 0

Related Questions