Hooks not working in the loading page #44249
Description
Verify canary release
- I verified that the issue exists in the latest Next.js canary release
Provide environment information
brand new clean install of Next13
Operating System:
Platform: darwin
Arch: x64
Version: Darwin Kernel Version 22.1.0: Sun Oct 9 20:14:54 PDT 2022; root:xnu-8792.41.9~2/RELEASE_X86_64
Binaries:
Node: 16.15.0
npm: 8.5.5
Yarn: 1.22.19
pnpm: N/A
Relevant packages:
next: 13.0.8-canary.3
eslint-config-next: 13.0.7
react: 18.2.0
react-dom: 18.2.0
Which area(s) of Next.js are affected? (leave empty if unsure)
No response
Link to the code that reproduces this issue
local
To Reproduce
- do a new installation of next 13
- add app folder
- add
experimental: { appDir: true },to thenext.config.jsfile - remove pages folder
- create
layout.jspage.jsandloading.js(the last one is the issue)
Layout Code:
export default function Layout({ children }) {
return (
<html>
<head>
<title>Next.js</title>
</head>
<body>{children}</body>
</html>
);
}
page code:
// this function is just a hacky way to keep the loading screen visible for 60 seconds.
const awaitLoader = async () => new Promise((r) => setTimeout(r, 60000));
export default async function Page() {
await awaitLoader();
return <h1>Hello, Next.js!</h1>;
}
loading code:
"use client"; //<----- using the client component version
import { useEffect, useState } from "react";
export default function Loading() {
// notice we use this `message` just to see if the UI is being updated
const { message, setMessage } = useState("genesis of the component");
useEffect(() => {
// this console.log is never called
console.log("calling use effect!");
// update the message to see if anything gets reflected.
setMessage("we may think it is loading");
}, []);
// loggin outside of everything.... no log either (example of where I do my call)
console.log(message);
// this in the HTML is reflected as <div> TESTIN LOADER: </div>
return <div> TESTING LOADER: {message}</div>;
}
Describe the Bug
I found this bug while creating a loading screen for my application, I was trying to use anime.js in the loading screen and then I noticed none of the hooks I defined where being called.
despite that I was able to call my function animateEverything outside of everything, as I stated on the steps and it started to work (actually the animation was starting) but when I was trying to build I got an error like this:
ReferenceError: NodeList is not defined
--
23:57:47.063 | at toArray (/vercel/path0/.next/server/chunks/881.js:500:20)
23:57:47.063 | at parseTargets (/vercel/path0/.next/server/chunks/881.js:823:87)
23:57:47.063 | at getAnimatables (/vercel/path0/.next/server/chunks/881.js:828:16)
23:57:47.063 | at createNewInstance (/vercel/path0/.next/server/chunks/881.js:1024:21)
23:57:47.063 | at anime (/vercel/path0/.next/server/chunks/881.js:1112:18)
23:57:47.063 | at triggerAnime (/vercel/path0/.next/server/app/page.js:1310:55)
23:57:47.063 | at Loader (/vercel/path0/.next/server/app/page.js:1327:5)
also another thing that I noticed was that if I put some functions with more logs in the code, they were appearing on the terminal instead of the chrome console. for example
loading code:
"use client";
import { useEffect } from "react";
export default function Loading() {
const doSomething = () => {
console.log("I'm doing something"); // appears on the terminal
};
useEffect(() => {
// this console.log is never called
console.log("calling use effect!");
doSomething();
}, []);
console.log(message); // it doesn't appear anywhere
doSomething();
return <div> TESTING LOADER: {message}</div>;
}
other things that I was testing is leaving the loading.js file as a server component and create another with the loader, then call it from loading.js but same behaviour.
Expected Behavior
it should behave as a client component and use correctly the hooks without problems.
Which browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
Vercel