Usage with Next.js

[kutyel]

I know this shouldn't be here but I post it as a question in case anyone made it work. I am trying to use this plugin in my Next.js app since you can extend the webpack config:

const withCSS = require('@zeit/next-css')
module.exports = withCSS({
  webpack: config => {
    config.module.rules.push({
      test: /\.(png|jpe?g)$/,
      loaders: [
        {
          loader: 'lqip-loader',
          options: {
            path: '/media',
            name: '[name].[ext]',
            base64: true,
            palette: true,
          },
        },
      ],
    })
    return config
  }
})

This is what I have right now but it is not working 😢 Any help would be much appreciated!!

[k-yomo]

For who have the same problem, this works.

// next.config.js
const nextConfig = {
  webpack: (config, options) => {
    const { isServer, dev } = options;
    config.module.rules.push({
      test: /\.(jpe?g|png|svg|gif|ico|webp)$/,
      use: [{
        loader: 'lqip-loader',
        options: {
          fallback: 'file-loader',
          base64: !dev,
          publicPath: '/_next/static/images/',
          outputPath: `${isServer ? '../' : ''}static/images/`,
          name: '[name]-[hash].[ext]'
        }
      }]
    })
  }
}

module.exports = nextConfig;

UPDATE: if you're using next-optimized-images:

// next.config.js
const withOptimizedImages = require('next-optimized-images');

const imageOptimizationConig = {
  handleImages: ['jpeg', 'jpg', 'png', 'gif'],
  // ...other options
};

module.exports = withOptimizedImages({
  ...imageOptimizationConig,
  ...nextConfig,
});

[jamesryan-dev]

thanks for this !

const withCSS = require('@zeit/next-css')
  module.exports = withCSS({
    webpack: config => {
      const { isServer, dev } = options
      config.module.rules.push({
            test: /\.(jpe?g|png|svg|gif|ico|webp)$/,
            use: [
              {
                loader: 'lqip-loader',
                options: {
                  fallback: 'file-loader',
                  base64: !dev,
                  publicPath: '/_next/static/images/',
                  outputPath: `${isServer ? '../' : ''}static/images/`,
                  name: '[name]-[hash].[ext]'
                }
              }
            ]
          })
    return config
  },
  cssLoaderOptions: {
      url: false
  }
})

ReferenceError: options is not defined

This is my nextconfig.js but alas i don't think it's working? any help gentlemen/people?

[k-yomo]

@jimmynames You should take options as the second param！ webpack: (config, options) => {

[jamesryan-dev]

Yes I recently came to this solution also - thankyou however for the speedy response!

I wonder whilst you're still here ->

I'm logging as per the docs suggestion:

import whiteIpad from './images/white-ipad.png';
import whiteIpad2 from './images/white-ipad@2x.png';

console.log('preSrc', whiteIpad.preSrc);
// outputs: "data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhY....
// the object will have palette property, array will be sorted from most dominant colour to the least
console.log('pallette', whiteIpad.palette) // [ '#628792', '#bed4d5', '#5d4340', '#ba454d', '#c5dce4', '#551f24' ]
console.log('src', whiteIpad.src) // that's the original image URL to load later! 

however even tho I'm not getting a 404 I'm finding the first two return undefined

preSrc undefined
index.tsx?b6c3:9 pallette undefined
index.tsx?b6c3:11 src /_next/static/images/white-ipad-464bea5b0634161ee391312f77a71acb.png ```

Any ideas? 

[k-yomo]

 base64: true, // default: true, gives the base64 encoded image
 palette: true // default: false, gives the dominant colours palette

Since you set base64: !dev、preSrc(base64) image will not be generated in dev env. palette will not be generated unless you set palette: true, since it's default is false

[jamesryan-dev]

omg thankyou so much seriously --!!

[jarrodmedrano]

I have almost got this working using @jimmynames code, but I receive ./pages/images/maskLarge3.png TypeError: Cannot read property '1' of null anyone know what I'm doing wrong?

[jamesryan-dev]

Yo @jarrodmedrano I believe you're trying to import the images? If so --> I got this error too..

I ended up using require instead and no issues..

              srcSet={`${require(`./images/white-ipad.png`)} 1x, ${require(`./images/white-ipad@2x.png`)} 2x`}
              /> ```

[jarrodmedrano]

Thanks but I am also using require.

<div className="bg" style={{ backgroundImage:url(${require(./images/maskLarge.png)})` }}

[jamesryan-dev]

ahh sorry then - i remember this issue but i can't remember how else i resolved it if it wasn't for require.. hopefully someone else can help you, maybe @k-yomo

[iamhosseindhv]

I receive ./pages/images/maskLarge3.png TypeError: Cannot read property '1' of null

@jarrodmedrano Facing the same issue. Please let me know if you figured.

[jarrodmedrano]

I receive ./pages/images/maskLarge3.png TypeError: Cannot read property '1' of null

@jarrodmedrano Facing the same issue. Please let me know if you figured.

I did not. I just went with optimizeImages

const withCSS = require('@zeit/next-css')
module.exports = withPlugins([

  [withOptimizedImages, {
    webpack(config) {
      config.resolve.alias.images = path.join(__dirname, "./pages/images");
      return config;
    },
    handleImages: ['jpeg', 'png', 'svg', 'webp', 'gif'],
    imagesName: '[name]-[hash].[ext]',
    optimizeImages: true,
    optipng: {
      optimizationLevel: 5,
      interlaced: true,
    },
  }]
  , withTM,
], nextConfig);

[iamhosseindhv]

I asked @zouhir and he was kind enough to add me as a collaborator.

Some long standing bug fix and improvements have been merged into master and a patch will be published soon.

Namely, the issue we had @jarrodmedrano was fixed by #22

[iamhosseindhv]

https://github.com/zouhir/lqip-loader/issues/13#issuecomment-499617860 is the updated/correct answer.

Also new version v2.2.1 has been published.

[SalahAdDin]

What's about using this with the new next/image component?

[jeremylynch]

Issue submitted to next.js for use of lqip-loader in next/image

https://github.com/vercel/next.js/issues/21941