Webpack 2 compatibility : ERROR in ReferenceError: self is not defined

I can’t having it working with Webpack 2, because it runs on server and returns :

ERROR in ReferenceError: self is not defined

Does one have been able solving it? Would it be possible to run it on client only ?

[bpevs]

@tharnach So I figured it out. The problem is actually caused by Webpack target: https://webpack.js.org/configuration/target/#target

Basically, packages that are supposed to be able to run in node AND web environments (like isomorphic-fetch), have to deal with these environments separately, and many times have separate builds for both. The thing is that when you’re building with Webpack for a web application, you probably have the target set to “web”, so the package will act like there’s a browser there, when there isn’t. So our application is telling all of our dependencies that we’re running in a browser, but static-site-generator-webpack-plugin is actually running in node!

There are two ways to solve this for real:

1. Change the Target

Webpack Config adjustments for static site creation:

{
  target: "node", // <- NOT "web"
  plugins: [
    new StaticSiteGeneratorPlugin({
      paths: prerenderedPaths
    })
  ]
}

1.5 For Universal/Isomorphic Sites, use Two Builds

For universal/isomorphic sites and applications, you should probably use two builds, one for the static site, and one for the client code. Use a node target for building the html files with static-site-generator-plugin, and then use a web target WITHOUT the static-site-generator-plugin for your client javascript. This kind of makes sense anyway, since in general, bundling a normal universal app requires building the node stuff and the web stuff separately…

Webpack Config adjustments for client code:

{
  target: "web",
  plugins: [] // <- NO StaticSiteGeneratorPlugin
}

2. Run static-site-generator-webpack-plugin as if target is node

If we want to update this plugin to prevent this from happening, it would probably be a sane default for static-site-generator-webpack-plugin to assume a node target while building html. This seems like something that a bored/motivated person could look into (I don’t know a ton about building webpack plugins, and I’m too lazy to learn this right now) 😆

This way, the plugins that are meant to be isomorphic/universal, and tell that they’re in a node environment, and adjust accordingly.

Hacky Way

There is, of course, always a hacky way as well… 😛

if (typeof document !== "undefined") {
	require("isomorphic-fetch");
}

if (typeof fetch == "undefined") {
	global.fetch = function() { return Promise.resolve() };
}

fetch("https://www.somethingsomethingurl.com")
	.then(function(response) {
		console.log(response);
	});

[dbrrt]

Maybe it’d be nice now to have an up-to-date working example available under the plugin repository?