"url" parameter is valid but image type is not allowed

[rahulit1991]

Hello team,

Thanks for your awesome contribution to this stack. I am facing one issue with the latest version of this stack. Here is an issue:

https://uat-webv3.whimstay.com/_next/image?url=%2Fimage%2Ficons%2Fguest.svg&w=48&q=75

Is anything needed to take care of in the latest version? I am not able to load some images. It's throwing an error of 400 in the network tab with the response '"URL" parameter is valid but image type is not allowed. '

Can you please help with this?

Thanks

[ofhouse]

Hi,
since the latest version uses the Image Optimizer of Next.js 12.1.0 SVGs are no longer automatically optimized.
To keep SVG optimized, you have to add the following configuration to the next.config.js:

module.exports = {
  images: {
    dangerouslyAllowSVG: true,
    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
  },
}

However I see that we forgot to pass the new configuration properties to the underlying Image Optimization module.
So setting the values currently has no effect, will fix this in the next release.

[rahulit1991]

Thanks, @ofhouse for your quick reply.
I have tried with your above configuration but it did not effect and facing same error again.

I also tried to remove all CloudFront cache as well but not worked. Any clue why its not working?

Thanks

[ofhouse]

Sorry, the important part of my previous message was a bit lost:

So setting the values currently has no effect, will fix this in the next release.

The setting from the next.config.js is currently not translated correctly into Terraform.
Currently working on a fix for that that is released very soon.

[rahulit1991]

Got it. Thanks

[ofhouse]

This has been fixed in v0.12.1, thanks for reporting!

[rahulit1991]

@ofhouse ,

Thanks for the quick release. It really helped me to check my issue. But sadly, the Issue still remains the same. not resolved.
Not able to load any SVG files on my website.
Please check: https://uat-webv3.whimstay.com/detail/sextant-or-habitat-brickell-or-10-mins-to-beach-or-gym-pool-or-penthouse-or-3-bed-2-bath/99620?name=Miami%2CFL&adultsCount=1&childrenCount=0&suitablePet=false&whimstayPlus=true&timestamp=1649701270473

Deployed with latest version.

next.config.js:

const withPlugins = require("next-compose-plugins")
const path = require('path');
const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
})

const defaultConfig = {
  target: "serverless",
  swcMinify: false,
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    if (!isServer) {
      config.resolve.fallback.fs = false;
    }
    // config.sassOptions = {
    //   includePaths: [path.join(__dirname, 'src/styles')],
    // };
    return config
  },
  eslint: {
    ignoreDuringBuilds: true,
  },
  experimental: {
    optimizeFonts: true,
    modern: true,
  },
  sassOptions: {
    includePaths: [path.join(__dirname, 'src/styles')],
  },
  redirects: require("./next-redirect"),
  images: {
    domains: ["******-bucket.s3.us-east-2.amazonaws.com", "****-bucket.s3.us-east-2.amazonaws.com", "********.cloudfront.net", '*******.cloudfront.net', 's3-us-east-2.amazonaws.com'],
    // formats: ['image/avif', 'image/webp'],
    //minimumCacheTTL: 60,
    //disableStaticImages: true,
    dangerouslyAllowSVG: true,
    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
    //layoutRaw: true,
  },
}

module.exports = withPlugins([withBundleAnalyzer], defaultConfig)

Is anything missing from myend?

[ofhouse]

Did you also updated the tf-next builder in the package.json to the latest version?

Can you check the content of the .next-tf/config.json that is generated after running tf-next build?

The file is used as input for the Terrafom module and the values of dangerouslyAllowSVG & contentSecurityPolicy are taken from there.
So if the values are not present in this file this could indicate that you are using the wrong version of tf-next or that something is still broken on our end.

[rahulit1991]

Thanks, @ofhouse.

You are great. It's' resolved with an updated latest version of the tf-next package. now I am able to load SVG on my website. I really appreciate your dedication and contribution to this project. Hope you will remain active in this project forever.

Thanks again. Have a great day!...