CODEWITHSUNDEEP
reactjswebpacknext.js
strangeQuirks
strangeQuirks

Reputation: 5940

Importing SVG image results in Warning: Prop `src` did not match. Server:

I installed file-loader in my next.js project and configured my next.config.js to be like this:

module.exports = {
    entry: './src/index.js',
    webpack: config => {
        const env = Object.keys(process.env).reduce((acc, curr) => {
            acc[`process.env.${curr}`] = JSON.stringify(process.env[curr]);
            return acc;
        }, {});

        config.plugins.push(new webpack.DefinePlugin(env));

        config.module.rules.push({
            test: /\.(png|jp(e*)g|svg|gif)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: 'images/[hash]-[name].[ext]',
                    },
                },
            ],
        });

        return config;
    }
};

I then have an image in /public/images/book-reading.svg

So I tried to import the image like this in a component I have within /src/components:

import BookReading from '../../public/images/book-reading.svg';

And using it like this:

 <img src={BookReading} />

However the image does not show and I get this warning:

Warning: Prop src did not match. Server: "images/364068d183bb962a8423031f65bab6ad-book-reading.svg" Client: "/_next/images/364068d183bb962a8423031f65bab6ad-book-reading.svg"

Any ideas?

Upvotes: 2

Views: 4232

Answers (1)

Getkey
Getkey

Reputation: 176

You need to add the publicPath and the outputPath to file-loader's options.

module.exports = {
    webpack: config => {
        config.module.rules.push({
            test: /\.(png|jp(e*)g|svg|gif)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: 'images/[hash]-[name].[ext]',
                        publicPath: `/_next/static/images/`,
                        outputPath: 'static/images',
                    },
                },
            ],
        });

        return config;
    }
};

This is not your case but for the sake of completeness: if you had used a different basePath, you'd have needed to add it at the beginning of your publicPath.

Source

Upvotes: 1

Related Questions