Next.js Discord

Discord Forum

The code in the Third-Party Javascript section in the tutorial doesn't work.

Unanswered
Red ant posted this in #help-forum
Open in Discord
Avatar
Red antOP
I tried to view the first-post.js page but it doesn't log any message in the console panel.

This is the code from the tutorial:

export default function FirstPost() {
return (
#Unknown Channel
<Head>
<title>First Post</title>
</Head>
<Script
src="https://connect.facebook.net/en_US/sdk.js"
strategy="lazyOnload"
onLoad={() =>
console.log(script loaded correctly, window.FB has been populated)
}
/>
<h1>First Post</h1>
<h2>
<Link href="/">← Back to home</Link>
</h2>
</>
);
}

3 Replies

Avatar
larkenciel
I have the exact same problem. To troubleshoot I:
- checked the network tab and don't see the SDK
- waited a "while" in case it is VERY lazy, still nothing in the network tab, and no console
- reverted to the previous code to check to see if it loaded with that, and it did (the previous code was a regular lower case script tag with the same SDK link)
- added a console separate from the Script tag, it did console correctly

Code:

import Head from "next/head"
import Link from "next/link"
import Script from "next/script"

export default function FirstPost() {
return (
#Unknown Channel
<Head>
<title>First POAST</title>
<Script
src="https://connect.facebook.net/en_US/sdk.js"
strategy="lazyOnload"
onLoad={() =>
console.log(script loaded correctly, window.FB has been populated)
}
/>
{console.log("WHOA IS THIS EVEN WORKING")}
</Head>
<h1>First Post</h1>
<h2>
<Link href="/">Back to home</Link>
</h2>
</>
)
}
---

Dependencies include:

Node v: 20.4.0
"dependencies": {
"next": "latest",
"react": "18.2.0",
"react-dom": "18.2.0"
}
Avatar
larkenciel
Also tried moving the Script component to the index file, still nothing. No error, just, nothing.