Error: Cannot find module $path

[dalanmiller]

Having an issue I think with getting the plugin working as this is a valid file at public/images/products/6607330/1.jpg. I assume based on assetConfig which I haven't changed that the path I'm providing will be concatenated to public.

Anything I can sanity check here?

// next.config.js 
const withPlugins = require('next-compose-plugins');
const optimizedImages = require('next-optimized-images');

module.exports = withPlugins([
  optimizedImages,
]);

[Vincent-3DAT]

try require('public/images/'+src)
if that doesnt work try a filepath that is relative to _document

[dalanmiller]

try require('public/images/'+src)

No good ;(

if that doesnt work try a filepath that is relative to _document

Tried the path relative to _document (../public/images/products/1234/1.jpg) but also still not working.

[cyrilwanner]

You need at least one static path before your variable in a require statement, this is a limitation of webpack: https://webpack.js.org/api/module-methods/#dynamic-expressions-in-import

Also, your path is relative to your current file. It works exactly the same as when you would import another js file.

[dalanmiller]

What a bizarre limitation! But makes sense that the less specific you are, the more files WebPack will need to load to ensure that your file will be available to import.

I've modified this so that the require( has the static path up front and then the prop I pass in is just the folder name and filename in the path. However, it still seems to be failing for the same reasons. Unclear why the error isn't showing the full path and instead just the latter part?

e.g. src = '6450868/1.jpg'

Side note: Is there a manual or different way to trigger image optimization other than using require?

edit:

const webpImage = require(`../public/images/products/${src}?webp`)

Also fails.

[dalanmiller]

Same as #16

[dalanmiller]

Issue here was jpg files with capitalised extensions and not lowercase 🤦‍♂