window is undefined

[obecny]

I have an electron app build on top of "electron-react-boilerplate". When I try to use build and then run I'm getting an error "window is undefined".
After some investigation it turn out that the problem is related with package "form-data"

"The easy fix" is to simply remove browser param from package.json for "form-data" in node-modules.

Now the main question is that somehow related to form-data itself or a webpack or the configuration for webpack in this project.
I have already post the same question in "form-data" repo
form-data/form-data#252

Any idea how this could be solved in a proper way would be really useful,
thx :)

[amilajack]

You should fork the repo, remove the browser field from your fork, and add it as a github dep:

dependencies: {
  form-data: 'github:username/form-data' # Or whatever your fork is
}

If the package requires compilation, try adding the build directories to version control

Another workaround is creating a temporary npm package.

Let me know how this works out.

[amilajack]

Here's an example:

https://github.com/amilajack/popcorn-time-desktop/blob/master/package.json#L174

[jaxgeller]

There's probably a webpack option like externals or something else around this, but in the mean time I've created a fork here https://github.com/jaxgeller/form-data you can use it like this "form-data": "github:jaxgeller/form-data" in your package.json.

[worldjoe]

I have this problem too. The underlying problem is that Webpack doesn't fully understand the electron nor electron-main when trying to figure out if the target is web or not.

One fix is to add this to webpack.config.electron.js:

resolve: { packageAlias: "main" },

Another fix appears to be to bump the webpack version. Pull request coming.

[worldjoe]

I'm testing this fix out. I cleaned my node_modules folder and the fix doesn't seem to work anymore. Not sure if it's dependent on a specific version of webpack. But I think the root cause is still this. webpack (1.x) defaults to browser when packageAlias is not set.

[obecny]

@worldjoe indeed , doesn't work for me either :(

[obecny]

@worldjoe so far the fork and removing the browser from package.json only works, hopefully there is going to be a better one

[amilajack]

I believe this is a webpack issue or an issue with the package itself. I had to do this for my own projects that use this boilerplate.

[worldjoe]

The problem is in webpack.

https://github.com/webpack/webpack/blob/webpack-1/lib/WebpackOptionsDefaulter.js#L75

this code should doesn't understand the electron nor electron-main target.

It should probably look like this:

    function defaultByTarget(value, web, webworker, node, nodeWebkit, def) {
        if(value !== undefined) return value;
        switch(options.target) {
            case "web":
                return web;
            case "webworker":
                return webworker;
            case "node":
            case "electron":
            case "electron-main":
            case "async-node":
                return node;
            case "node-webkit":
                return nodeWebkit;
            default:
                return def;
        }
    }

I need to do more testing.

[worldjoe]

OK. sorry for all the speculation. For starters, the base configuration shouldn't have a packageMain of browser listed:
https://github.com/chentsulin/electron-react-boilerplate/blob/master/webpack.config.base.js#L21

Also, webpack-merge won't let you override so simply restating the packageMain in webpack.config.electron.js doesn't work.

[worldjoe]

Can someone else verify?

Add these lines to webpack.config.development.js

  resolve: {
    packageMains: ['webpack', 'browser', 'web', 'browserify', ['jam', 'main'], 'main']
  },

webpack.config.electron.js:

  resolve: {
    packageMains: ["webpackNode", "node", "main"]
  },

webpack.config.base.js:

  resolve: {
    extensions: ['', '.js', '.jsx', '.json']
  },

[ArnaudValensi]

@worldjoe yes, it fixes the issue!