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.