title: Unable to load preload script - Electron.js Ubuntu 18.04.4
body: <p>I'm trying to understand how to effectively load the proload.js file in electron:</p>
  <p>Version &quot;electron&quot;: &quot;^9.1.2&quot;,
  Version &quot;electron-builder&quot;: &quot;^22.8.0&quot;,</p>
  <p>In background.js I put</p>
  <pre><code> webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      //preload: path.join(app.getAppPath(), &quot;preload.js&quot;),
      preload: path.join(__dirname, &quot;./preload.js&quot;),
    },
  </code></pre>
  <p>preload.js and background.js are in the same folder: src folder.</p>
  <p>this is my preload.js :</p>
  <pre><code>const {
      contextBridge,
      ipcRenderer
  } = require(&quot;electron&quot;);
  
  const path = require(&quot;path&quot;);
  
  contextBridge.exposeInMainWorld(
      &quot;api&quot;, {
          send: (channel, data) =&gt; {
              // whitelist channels
              let validChannels = [&quot;toMain&quot;];
              if (validChannels.includes(channel)) {
                  ipcRenderer.send(channel, data);
              }
          },
          receive: (channel, func) =&gt; {
              let validChannels = [&quot;fromMain&quot;];
              if (validChannels.includes(channel)) {
                  // Deliberately strip event as it includes `sender` 
                  ipcRenderer.on(channel, (event, ...args) =&gt; func(...args));
              }
          }
      }
  );
  </code></pre>
  <p>webpack.config.js :</p>
  <pre><code>import 'script-loader!./script.js';
  import webpack from 'webpack';
  const path = require('path');
  
  module.exports = {
    target: ['electron-renderer', 'electron-main', 'electron-preload'],
    pluginOptions: {
      electronBuilder: {
        chainWebpackMainProcess: config =&gt; {
          config.resolve.alias.set('jsbi', path.join(__dirname, 'node_modules/jsbi/dist/jsbi-
  cjs.js'));
        }
      },
   },
  };
  
  module.exports = {
    entry: './src/background.js',
    target: 'node',
    output: {
      path: path.join(__dirname, 'build'),
      filename: 'backend.js'
    }
  }
  
  module.exports = config =&gt; {
    config.target = &quot;electron-renderer&quot;;
    return config;
  };
  </code></pre>
  <p>I get these error messages:</p>
  <p><a href="https://i.stack.imgur.com/Bvvvy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Bvvvy.png" alt="enter image description here" /></a></p>
  <p>vue info</p>
  <pre><code>Environment Info:
  
    System:
      OS: Linux 5.4 Ubuntu 18.04.4 LTS (Bionic Beaver)
      CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz
    Binaries:
      Node: 14.5.0 - ~/.nvm/versions/node/v14.5.0/bin/node
      Yarn: 1.22.4 - /usr/bin/yarn
      npm: 6.14.5 - ~/.nvm/versions/node/v14.5.0/bin/npm
   npmGlobalPackages:
      @vue/cli: 4.4.6
  </code></pre>
  <p>vue.config.js  :</p>
  <pre><code>module.exports = {
    pluginOptions: {
      electronBuilder: {
        // Prevent bundling of certain imported packages and instead retrieve these external    
  dependencies at runtime.
        // In order to connect to websocket.
        externals: ['ggc'],
        builderOptions: {
          productName: 'GGC',
          win: {
            icon: './public/app.ico'
          },
          mac: {
            icon: './public/icons/Icon.icns',
            target: [
              'pkg',
              'dmg',
              'zip',
            ],
          },
          linux: {
            icon: './public/app.png'
          }
        }
      }
    }
  }
  
  // https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/configuration.html#webpack-    
  configuration
  
  module.exports = {
    configureWebpack: {
      // Configuration applied to all builds
    },
    pluginOptions: {
      electronBuilder: {
        chainWebpackMainProcess: (config) =&gt; {
          // Chain webpack config for electron main process only
        },
        chainWebpackRendererProcess: (config) =&gt; {
          // Chain webpack config for electron renderer process only
          config.plugin('define').tap((args) =&gt; {
            args[0]['IS_ELECTRON'] = true
            return args
          })
        },
        // Use this to change the entrypoint of your app's main process
        mainProcessFile: 'src/background.js',
        // Provide an array of files that, when changed, will recompile the main process and restart 
  Electron
        // Your main process file will be added by default
        //mainProcessWatch: ['src/myFile1', 'src/myFile2'],
        // Provide a list of arguments that Electron will be launched with during &quot;electron:serve&quot;,
        // which can be accessed from the main process (src/background.js).
        // Note that it is ignored when --debug flag is used with &quot;electron:serve&quot;, as you must launch 
  Electron yourself
        // Command line args (excluding --debug, --dashboard, and --headless) are passed to Electron 
  as well
        //mainProcessArgs: ['--arg-name', 'arg-value']
      }
    }
  }
  
  // https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/configuration.html#typescript-
  options
  
  module.exports = {
    pluginOptions: {
      electronBuilder: {
        // option: default // description
        disableMainProcessTypescript: false, // Manually disable typescript plugin for main process.    
  Enable if you want to use regular js for the main process (src/background.js by default).
        mainProcessTypeChecking: false // Manually enable type checking during webpck bundling for 
  background file.
      }
    }
  }
  
  
  tsconfig.json  :
  
  {
    &quot;compilerOptions&quot;: {
      &quot;target&quot;: &quot;esnext&quot;,
      &quot;module&quot;: &quot;esnext&quot;,
      &quot;strict&quot;: true,
      &quot;jsx&quot;: &quot;preserve&quot;,
      &quot;importHelpers&quot;: true,
      &quot;moduleResolution&quot;: &quot;node&quot;,
      &quot;experimentalDecorators&quot;: true,
      &quot;strictFunctionTypes&quot;: false,
      &quot;resolveJsonModule&quot;: true,
      &quot;esModuleInterop&quot;: true,
      &quot;allowSyntheticDefaultImports&quot;: true,
      &quot;sourceMap&quot;: true,
      &quot;baseUrl&quot;: &quot;.&quot;,
      &quot;types&quot;: [
        &quot;webpack-env&quot;,
        &quot;mocha&quot;,
        &quot;chai&quot;
      ],
      &quot;paths&quot;: {
        &quot;@/*&quot;: [
          &quot;src/*&quot;
        ]
      },
      &quot;lib&quot;: [
        &quot;esnext&quot;,
        &quot;dom&quot;,
        &quot;dom.iterable&quot;,
        &quot;scripthost&quot;
      ]
    },
    &quot;include&quot;: [
      &quot;src/**/*.ts&quot;,
      &quot;src/**/*.tsx&quot;,
      &quot;src/**/*.vue&quot;,
      &quot;tests/**/*.ts&quot;,
      &quot;tests/**/*.tsx&quot;,
      &quot;main/**/*.ts&quot;
    ],
    &quot;exclude&quot;: [
      &quot;node_modules&quot;
    ] 
  }
  </code></pre>
  <p>I looked around, but didn't any working solution:
  as described here: <a href="https://stackoverflow.com/questions/56478000/loading-preload-script-in-electron-and-vue">Loading preload script in Electron and Vue</a></p>
  <p>I added these lines in preload.js, but it didn't work:</p>
  <pre><code>window.onload = () =&gt; {
    const { dialog } = require(&quot;electron&quot;).remote;
  
    window.electron = {};
    window.electron.dialog = dialog; // now set properly
  };
  </code></pre>
  <p>I tried to follow the solution to the same problem but with React, instead of Vue.js, but I didn't succeed:
  <a href="https://github.com/electron/electron/issues/9920#issuecomment-336757899" rel="nofollow noreferrer">https://github.com/electron/electron/issues/9920#issuecomment-336757899</a></p>
  <p>Update 1)</p>
  <p>I put preload.js into dist_electron folder :</p>
  <pre><code>(base) marco@pc01:~/webMatters/electronMatters/ggc-new/dist_electron$   
  ls -lah
  total 1,5M
  drwxr-xr-x 2 marco marco 4,0K ago  6 09:11 .
  drwxr-xr-x 9 marco marco 4,0K ago  6 09:11 ..
  -rw-r--r-- 1 marco marco 1,5M ago  5 23:25 index.js
  -rw-r--r-- 1 marco marco 3,0K ago  5 23:22 package.json
  -rw-r--r-- 1 marco marco   54 ago  5 22:06 preload.js
  </code></pre>
  <p>In background.ts I modified the path to preload.js :</p>
  <pre><code>declare const __dirname: string
  win = new BrowserWindow({
    webPreferences: {
      nodeIntegration: false,
      preload: path.join(__dirname, &quot;../dist_electron/preload.js&quot;),
    }
  }
  </code></pre>
  <p>I added the following lines to webpack.config.js :</p>
  <pre><code>const CopyPlugin = require('copy-webpack-plugin');
  
  module.exports = {
    plugins: [
      new CopyPlugin({
        patterns: [
          { from: 'source', to: 'dest' },
          { from: 'other', to: 'public' },
        ],
        options: {
          concurrency: 100,
        },
      }),
    ],
  };
  </code></pre>
  <p>Executing yarn electron:serve I get this error:</p>
  <p><a href="https://i.stack.imgur.com/TNABm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TNABm.png" alt="enter image description here" /></a></p>
  <p>And it seems that what I've done corresponds to what is suggested to do here: <a href="https://stackoverflow.com/questions/57807459/how-to-use-preload-js-properly-in-electron">How to use preload.js properly in Electron</a></p>
  <p>So... what am I missing? How to solve the problem?</p>
  <p>Update 2)</p>
  <p>As suggested here: <a href="https://github.com/electron/electron/issues/9920#issuecomment-575839738" rel="nofollow noreferrer">https://github.com/electron/electron/issues/9920#issuecomment-575839738</a> and here <a href="https://github.com/reZach/secure-electron-template/blob/master/docs/secureapps.md" rel="nofollow noreferrer">https://github.com/reZach/secure-electron-template/blob/master/docs/secureapps.md</a> to keep the app safer nodeIntegration has to be kept false, as it is already as default. And ìI would like to keep the app safer.</p>
  <p>But anyway, I tried also to put nodeIntegration: true  :</p>
  <p>webPreferences: {
  nodeIntegration: true,
  preload: path.join(__dirname, &quot;../dist_electron/preload.js&quot;),
  }</p>
  <p>And this is the output:</p>
  <p><a href="https://i.stack.imgur.com/VfTnS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VfTnS.png" alt="enter image description here" /></a></p>
  <p>Marco</p>