New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error: Cannot resolve module 'fs' with electron and js #3012

Closed
fbmfbm opened this Issue Sep 19, 2016 · 9 comments

Comments

Projects
None yet
9 participants
@fbmfbm

fbmfbm commented Sep 19, 2016

Hi all,

I'm looking a way to working with electron (as node module ) and webpack, but we have some bug with fs module error with it.
But i think it's a common pbm for webpack with use of node and js.

We have some errore with fs not found : Error: Cannot resolve module 'fs'
and i know we can use the node option in webpack.config with fs as 'empty' but in this way the error is now " fs.readFileSync is not a function".

Anyone can help us to config webpack for this type of use ?

Context :

You can reproduce it with basic config for webpack and electron.
webpack.config.js:

let ExtractTextPlugin = require('extract-text-webpack-plugin');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    entry: './src/js/main.js',
    output : {
      path: 'dist/',
      filename: '[name].bundle.js'
    },
    devtool: 'source-map',
    module:{
      loaders:[
        {test: /\.html$/, exclude: 'node_modules', loader: 'html-loader'},
        {test: /\.scss$/, exclude: 'node_modules', loader: ExtractTextPlugin.extract(['css', 'sass'])},
        {test: /\.js$/, exclude: 'node_modules', loader: 'babel-loader'}
      ]
    },
    plugins:[
      new ExtractTextPlugin('app.bundle.css'),
      new HtmlWebpackPlugin({ template: './src/index.html'}),
      new CopyWebpackPlugin([{from: './src/electron_entry.js'}]),
    ],
}

the electron entry :

const {app, BrowserWindow} = require('electron')
let win
function createWindow () {

  win = new BrowserWindow({width: 800, height: 600})
  win.loadURL(`file://${__dirname}/index.html`)
  win.webContents.openDevTools()
  win.on('closed', () => {
    win = null
  })
}
app.on('ready', createWindow)
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
app.on('activate', () => {
  if (win === null) {
    createWindow()
  }
})

And some js for working :

let ipcMain = require('electron')

console.log("hello le monde")

let test = (id) => {
  return `Ok pour le retour ${id}`

  ipcMain.send('ok pour l\'envoi'); // <---- this use create the error
}

console.log(test(test me'))

Thank's a lot for your help

@sokra

This comment has been minimized.

Show comment
Hide comment
@sokra

sokra Sep 19, 2016

Member

You forgot to add target: "electron"

Member

sokra commented Sep 19, 2016

You forgot to add target: "electron"

@bebraw bebraw closed this Sep 19, 2016

@fbmfbm

This comment has been minimized.

Show comment
Hide comment
@fbmfbm

fbmfbm Sep 19, 2016

Sokra : That's the way !!!

Thank's a lot.
I'have looking for hours on web and doc but don't fins anything about that option.

fbmfbm commented Sep 19, 2016

Sokra : That's the way !!!

Thank's a lot.
I'have looking for hours on web and doc but don't fins anything about that option.

@PeterKnight PeterKnight referenced this issue in nuxt-community/electron-template Apr 6, 2017

Closed

How to communicate between main process and renderer processes? #4

@CodeAmend

This comment has been minimized.

Show comment
Hide comment
@CodeAmend

CodeAmend May 21, 2017

shuizhongyueming. Electron is not supported anymore when looking at your link. So what is the way now?

shuizhongyueming. Electron is not supported anymore when looking at your link. So what is the way now?

@shuizhongyueming

This comment has been minimized.

Show comment
Hide comment
@shuizhongyueming

shuizhongyueming May 22, 2017

@CodeAmend target electron is just the alias of electron-main

@CodeAmend target electron is just the alias of electron-main

@luckynum7 luckynum7 referenced this issue in caiobiodere/cordova-template-framework7-vue-webpack Jun 5, 2017

Closed

Feature request: Vuex #47

@AndrewKiri

This comment has been minimized.

Show comment
Hide comment
@AndrewKiri

AndrewKiri Jul 22, 2017

Worked for me after adding target: electron
webpack v.3.3.0

Worked for me after adding target: electron
webpack v.3.3.0

@dpkshrma

This comment has been minimized.

Show comment
Hide comment
@dpkshrma

dpkshrma Sep 17, 2017

@sokra thanks! adding target: electron worked for me but should there not be a better error message? Had I not found this thread, it would have been really difficult for me to get to bottom of this issue.

dpkshrma commented Sep 17, 2017

@sokra thanks! adding target: electron worked for me but should there not be a better error message? Had I not found this thread, it would have been really difficult for me to get to bottom of this issue.

@gknapp

This comment has been minimized.

Show comment
Hide comment
@gknapp

gknapp Apr 11, 2018

electron is an alias in webpack 4, there are now two targets available: electron-main and electron-renderer.

gknapp commented Apr 11, 2018

electron is an alias in webpack 4, there are now two targets available: electron-main and electron-renderer.

@domoritz

This comment has been minimized.

Show comment
Hide comment
@domoritz

domoritz Apr 16, 2018

I'm trying to get Monaco to work in electron and even though I set the target to electron in webpack 4, I still get an error for a wrong import of fs inside the typescript language service. Could this be a Babel issue or does setting the target to electron only fix fs inside electron? Thanks for you help!

I'm trying to get Monaco to work in electron and even though I set the target to electron in webpack 4, I still get an error for a wrong import of fs inside the typescript language service. Could this be a Babel issue or does setting the target to electron only fix fs inside electron? Thanks for you help!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment