Bug: disabling manifest doesn't work, images loaded as modules?

[thany]

Summary: disabling manifest by setting manifest: false as per the documentation, does not work. Files are always hashed during build.

Using Neutrino 8.3 with @neutrino/web, Node 10.13, npm 6.4.3, Windows 10.

Perhaps related: it manages to output some images directly in the build directory, even though I've placed them in the static directory. When I set image: false I get errors that indicate it's trying to parse images as modules 🤔

My `.neutrinorc.js`

const { EnvironmentPlugin } = require('webpack');

module.exports = {
	options: {
		mains: {
			'land-van-bartje': 'land-van-bartje',
			aelderholt: 'aelderholt'
		}
	},
	use: [
		[
			'@neutrinojs/web',
			{
				html: {
					title: 'Park in alle seizoenen',
					lang: 'nl',

					// https://www.tenpixelsleft.com/target-ie10-or-ie11-using-javascript/
					bodyHtmlSnippet: `
						<script>if (!!window.MSInputMethodContext && !!document.documentMode) {
							document.write('<script crossorigin="anonymous" src="https://unpkg.com/core-js-bundle@3.1.4/minified.js"></' + 'script>');
							document.write('<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.matches"></' + 'script>');
						}</script>`
				},

				// Please do not touch my images! Just don't do ANYTHING with them!
				image: false,

				// Do not hash filenames! Just leave everything be!
				manifest: false,

				targets: {
					browsers: ['last 2 versions', 'ie >= 11']
				},
				babel: {
					presets: [
						[
							'babel-preset-env',
							{
								targets: {
									browsers: ['last 2 versions', 'ie >= 11']
								}
							}
						]
					]
				}
			}
		],
		[
			'@neutrinojs/style-loader',
			{
				test: /\.(css|sass|scss)$/,
				moduleTest: /\.module\.(css|sass|scss)$/,

				// Note: loaders must be specified in reverse order.
				loaders: [
					{
						loader: 'postcss-loader',
						options: {
							plugins: [require('autoprefixer')]
						}
					},
					{
						loader: 'sass-loader',
						useId: 'sass'
					}
				],
				test: /\.scss$/
			}
		],
		neutrino => {
			neutrino.config.output.filename('[name].js');

			neutrino.config.plugins.delete('runtime-chunk');
			neutrino.config.plugins.delete('vendor-chunk');

			// Inject 'development'/'production' into the runtime.
			neutrino.config.plugin('env').use(EnvironmentPlugin, [
				{
					ENV_URL:
						process.env.NODE_ENV === 'production'
							? '/production-url/'
							: ''
				}
			]);
		}
	]
};

Produced error:

C:\workspaces\landal-pias-prototype>npm run build

> landal-pias-prototype@1.0.0 build C:\workspaces\landal-pias-prototype
> neutrino build

× Building project failed
./src/static/img/LJE/Landal_App_Corporate_95242.jpg
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./src/aelderholt.html 1:14374-14432
 @ ./src/aelderholt.js
 @ multi ./src/aelderholt
./src/static/img/700x525.png

etc

And here's a main file:

import html from './land-van-bartje.html';

const root = document.getElementById('root');
root.innerHTML = html;

import './js/index';

Which also needs that index.js:

import '../scss/index.scss';
// irrelevant imports

// This is needed for Hot Module Replacement
if (module.hot) {
	module.hot.accept();
}

document.addEventListener('DOMContentLoaded', () => {
	// irrelevant init guff
});

[edmorley]

Hi! Sorry for the delayed reply.

This error:

./src/static/img/LJE/Landal_App_Corporate_95242.jpg
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.

...means that webpack doesn't know how to load that JPG file.

When that type of error occurs, it generally means that a webpack loader is not configured correctly.

Looking at your .neutrinorc.js (thank you for including it, very helpful! :-)) I see:

// Please do not touch my images! Just don't do ANYTHING with them!
image: false

This is disabling the Neutrino image-loader middleware, which is why webpack is not able to understand how to import images. I'm presuming the use of this option was to disable image minification instead? If so, that is instead disabled like so:

      minify: {
        babel: {},
        style: {},
        image: false
      },

These options are documented here:
https://neutrinojs.org/packages/web/#preset-options

In the config there is also:

// Do not hash filenames! Just leave everything be!
manifest: false,

...the manifest option does not have anything to do with the hashed filenames. To control those, override filename and chunkFilename instead:
https://github.com/neutrinojs/neutrino/blob/v8.3.0/packages/web/index.js#L238
https://github.com/neutrinojs/neutrino/blob/v8.3.0/packages/web/index.js#L147

That said, I would strongly recommend using Neutrino 9 (for which there is a release candidate, see #1129) rather than Neutrino 8, since it fixes many bugs, is faster, and also since image minification has been removed, so you won't need to change that setting anyway.

Hope that helps :-)

[timkelty]

@thany it may also be worth noting that by default, neutrino loads images via url-loader, so if your image file size is under the specified threshold, it will improt as a base64 encoded URL, and thus not copy the image to your options.output directory.

If you want to disable this behavior, you can pass {limit: false} to @neutrinojs/image-loader.