Serverless deploy fails with next-images/next-optimized-images plugin

[r0b-]

When using one of the image plugins (https://github.com/twopluszero/next-images or https://github.com/cyrilwanner/next-optimized-images), the now deployment fails with the following error message for each image:

ModuleNotFoundError: Module not found: Error: Can't resolve '../static/images/test.jpg' in '/tmp/4652dcc7/pages'
    at factory.create (/tmp/4652dcc7/node_modules/webpack/lib/Compilation.js:821:10)
    at factory (/tmp/4652dcc7/node_modules/webpack/lib/NormalModuleFactory.js:397:22)
    at resolver (/tmp/4652dcc7/node_modules/webpack/lib/NormalModuleFactory.js:130:21)
    at asyncLib.parallel (/tmp/4652dcc7/node_modules/webpack/lib/NormalModuleFactory.js:224:22)
    at /tmp/4652dcc7/node_modules/neo-async/async.js:2825:7
    at /tmp/4652dcc7/node_modules/neo-async/async.js:6886:13
    at normalResolver.resolve (/tmp/4652dcc7/node_modules/webpack/lib/NormalModuleFactory.js:214:25)
    at doResolve (/tmp/4652dcc7/node_modules/enhanced-resolve/lib/Resolver.js:184:12)
    at hook.callAsync (/tmp/4652dcc7/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/tmp/4652dcc7/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
    at resolver.doResolve (/tmp/4652dcc7/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:37:5)
    at hook.callAsync (/tmp/4652dcc7/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/tmp/4652dcc7/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
    at hook.callAsync (/tmp/4652dcc7/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/tmp/4652dcc7/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:12:1)
    at resolver.doResolve (/tmp/4652dcc7/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:42:38)
resolve '../static/images/test.jpg' in '/tmp/4652dcc7/pages'
  using description file: /tmp/4652dcc7/package.json (relative path: ./pages)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /tmp/4652dcc7/package.json (relative path: ./static/images/test.jpg)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /tmp/4652dcc7/static/images/test.jpg doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        /tmp/4652dcc7/static/images/test.jpg.wasm doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        /tmp/4652dcc7/static/images/test.jpg.mjs doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /tmp/4652dcc7/static/images/test.jpg.js doesn't exist
      .jsx
        Field 'browser' doesn't contain a valid alias configuration
        /tmp/4652dcc7/static/images/test.jpg.jsx doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /tmp/4652dcc7/static/images/test.jpg.json doesn't exist
      as directory
        /tmp/4652dcc7/static/images/test.jpg doesn't exist

To Reproduce

I extended the nextjs example with an image (loaded with require in pages/index.js and import in pages/about.js) to play around:
https://github.com/r0b-/now-examples/tree/master/nextjs
The error occurs with both plugins...

I'm using now 2.0 and latest next canary.

Thanks

[timneutkens]

Please read: vercel/next-plugins#384 (comment)

[r0b-]

hmmm ok, but how can I upload those files (/static/)?

[timneutkens]

You use a different directory for files that are not going to be in /static, because if you use next-optimized-images they will output the file into .next/static/images, which the builder will then upload under /_next/static/images

[r0b-]

Works fine now! Thanks a lot!

[timneutkens]

🙏 Happy to help!