Next.js Discord

Discord Forum

Invalid Message: appIsrManifest

Unanswered
ashie posted this in #help-forum
Open in Discord
ashieOP
hi all! im new to nextjs, but im trying to set up this template and it's giving me this odd error that i can't figure out how to decode it

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `ForwardRef(MotionComponent)`.
Image
Component@
MotionComponent
LinkComponent
PresenceChild
AnimatePresence
div
div
Component@
main
Gallery
div
div
Layout
SheetProvider
TooltipProviderProvider
TooltipProvider
MyApp
I18nProvider
AppWithTranslations
PureComponent@
ReactDevOverlay
_classCallCheck@
AppContainer
Root


this is the repository: https://github.com/ash-development/portfolio and the page it is glitching under is /gallery

44 Replies

ashieOP
bump ^
ashieOP
i ended up getting rid of that error but getting a similar one for 

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `ForwardRef(_c1)`.
ashieOP
im really weirded out because it ALMOST renders properly
ashieOP
bumping again :c
ashieOP
bump ^^
ashieOP
^^
alfonsus ardani
why is it indexjs not index.js ?
@alfonsus ardani why is it `indexjs` not `index.js` ?
ashieOP
because i was trying to get the site to build and it wouldn't with the errors it throws now
alfonsus ardani
Im confused
ashieOP
about?
the site wouldn't build with the files like that and i wanted to see other changes i had made on another pages
so that was my temporary solution
alfonsus ardani
I see, so the error could have not occured on that file. I will check again tomorrow (in my tz)
@alfonsus ardani I see, so the error could have not occured on that file. I will check again tomorrow (in my tz)
ashieOP
the error occured while i was actively working on that file
so it is on that file in that page
i changed the name of the file because the error was happening in there
i just changed it back to .js on my end and it's definetely where the error is happening
alfonsus ardani
I see, well it would be nice to have it back to .js so i can see some syntax highlighting
But yeah, ill brb in 8 hrs
ashieOP
:nod: done! thank u, appreciate it
Dwarf Hotot
Nice
or is the package not found?
@alfonsus ardani try using `next/image` instead of `next/future/image`
ashieOP
still get the same error unfortunately
@ashie still get the same error unfortunately
alfonsus ardani
what is your nextjs version?
@alfonsus ardani what is your nextjs version?
ashieOP
i was on 12 but im in the process of upgrading right now
didn't realize how outdated it was
now it isn't even erroring 😅
@ashie now it isn't even erroring 😅
alfonsus ardani
hm this is hard to debug, can you try to reproducce the issue on smaler scale?
@alfonsus ardani Yeah
ashieOP
this is what console says 
ash@Midnight portfoliogallerytest % yarn run dev
yarn run v1.22.22
$ next dev
   â–² Next.js 15.1.0
   - Local:        http://localhost:3000
   - Network:      http://10.17.160.148:3000
   - Environments: .env

 ✓ Starting...
 âš  Invalid next.config.js options detected: 
 âš      Unrecognized key(s) in object: 'images' at "experimental"
 âš  See more info here: https://nextjs.org/docs/messages/invalid-next-config
 ✓ Ready in 2.1s
 âš  Your project has `@next/font` installed as a dependency, please use the built-in `next/font` instead. The `@next/font` package will be removed in Next.js 14. You can migrate by running `npx @next/codemod@latest built-in-next-font .`. Read more: https://nextjs.org/docs/messages/built-in-next-font
 â—‹ Compiling /_error ...
 ✓ Compiled /_error in 3.6s (1955 modules)
 GET /apple-touch-icon-precomposed.png 404 in 4334ms
 GET /apple-touch-icon.png 404 in 4325ms
 GET / 404 in 4278ms
 GET / 404 in 2870ms
 âš  Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload
 ✓ Compiled /gallery in 471ms (1965 modules)
next-translate - compiled page: /gallery - locale: en-ca - namespaces:  - used loader: getStaticProps
 GET /gallery 200 in 1461ms
 âš  The "images.domains" configuration is deprecated. Please use "images.remotePatterns" configuration instead.
[TypeError: Cannot read properties of undefined (reading 'replace')]
 GET /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdtyzjbcea%2Fimage%2Fupload%2Fc_scale%2Cw_720%2FIMG_6028_lv4mxf.heic&w=3840&q=75 500 in 948ms
 GET /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdtyzjbcea%2Fimage%2Fupload%2Fc_scale%2Cw_720%2FIMG_6028_lv4mxf.heic&w=3840&q=75 500 in 431ms
in browser console says 
http://localhost:3000/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdtyzjbcea%2Fimage%2Fupload%2Fc_scale%2Cw_720%2FIMG_6028_lv4mxf.heic&w=3840&q=75
[Error] Failed to load resource: the server responded with a status of 500 (Internal Server Error) (image, line 0)
hmmm
seems to be trying to load something invalid?
removing the params at the end of the link seems to work: https://res.cloudinary.com/dtyzjbcea/image/upload/c_scale/w_720/IMG_6028_lv4mxf.heic
ashieOP
they stay for much longer now. which is something i guess
ashieOP
no clue what this error means 
[Warning] [HMR] Invalid message: {"action":"appIsrManifest","data":{}}
@
processMessage@
@
handleMessage@
ashieOP
bumping this ^^ seems to be a common issue on [github](https://github.com/vercel/next.js/issues/71974) with zero solution
ashieOP
^^ not sure if this is the reason the pictures aren't sticking, but its my best lead