bloom-frontend icon indicating copy to clipboard operation
bloom-frontend copied to clipboard

Fix Next/Image warnings in the console.

Open eleanorreem opened this issue 9 months ago • 0 comments

Overview

When you run yarn dev/ yarn build, you get a series of warnings about next/image. Recently in a PR, the next/image imports were upgraded from next/legacy/image to the new next/image import. However, the job was not completed and we are now getting warnings.

Reading: https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#image-component https://nextjs.org/docs/messages/next-image-upgrade-to-13 https://nextjs.org/docs/pages/building-your-application/upgrading/version-13

Image with src "/_next/static/media/bloom_logo_white.2f93938b.svg" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "/_next/static/media/bloom_logo_white.2f93938b.svg" has legacy prop "objectFit". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "/_next/static/media/course_icon.4db39ce0.svg" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "/_next/static/media/course_icon.4db39ce0.svg" has legacy prop "objectFit". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "/_next/static/media/chat_icon.717888a9.svg" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "/_next/static/media/chat_icon.717888a9.svg" has legacy prop "objectFit". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "/_next/static/media/activities_icon.dbd7ec54.svg" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "/_next/static/media/activities_icon.dbd7ec54.svg" has legacy prop "objectFit". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "/_next/static/media/grounding_icon.ce194ab1.svg" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "/_next/static/media/grounding_icon.ce194ab1.svg" has legacy prop "objectFit". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "/_next/static/media/notes_from_bloom_icon.f368af7a.svg" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "/_next/static/media/notes_from_bloom_icon.f368af7a.svg" has legacy prop "objectFit". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/411x401/27f8994191/landing_page_illustration.svg" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/411x401/27f8994191/landing_page_illustration.svg" has legacy prop "objectFit". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/337x372/248358259a/icon_courses.png" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/336x316/1868a727e9/icon_chat.png" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/341x353/dcc8ca465e/icon_activities.png" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/392x316/4fa64da80d/icon_grounding.png" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/341x353/efc3c9aa21/icon_notes.png" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/155x145/b82b3e0294/pinkheartwhitebackground.svg" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/155x145/8101c401c6/pinkplaypausewhitebackground.svg" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/155x146/1474c308a2/pinkglobewhitebackground.svg" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/856x649/3d1979a3cc/spanish_team.png" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/856x649/31fac9652c/hindi_team.png" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/856x649/01857246d8/french_team.png" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/856x649/f016b90b81/english_team.png" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/856x649/8525986682/portuguese_team.png" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/856x648/a871f5beeb/bloom_german-presenters.png" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/600x264/54a6e0cca8/leaf_mix_fire.png" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/128x112/02c4cc90e6/blue_person_with_tea.svg" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "https://a.storyblok.com/f/142459/x/481d1f2336/illustration_person4_peach.svg" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13

Action Items

  • [ ] Look at the previous PR and issue instructions to see the details of the change that caused these warnings
  • [ ] Make changes to fix warnings
  • [ ] Ensure that no image layouts are broken by manually checking each page
  • [ ] Run cypress tests to ensure that nothing is broken

eleanorreem avatar May 22 '24 10:05 eleanorreem