Third party javascript files aren't executed within inner components
Unanswered
American black bear posted this in #help-forum
American black bearOP
👋 Folks, I have a problem with using third party Javascript files. I've tried both Flowbite and Preline libraries.
My React webapp displays a list of items, and each of these items have a button on them that opens a dropdown menu.
The problem is, this button is a different component, and for some reason, neither Flowbite Javascript nor Preline Javascripts don't seem to work with the inner components. They run perfectly fine in root components that I call in
Component structure is like this:
<Main/> -> <ItemCard/> -> DropDown/>
JS works in
I'm using the following snippet to load the Javascript files in the root
<Script
src="/scripts/flowbite.min.js"
strategy="beforeInteractive"
/>
<Script
src="/scripts/preline.js"
strategy="beforeInteractive"
/>
Can anyone help me with this one?
My React webapp displays a list of items, and each of these items have a button on them that opens a dropdown menu.
The problem is, this button is a different component, and for some reason, neither Flowbite Javascript nor Preline Javascripts don't seem to work with the inner components. They run perfectly fine in root components that I call in
page.tsx.Component structure is like this:
<Main/> -> <ItemCard/> -> DropDown/>
JS works in
Main, but not in ItemCard and DropDown components.page.tsx calls only Main component.I'm using the following snippet to load the Javascript files in the root
layout.tsx:<Script
src="/scripts/flowbite.min.js"
strategy="beforeInteractive"
/>
<Script
src="/scripts/preline.js"
strategy="beforeInteractive"
/>
Can anyone help me with this one?
4 Replies
American black bearOP
Update:
I used useEffect() in a different component to load Preline Javascript instead of using <Script> in the RootLayout, and it worked.
Now the RootLayout looks like this:
<Script
src="/scripts/flowbite.min.js"
strategy="beforeInteractive"
/>
<PrelineScript />
Reference: https://codesandbox.io/p/devbox/preline-nextjs14-fyyztg?file=%2Fapp%2Flayout.tsx%3A50%2C24
I used useEffect() in a different component to load Preline Javascript instead of using <Script> in the RootLayout, and it worked.
Now the RootLayout looks like this:
<Script
src="/scripts/flowbite.min.js"
strategy="beforeInteractive"
/>
<PrelineScript />
Reference: https://codesandbox.io/p/devbox/preline-nextjs14-fyyztg?file=%2Fapp%2Flayout.tsx%3A50%2C24
American black bearOP
Now it doesn't work again somehow 🤦â€â™‚ï¸
Figured out why, <PrelineScript /> needs to be outside of </body>...
This is very inconsistent, sometimes it works sometimes it doesn't.