Next.js Discord

Discord Forum

Invalid Message: appIsrManifest

Unanswered
ashie posted this in #help-forum
Open in Discord
Avatar
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

Avatar
ashieOP
bump ^
Avatar
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)`.
Avatar
ashieOP
im really weirded out because it ALMOST renders properly
Image
Avatar
ashieOP
bumping again :c
Avatar
ashieOP
bump ^^
Avatar
ashieOP
^^
Avatar
Alfonsus Ardani
why is it indexjs not index.js ?
Image
Avatar
@Alfonsus Ardani why is it `indexjs` not `index.js` ?
Avatar
ashieOP
because i was trying to get the site to build and it wouldn't with the errors it throws now
Avatar
Alfonsus Ardani
Im confused
Avatar
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
Avatar
Alfonsus Ardani
I see, so the error could have not occured on that file. I will check again tomorrow (in my tz)
Avatar
@Alfonsus Ardani I see, so the error could have not occured on that file. I will check again tomorrow (in my tz)
Avatar
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
Avatar
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
Avatar
ashieOP
:nod: done! thank u, appreciate it
Avatar
Dwarf Hotot
Nice
or is the package not found?
Avatar
@Alfonsus Ardani try using `next/image` instead of `next/future/image`
Avatar
ashieOP
still get the same error unfortunately
Avatar
@ashie still get the same error unfortunately
Avatar
Alfonsus Ardani
what is your nextjs version?
Avatar
@Alfonsus Ardani what is your nextjs version?
Avatar
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 😅
Image
Avatar
@ashie now it isn't even erroring 😅
Avatar
Alfonsus Ardani
hm this is hard to debug, can you try to reproducce the issue on smaler scale?
Avatar
@Alfonsus Ardani Yeah
Avatar
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
Image
Avatar
ashieOP
they stay for much longer now. which is something i guess
Image
Avatar
ashieOP
no clue what this error means 
[Warning] [HMR] Invalid message: {"action":"appIsrManifest","data":{}}
@
processMessage@
@
handleMessage@
Avatar
ashieOP
bumping this ^^ seems to be a common issue on [github](https://github.com/vercel/next.js/issues/71974) with zero solution
Avatar
ashieOP
^^ not sure if this is the reason the pictures aren't sticking, but its my best lead