responsive-loader with sharp error still happening

[FranciscoG]

this is a re-opening of this issue since it's still happening to quite a few people, including myself.

system: Mac OS 10.15.6

I have these installed

"dependencies": {

    "imagemin-mozjpeg": "^9.0.0",
    "imagemin-optipng": "^8.0.0",
    "next": "9.5.2",
    "next-optimized-images": "^2.6.2",
    "raw-loader": "^4.0.1",
    "responsive-loader": "^2.1.1",
    "sharp": "^0.26.0",

  },

ready - started server on http:https://localhost:3000
Error: Cannot find module '/node_modules/responsive-loader/lib/cjs.js/sharp'
Require stack:
- /node_modules/next-optimized-images/lib/loaders/responsive-loader.js
- /node_modules/next-optimized-images/lib/resource-queries.js
- /node_modules/next-optimized-images/lib/loaders/img-loader.js
- /node_modules/next-optimized-images/lib/loaders/index.js
- /node_modules/next-optimized-images/lib/index.js
- /next.config.js
- /node_modules/next/dist/next-server/server/config.js
- /node_modules/next/dist/next-server/server/next-server.js
- /node_modules/next/dist/server/next.js
- /node_modules/next/dist/server/lib/start-server.js
- /node_modules/next/dist/cli/next-dev.js
- /node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1029:15)
    at Function.Module._load (internal/modules/cjs/loader.js:898:27)
    at Module.require (internal/modules/cjs/loader.js:1089:19)
    at require (internal/modules/cjs/helpers.js:73:18)
    at getResponsiveLoaderOptions (/node_modules/next-optimized-images/lib/loaders/responsive-loader.js:18:15)
    at getResourceQueries (/node_modules/next-optimized-images/lib/resource-queries.js:133:26)
    at applyImgLoader (/node_modules/next-optimized-images/lib/loaders/img-loader.js:102:10)
    at appendLoaders (/node_modules/next-optimized-images/lib/loaders/index.js:137:14)
    at Object.webpack (/node_modules/next-optimized-images/lib/index.js:62:24)
    at getBaseWebpackConfig (/node_modules/next/dist/build/webpack-config.js:122:489) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/node_modules/next-optimized-images/lib/loaders/responsive-loader.js',
    '/node_modules/next-optimized-images/lib/resource-queries.js',
    '/node_modules/next-optimized-images/lib/loaders/img-loader.js',
    '/node_modules/next-optimized-images/lib/loaders/index.js',
    '/node_modules/next-optimized-images/lib/index.js',
    '/next.config.js',
    '/node_modules/next/dist/next-server/server/config.js',
    '/node_modules/next/dist/next-server/server/next-server.js',
    '/node_modules/next/dist/server/next.js',
    '/node_modules/next/dist/server/lib/start-server.js',
    '/node_modules/next/dist/cli/next-dev.js',
    '/node_modules/next/dist/bin/next'
  ]
}

[stukalin]

Just found how to fix that. You should specify the adaper manually in the next.config.js. Something like this

const withOptimizedImages = require('next-optimized-images');

module.exports = withOptimizedImages({
  responsive: {
    adapter: require('responsive-loader/sharp')
  }

});

Not sure if that's by design, but fixes the issue for me!

[THPubs]

@cyrilwanner I think @stukalin answer should be in the documentation. This works! Thanks!