Receiving "Uncaught ReferenceError: ʎɐɹɔosǝʌɹǝs is not defined" in production build

[mindpivot]

• Webpack Version: 4.29.0
• Operating System (or Browser): macOS Mojave
• Node Version: 10.13.0
• webpack-plugin-serve Version: 0.4.0

How Do We Reproduce?

Standard webpack build, the following configuration:

plugs.push(new Serve({
		hmr: true,
		historyFallback: true,
		open: true,
		port: 9000,
		status: true,
		middleware: (app, builtins) => {
			const koaStaticOpts = {
				extensions: ['.html', '.htm']
			};
			builtins.static([path.join(ROOT_DIR, 'stub'), path.join(ROOT_DIR, 'dist')], koaStaticOpts)
		}
	}));

then I run my build command from package.json:

cross-env npx wp --mode production --site SITENAME --progress
// side-note: the --progress flag doesn't work either but that's not what i'm reporting here

Expected Behavior

the production build to be free of all references to/code around WPS or any variables output by it gracefully handled to prevent ReferenceErrors.

I tried hiding the "plugs.push" call behind a "if production" flag but was receiving a webpack_hash is undefined error. Upon removing that I got the error I am now seeing.

Actual Behavior

It would seem that WPS is being included in the production bundle. It also looks like, despite the production flag being set, that React Hot Loader is also still being looked for/called (see screenshot). Not sure what's going on but it was my understanding that React Hot Loader and WPS no-op altogether when built to production.

[mindpivot]

Ok, I've resolved my own issue. Not sure if this is a "proper" fix but it results in a clean, error-free build for me.

The magic sauce is in the webpack.config.js entry portion where we load 'webpack-plugin-serve/client'. Rather than always loading it as the docs suggest, I'd recommend some variation of the following for a multi-entry setup:

entry: {
    "main": [
        'path/to/file.js',
        !isProduction ? 'webpack-plugin-serve/client' : null
    ].filter(Boolean),
    "another-entry": [
        "path/to/another-entry.js",
        !isProduction ? 'webpack-plugin-serve/client' : null
    ].filter(Boolean)
}

and for a single-entry setup:

entry: [
    'path/to/file.js',
    !isProduction ? 'webpack-plugin-serve/client' : null
].filter(Boolean)

The filter(Boolean) method on arrays removes any empty array values. the result is that WPS is completely removed from all portions of the production build leaving me with no undefined variables.

[shellscape]

This particular undefined error keeps popping up. I think we need to wrap that line and output a better message for folks. You are correct though. If the entry is included and the plugin is not, then there will be a reference error. Still, I think we can do better, output a more useful error message and perhaps even link to the FAQ in that message.

// side-note: the --progress flag doesn't work either but that's not what i'm reporting here

No worries about including that. FWIW webpack-nano doesn't support that flag.

[matheus1lva]

What would be the best warn message for it?

Like: "'webpack-plugin-serve/client' is intended to be added when the plugin is being used. Check this link to learn more: path/to/faq/url".

[mindpivot]

Since it sounds like this error is intermittent perhaps something generic stating this error comes up from time-to-time and to check (FAQ URL) for possible resolutions.

On the FAQ page you could detail the various solutions people have come up to fix the problem. Once all the various causes have been isolated maybe then put in a more specific error.

[matheus1lva]

For what i could see (and makes sense) the fact that the plugin is not present, ʎɐɹɔosǝʌɹǝs turns to be not defined (because the plugin inserts that with DefinePlugin). But i do agree, let's make it generic and detail a little more on the FAQ.

[mindpivot]

That is true about the plugin not being present. When the plugin was present I was getting an entirely different error out of webpack which led me to remove it from my plugins list on production builds in the first place.

I was getting __webpack_hash__ is not defined errors in production with both the plugin and the client entry point in my configuration. The only way I was able to go error-free was removing the plugin AND the client file in the entry point on production builds.

[shellscape]

Fixed in ac542c0. Cheers 🍻