I'm working on an e-commerce project for a client using nextJs. I was trying to optimize images using next-optimized-images. Though it works fine I get the error in terminal. I'm new to webpack and I have configured my next.config based on https://github.com/cyrilwanner/next-optimized-images
next.config
require('dotenv').config();
const withPlugins = require('next-compose-plugins');
const withOptimizedImages = require('next-optimized-images');
const nextConfig = {
env: {
PORT: process.env.PORT,
REST_URL: process.env.REST_URL,
GRAPHQL_URL: process.env.GRAPHQL_URL,
FRONTEND_URL: process.env.FRONTEND_URL,
RAZORPAY_KEY: process.env.RAZORPAY_KEY,
RAZORPAY_SECRET: process.env.RAZORPAY_SECRET,
MAGENTO_ADMIN_TOKEN: process.env.MAGENTO_ADMIN_TOKEN,
},
};
module.exports = withPlugins(
[
[
withOptimizedImages,
{
inlineImageLimit: 8192,
imagesFolder: 'images',
imagesName: '[name]-[hash].[ext]',
handleImages: ['jpeg', 'png', 'svg', 'webp', 'gif'],
optimizeImages: true,
optimizeImagesInDev: true,
mozjpeg: {
quality: 80,
},
optipng: {
optimizationLevel: 3,
},
pngquant: false,
webp: {
preset: 'default',
quality: 75,
},
},
],
],
nextConfig
);