import { ipcRenderer } from 'electron' produces this error: __dirname is not defined

Question

With this simple vue page:

<template>
  <div class="home">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
import { ipcRenderer } from 'electron'

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  data() {
    return {
      dato: null
    }
  },
  methods: {
    rendererFunct () {
      //ipcRenderer.on('setting', (event, arg) => {
        //console.log(arg);
      //})
    }
  }
}
</script>

The only presence of import { ipcRenderer } from 'electron' produces the error __dirname is not defined :

Is this problem is something related to webpack configuration or it is due to something else?

This is my webpack.config.js :

import 'script-loader!./script.js';
import webpack from 'webpack';

const path = require('path');

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  target: ['electron-renderer', 'electron-main', 'electron-preload'],
  pluginOptions: {
    electronBuilder: {
      chainWebpackMainProcess: config => {
        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 => {
  config.target = "electron-renderer";
  return config;
};

module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: 'source', to: 'dest' },
        { from: 'other', to: 'public' },
      ],
      options: {
        concurrency: 100,
      },
    }),
  ],
};

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
      },
    ],
  },
};

const supportedLocales = ['en-US', 'it'];

export default const config = {
  plugins: [
    new webpack.ContextReplacementPlugin(
      /date\-fns[\/\\]/,
      new RegExp(`[/\\\\\](${supportedLocales.join('|')})[/\\\\\]index\.js$`)
    )
  ]
}

This is vue.config.js :

module.exports = {
  configureWebpack: {
    // Configuration applied to all builds
  },
  pluginOptions: {
    electronBuilder: {
      chainWebpackMainProcess: (config) => {
        // Chain webpack config for electron main process only
      },
      chainWebpackRendererProcess: (config) => {
        config.plugin('define').tap((args) => {
          args[0]['IS_ELECTRON'] = true
          return args
        })
      },
      mainProcessFile: 'src/background.js',
      mainProcessWatch: ['src/preload.js'],
    }
  }
}

module.exports = {
  pluginOptions: {
    electronBuilder: {
      disableMainProcessTypescript: false,
      mainProcessTypeChecking: false
    }
  }
}

Electron: version 9.0.0
webpack: version 4.44.1
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
Browsers: Chrome: 84.0.4147.105 Firefox: 79.0

Looking forward to your kind help. Marco

if you have found a solution, it is always nice to post this so other people can find it. Have you had any progress on this issue? — miThom, May 18 '21 at 14:23
Does this answer your question? [How to import ipcRenderer in vue.js ? \_\_dirname is not defined](https://stackoverflow.com/questions/63615355/how-to-import-ipcrenderer-in-vue-js-dirname-is-not-defined) — rafalimaz, Sep 03 '21 at 18:36

miThom · Answer 1 · 2021-03-04T19:22:59.683

0

__dirname is a NodeJS variable, in recent electron versions, node integration is disabled by default. When opening your BrowserWindow, you should add the following to the options:

webpreferences:{
    nodeIntegration: true
}

This is however STRONGLY DISCOURAGED as this opens up security issues.

this seems to solve it for most people (for me sadly enough i now get the next error: fs.existsSync is not a function)

a better solution i to change your bundler to the correct build mode. You should not be building for node but for web, so target:esnext or something.

if something requires node access, this should be solved by running it in the background thread or the preload scripts.

edited Mar 04 '21 at 19:22

answered Oct 13 '20 at 18:03

miThom

373
2
11

1

Downvoted because it is irresponsible to blindly recommend `nodeIntegration: true`. Due to security concerns, the electron developers [strongly discourage](https://github.com/electron/electron/issues/9920#issuecomment-575839738) enabling `nodeIntegration`. See also [this answer](https://stackoverflow.com/a/66035397/1444650) for a history. – Benjamin Bray Mar 04 '21 at 14:07
@BenjaminBray i completely agree, i slightly updated my answer, but it is still not good, i encourage you to update my answer to contain your links – miThom Mar 04 '21 at 19:24

score 0 · Answer 2 · answered Sep 03 '21 at 18:36

You can apply the solution described on this post How to import ipcRenderer in vue.js ? __dirname is not defined

In this way you can call this method from vue files:

window.ipcRenderer.send(channel, args...)

Just make sure you configure preload.js on vue.config.js:

// vue.config.js - project root
module.exports = {
  pluginOptions: {
    electronBuilder: {
       preload: 'src/preload.js'  //make sure you have this line added
    }
  }
}

import { ipcRenderer } from 'electron' produces this error: __dirname is not defined

2 Answers2

Linked