No package found which can optimize images.

[behcetilhan]

lqip-loader is installed but i'm getting this error on server console.

Here is my next.config
module.exports = withPlugins([optimizedImages, withSass]);

[cyrilwanner]

Hi @behcetilhan
Thank you a lot for reporting this bug! I just published version 2.5.1 which fixes this warning.

[wouterds]

Hi, I installed the latest version of next-optimized-images (2.5.1) but I still get the same warning.

    "next-optimized-images": {
      "version": "2.5.1",
      "resolved": "https://registry.npmjs.org/next-optimized-images/-/next-optimized-images-2.5.1.tgz",
      "integrity": "sha512-5/qcxsneO0phfWJ0LXOTEwE7Xs5pZ2dg18abfK0vVvG8kegXge8aX3gu3fHLobRZA24HYwDDLo2ody7ekStSsQ==",
      "dev": true,
      "requires": {
        "chalk": "^2.4.2",
        "figures": "^3.0.0",
        "file-loader": "^3.0.1",
        "imagemin": "^6.1.0",
        "img-loader": "^3.0.1",
        "raw-loader": "^2.0.0",
        "url-loader": "^1.1.2"
      }
    },

[wouterds]

Same issue with current master branch.

[cyrilwanner]

Hi @wouterds
Which optimization packages do you have installed?

[wouterds]

Hi @cyrilwanner 👋, I have these installed;

"imagemin-mozjpeg": "^8.0.0",
"imagemin-optipng": "^7.0.0",
"imagemin-svgo": "^7.0.0",

[murillo94]

The same here, I'm using "imagemin-optipng": "^7.0.0". It might be reopen

[rmarku]

same here, the Warning appear and have optimizer installed.

  "dependencies": {
...
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-sass": "^1.0.1",
    "imagemin-gifsicle": "^6.0.1",
    "imagemin-mozjpeg": "^8.0.0",
    "imagemin-optipng": "^7.0.0",
    "imagemin-svgo": "^7.0.0",
    "next": "^8.1.0",
    "next-compose-plugins": "^2.2.0",
    "next-images": "^1.1.1",
    "next-optimized-images": "^2.5.1",
    "node-sass": "^4.12.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "reactstrap": "^8.0.0",
    "reactstrap-confirm": "^1.0.4",
....
  },

[jecassis]

There is indeed a problem in newer (i.e. 12.x.x) versions of node. My workaround is to use the undocumented configuration variable overwriteImageLoaderPaths like so in next.config.js:

