nextConfiguration not working as expected

[olikami]

In my understanding, this is how my next.config.js should look:

const withPlugins = require('next-compose-plugins');
const nextImages = require('next-images');
const bundleAnalyzer = require('@next/bundle-analyzer')({
	enabled: process.env.ANALYZE === 'true',
});

const nextConfig = {
	async rewrites() {
		return [
			{
				source: '/sitemap.xml',
				destination: '/api/sitemap',
			},
		];
	},
	webpack: (config, options) => {
		config.module.rules.push({
			test: [/\.jpe?g$/, /\.png$/, /\.svg$/],
			use: [
				options.defaultLoaders.babel,
				{
					loader: 'sizeof-loader',
					options: {
						limit: 5000,
						publicPath: '/_next/static/images/',
						outputPath: 'static/images/',
						name: '[name].[hash:8].[ext]',
					},
				},
			],
		});

		return config;
	},
	images: {
		domains: ['<private domain>'],
		imageSizes: [16, 32, 48, 64, 96, 128, 256, 384, 400, 500],
		deviceSizes: [640, 750, 828, 960, 1080, 1200, 1920, 2048, 3840],
	},
};

module.exports = withPlugins([
	[bundleAnalyzer],
	[nextImages],
], nextConfig);

This however break the usage of the next/Image tag.

If found a fix/hack by changing my module.exports:

module.exports = withPlugins([
	[bundleAnalyzer],
	[nextImages],
        nextConfig
]);

This works, but doesn't follow the usage example form the README. This somehow also breaks the bundleAnalyzer.

Am I missing something here? Happy to provide any additional information.

[jadbox]

I noticed the same issue, and I was able to fix it with the above solution.

[sa9sha9]

Simply, add image config to nextConfig live below and try to re-run yarn dev. It works for me.

const nextConfig =  {
    some: <config>,
    images: {
        domains: ['example.com'],
    },
    webpack: (config, options) =>  {
        <webpack configs>
    } 
}

module.exports = withPlugins([
    [bundleAnalyzer],
], nextConfig), 

No need to add next-images plugin.