withPlausibleProxy causes next/image requests to CDNs like Sanity.io 400

[JamesSingleton]

I was using withPlausibleProxy when all of a sudden in production my images disappeared.

Steps to Reproduce

1. Add withPlausibleProxy to your next.config.js file
2. Have next/image components where the source is not internal aka /public
3. Run yarn build && yarn start
4. Go to localhost:3000 and observe images not loading
5. Open network tab in your browser console and notice requests are 400'ing for images that are not in /public

[4lejandrito]

Hi! I just wrote a test to verify this and it worked fine. I also tested it locally with no issues.

Can you please share your next.config.js?

Thanks!

[JamesSingleton]

@4lejandrito thanks for looking into this, here is my next.config.js

const { withPlausibleProxy } = require('next-plausible')

const securityHeaders = [
  {
    key: 'X-Frame-Options',
    value: 'SAMEORIGIN',
  },
  {
    key: 'X-Content-Type-Options',
    value: 'nosniff',
  },
  {
    key: 'X-XSS-Protection',
    value: '1; mode=block',
  },
]
/** @type {import('next').NextConfig} */
module.exports = withPlausibleProxy({
  swcMinify: true,
  reactStrictMode: true,
  images: {
    formats: ['image/avif', 'image/webp'],
    domains: ['cdn.sanity.io'],
  },
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'x-robots-tag',
            value: 'all',
          },
        ],
      },
      {
        source: '/(.*)',
        headers: securityHeaders,
      },
    ]
  },
})

[4lejandrito]

Hi! I tried with your configuration and it works. Can you show an example of how you render the image? I want to see how the URL looks like in your <img ... /> code.

[JamesSingleton]

Sure, here is a link https://redshirt-sports-git-chore-plausible-proxy-jamesrsingleton.vercel.app with that next.config.js. If you go to https://www.redshirtsports.xyz you will see the difference.

[4lejandrito]

Sorry I meant the react source code. I want to see how you use next/image. I'd like to reproduce the exact same use case.

By the way... does it break locally too? or only on vercel?

[JamesSingleton]

Oh! My bad,

                <Image
                  src={
                    urlForImage(post.mainImage).width(1020).height(574).url()!
                  }
                  alt={post.mainImage.caption}
                  width="1020"
                  height="574"
                  layout="responsive"
                  priority
                />

And yes it breaks locally and on Vercel.

[4lejandrito]

I am afraid I have no clue what's going on, I can't reproduce it locally. Things that come to my mind:

1. Are you using the latest version of next-plausible?
2. Is there any chance I can get access to your source code so that I can reproduce the issue locally and investigate?

[JamesSingleton]

I am using next-plausble@^3.1.4 with next@^12.0.7.

[4lejandrito]

I tried with that version of next and worked fine. It would be awesome if you could point me to the smallest repo you can make in which the issue is reproduced without leaking your source code.

[JamesSingleton]

So I created https://github.com/JamesSingleton/next-plausible-test. I recorded a video but it is too big for GitHub... But ran into a weird issue where running with withPlausibleProxy caused Next/Image not to recognize the domain in image... but running without it works just fine.

[4lejandrito]

Oh I see what's happening now! You're using withPlausibleProxy wrong:

You're using it like:

withPlausibleProxy({...nextConfig})

but you should be using it like:

withPlausibleProxy()({...nextConfig})

withPlausibleProxy is a function that receives its own parameters (which is fine to leave empty) and then returns a function that you can use to pass the nextjs config.

Please let me know if that fixes your issue.

Thanks!

[JamesSingleton]

🤦🏼 I completely missed that, will try in a little and confirm 😅

[JamesSingleton]

Looks like that fixes it... There should be some better error handling around that in my opinion if there even could be... Maybe a future update.

[4lejandrito]

I’ll think about it and try to find a way to warn users if they do something similar.

I’ll close this for now.

Thanks a lot for reporting!