module.exports = withPlugins([
    [withOptimizedImages, {
        overwriteImageLoaderPaths: require.resolve.paths('')[0],
    }],
...

One fix that I've tested is to replace {} with undefined in the two locations in lib/loaders/index.js, i.e.:
require.resolve(name, resolvePath ? { paths: [resolvePath] } : undefined);

It seems that passing an empty object (but defined) with no paths key means it'll only look in the GLOBAL_FOLDERS for the module.

[Juhannuspukki]

I have the same issue, the only package I have installed is mozjpeg.

 "dependencies": {
    ...
    "imagemin-mozjpeg": "^8.0.0",
    "next": "^8.1.0",
    "next-optimized-images": "^2.5.0",
    ...
  },

[cyrilwanner]

Sorry for the late reply, I had some exams last week and wasn't active on github because of this.

@jecassis thank you very much for the hint with node 12. It was indeed the problem that you have described.

I just published a patch on npm which should fix this problem. Can you install v2.5.2 and check if the error is now gone? Thanks!

[zifahm]

using node 12.17.0 same issue again,
I have installed response-loader with sharp
any workarounds?

[Rafael-Batista-Dev]

Olá pessoal, estou recebendo o seguinte erro.

Todas as dependência estão instaladas, alguma dica?

As imagens vem do Strapi CMS que está na AWS. Tentei usar a API de imagem nativa do nextjs, porém um brother falou que não ia rola, pois as mesma tão estática em um bucket.

@cyrilwanner
Proprietário
Cyrilwanner

yarn run v1.22.5
$ next dev
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
ready - started server on http:https://localhost:3000
Error: Cannot find module 'D:\Projetos\MeuSite\MeuSiteFront\node_modules\responsive-loader\lib\cjs.js\sharp'
Require stack:
- D:\Projetos\MeuSite\MeuSiteFront\node_modules\next-optimized-images\lib\loaders\responsive-loader.js
- D:\Projetos\MeuSite\MeuSiteFront\node_modules\next-optimized-images\lib\resource-queries.js
- D:\Projetos\MeuSite\MeuSiteFront\node_modules\next-optimized-images\lib\loaders\img-loader.js
- D:\Projetos\MeuSite\MeuSiteFront\node_modules\next-optimized-images\lib\loaders\index.js
- D:\Projetos\MeuSite\MeuSiteFront\node_modules\next-optimized-images\lib\index.js
- D:\Projetos\MeuSite\MeuSiteFront\next.config.js
- D:\Projetos\MeuSite\MeuSiteFront\node_modules\next\dist\next-server\server\config.js
- D:\Projetos\MeuSite\MeuSiteFront\node_modules\next\dist\next-server\server\next-server.js
- D:\Projetos\MeuSite\MeuSiteFront\node_modules\next\dist\server\next.js
- D:\Projetos\MeuSite\MeuSiteFront\node_modules\next\dist\server\lib\start-server.js
- D:\Projetos\MeuSite\MeuSiteFront\node_modules\next\dist\cli\next-dev.js
- D:\Projetos\MeuSite\MeuSiteFront\node_modules\next\dist\bin\next
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:885:15)
    at Function.Module._load (internal/modules/cjs/loader.js:730:27)
    at Module.require (internal/modules/cjs/loader.js:957:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at getResponsiveLoaderOptions (D:\Projetos\MeuSite\MeuSiteFront\node_modules\next-optimized-images\lib\loaders\responsive-loader.js:18:15)
    at getResourceQueries (D:\Projetos\MeuSite\MeuSiteFront\node_modules\next-optimized-images\lib\resource-queries.js:133:26)
    at applyImgLoader (D:\Projetos\MeuSite\MeuSiteFront\node_modules\next-optimized-images\lib\loaders\img-loader.js:102:10)
    at appendLoaders (D:\Projetos\MeuSite\MeuSiteFront\node_modules\next-optimized-images\lib\loaders\index.js:137:14)
    at Object.webpack (D:\Projetos\MeuSite\MeuSiteFront\node_modules\next-optimized-images\lib\index.js:62:24)
    at getBaseWebpackConfig (D:\Projetos\MeuSite\MeuSiteFront\node_modules\next\dist\build\webpack-config.js:136:360)
    at async Promise.all (index 0)
    at async HotReloader.start (D:\Projetos\MeuSite\MeuSiteFront\node_modules\next\dist\server\hot-reloader.js:14:2403)
    at async DevServer.prepare (D:\Projetos\MeuSite\MeuSiteFront\node_modules\next\dist\server\next-dev-server.js:15:414)
    at async D:\Projetos\MeuSite\MeuSiteFront\node_modules\next\dist\cli\next-dev.js:22:1 {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'D:\\Projetos\\MeuSite\\MeuSiteFront\\node_modules\\next-optimized-images\\lib\\loaders\\responsive-loader.js',
    'D:\\Projetos\\MeuSite\\MeuSiteFront\\node_modules\\next-optimized-images\\lib\\resource-queries.js',
    'D:\\Projetos\\MeuSite\\MeuSiteFront\\node_modules\\next-optimized-images\\lib\\loaders\\img-loader.js',
    'D:\\Projetos\\MeuSite\\MeuSiteFront\\node_modules\\next-optimized-images\\lib\\loaders\\index.js',
    'D:\\Projetos\\MeuSite\\MeuSiteFront\\node_modules\\next-optimized-images\\lib\\index.js',
    'D:\\Projetos\\MeuSite\\MeuSiteFront\\next.config.js',
    'D:\\Projetos\\MeuSite\\MeuSiteFront\\node_modules\\next\\dist\\next-server\\server\\config.js',
    'D:\\Projetos\\MeuSite\\MeuSiteFront\\node_modules\\next\\dist\\next-server\\server\\next-server.js',
    'D:\\Projetos\\MeuSite\\MeuSiteFront\\node_modules\\next\\dist\\server\\next.js',
    'D:\\Projetos\\MeuSite\\MeuSiteFront\\node_modules\\next\\dist\\server\\lib\\start-server.js',
    'D:\\Projetos\\MeuSite\\MeuSiteFront\\node_modules\\next\\dist\\cli\\next-dev.js',
    'D:\\Projetos\\MeuSite\\MeuSiteFront\\node_modules\\next\\dist\\bin\\next'
  ]
}

Arquivo do next.confg.js

module.exports = withPlugins([
  [optimizedImages, {
    inlineImageLimit: 8192,
    imagesFolder: 'images',
    imagesName: '[name]-[hash].[ext]',
    handleImages: ['jpeg', 'png', 'svg', 'webp', 'gif'],
    removeOriginalExtension: false,
    optimizeImages: true,
    optimizeImagesInDev: false,
    mozjpeg: {
      quality: 80,
    },
    optipng: {
      optimizationLevel: 3,
    },
    pngquant: false,
    gifsicle: {
      interlaced: true,
      optimizationLevel: 3,
    },
    svgo: {
      // enable/disable svgo plugins here
    },
    webp: {
      preset: 'default',
      quality: 75,
    },
  }],
]);

[PierreCrb]

https://github.com/cyrilwanner/next-optimized-images#optimization-packages solve issue ✅