Preline JS Bundle not working

[ankurdhamija83]

Hi All,

Thanks for creating this amazing library.
I am facing issue with the js bundle.

The components are loading correctly on the webpage but the js functionality is not working. I followed the instructions to load the preline js file on the page, however, there seems to be some issue. Dropdown, banners and other components which require js functionality are not working.

Kindly help.

[koossaayy]

Can you add some code for reference ?

[ankurdhamija83]

{{> title}} {{> tailwind-css}} {{!-- --}} {{{ body }}} <script src='/js/preline.js'></script> <script src='/js/test.js'></script>

[ankurdhamija83]

This is a handlebars layout code. Including the preline js file at the end of the body tag.

[koossaayy]

Using this, can you confirm there is an error in the console in the browser ?

{{> title}} {{> tailwind-css}} {{!-- --}} {{{ body }}} <script src='/js/preline.js'></script> <script src='/js/test.js'></script>

[ankurdhamija83]

Nope, there is no error in the browser. The file loads correctly, but the js functionality is not working. For example, js related events such as dropdown, banner close, accordion etc. are not working. I also loaded a simple console.log script in another js file to ensure js is working fine on the frontend. The test console.log script works fine. Regards, Ankur

…

On Mon, Feb 20, 2023 at 4:14 PM Koussay ***@***.***> wrote: Using this, can you confirm there is an error in the console in the browser ? {{> title}} {{> tailwind-css}} {{!-- --}} {{{ body }}} <script src='/js/preline.js'></script> <script src='/js/test.js'></script> — Reply to this email directly, view it on GitHub <#49 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFOYL5NTNTTVYDVIDKBRBKDWYNDKRANCNFSM6AAAAAAU6GUSFM> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[koossaayy]

Because if the all of the JS functionalities are not working, that means the JS file is not loaded.
However, according to the documentation, if you installed the library via npm,
the preline.js file should be loaded from node_modules, as follows

<script src="./node_modules/preline/dist/preline.js"></script>

[ankurdhamija83]

Kindly guide how should I load the js file correctly in the handlebars template :-) I don't see any error in the console on the front end. Because except for preline.js all other js files are getting loaded correctly.

…

On Mon, Feb 20, 2023 at 6:02 PM Koussay ***@***.***> wrote: Because if the all of the JS functionalities are not working, that means the JS file is not loaded. However, according to the documentation, if you installed the library via npm, the preline.js file should be loaded from node_modules, as follows <script src="./node_modules/preline/dist/preline.js"></script> — Reply to this email directly, view it on GitHub <#49 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFOYL5LW2NBRYTZYL7Z3COTWYNP6JANCNFSM6AAAAAAU6GUSFM> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[azupardo]

@ankurdhamija83 You can load the js file like @koossaayy said. Please note that it depends where your preline js location.

[ankurdhamija83]

Hello Jessie, Thanks for your reply. Sorry, but I am unable to load the file correctly from node_modules directory in my application views. I copied the preline.js file from node_modules/dist/preline.js and copied it to public/js/preline.js. In the handlebars view, it is loaded as <script src='/js/preline.js'></script> On the frontend, I don't get any error message for preline.js but the script doesn't work. Kindly suggest, how should I load the file directly from node_modules and serve it on the frontend. Thank you

…

On Tue, Feb 21, 2023 at 8:54 PM Jessie A. Azupardo ***@***.***> wrote: @ankurdhamija83 <https://github.com/ankurdhamija83> You can load the js file like @koossaayy <https://github.com/koossaayy> said. Please note that it depends where your preline js location. — Reply to this email directly, view it on GitHub <#49 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFOYL5PPSFIXWTDGHU3JRPDWYTMZPANCNFSM6AAAAAAU6GUSFM> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[ankurdhamija83]

Screenshot for your reference. Thanks & Regards On Tue, Feb 21, 2023 at 9:36 PM Ankur Dhamija ***@***.***> wrote:

…

Hello Jessie, Thanks for your reply. Sorry, but I am unable to load the file correctly from node_modules directory in my application views. I copied the preline.js file from node_modules/dist/preline.js and copied it to public/js/preline.js. In the handlebars view, it is loaded as <script src='/js/preline.js'></script> On the frontend, I don't get any error message for preline.js but the script doesn't work. Kindly suggest, how should I load the file directly from node_modules and serve it on the frontend. Thank you On Tue, Feb 21, 2023 at 8:54 PM Jessie A. Azupardo < ***@***.***> wrote: > @ankurdhamija83 <https://github.com/ankurdhamija83> You can load the js > file like @koossaayy <https://github.com/koossaayy> said. Please note > that it depends where your preline js location. > > — > Reply to this email directly, view it on GitHub > <#49 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AFOYL5PPSFIXWTDGHU3JRPDWYTMZPANCNFSM6AAAAAAU6GUSFM> > . > You are receiving this because you were mentioned.Message ID: > ***@***.***> >

[koossaayy]

Hello Jessie,

Thanks for your reply.
Sorry, but I am unable to load the file correctly from node_modules
directory in my application views.

I copied the preline.js file from node_modules/dist/preline.js and copied
it to public/js/preline.js. In the handlebars view, it is loaded as <script src='/js/preline.js'></script>
On the frontend, I don't get any error message for preline.js but the
script doesn't work.

Kindly suggest, how should I load the file directly from node_modules and
serve it on the frontend.

Thank you

On Tue, Feb 21, 2023 at 8:54 PM Jessie A. Azupardo @.***>
wrote:

@ankurdhamija83 https://github.com/ankurdhamija83 You can load the js
file like @koossaayy https://github.com/koossaayy said. Please note
that it depends where your preline js location.

—
Reply to this email directly, view it on GitHub
#49 (comment),
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AFOYL5PPSFIXWTDGHU3JRPDWYTMZPANCNFSM6AAAAAAU6GUSFM
.
You are receiving this because you were mentioned.Message ID:
@.***>

The integration process you're doing is wrong.
The file preline.js is set to call other components, i.e : Modal, Dropdown, etc...
So copying just the file, won't work. That's why you need to install it via NPM, and require the plugin in the config file of Tailwind.

[ankurdhamija83]

Hi, I have installed it via npm and require the plugin in the config file of Tailwind. The part I am missing is what should be the location of preline.js file? I am unable to call it from the node_modules folder. Is it possible for you to share a boilerplate express server setup with preline.js installed correctly. <script src="./assets/vendor/preline/dist/preline.js"></script> I don't see the above mentioned path anywhere in my application. Regards, Ankur

…

On Tue, Feb 21, 2023 at 11:28 PM Koussay ***@***.***> wrote: Hello Jessie, Thanks for your reply. Sorry, but I am unable to load the file correctly from node_modules directory in my application views. I copied the preline.js file from node_modules/dist/preline.js and copied it to public/js/preline.js. In the handlebars view, it is loaded as <script src='/js/preline.js'></script> On the frontend, I don't get any error message for preline.js but the script doesn't work. Kindly suggest, how should I load the file directly from node_modules and serve it on the frontend. Thank you On Tue, Feb 21, 2023 at 8:54 PM Jessie A. Azupardo *@*.***> wrote: @ankurdhamija83 <https://github.com/ankurdhamija83> https://github.com/ankurdhamija83 You can load the js file like @koossaayy <https://github.com/koossaayy> https://github.com/koossaayy said. Please note that it depends where your preline js location. — Reply to this email directly, view it on GitHub #49 (comment) <#49 (comment)> , or unsubscribe https://github.com/notifications/unsubscribe-auth/AFOYL5PPSFIXWTDGHU3JRPDWYTMZPANCNFSM6AAAAAAU6GUSFM . You are receiving this because you were mentioned.Message ID: *@*.***> The integration process you're doing is wrong. The file preline.js is set to call other components, i.e : Modal, Dropdown, etc... So copying just the file, won't work. That's why you need to install it via NPM, and require the plugin in the config file of Tailwind. — Reply to this email directly, view it on GitHub <#49 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFOYL5LZXLX2XS2X4R33MSDWYT633ANCNFSM6AAAAAAU6GUSFM> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[azupardo]

Hi,

I think you are getting 404 in your preline.js.

Move this "preline" folder inside your public folder which you can load it in your project.

Example :

https://prnt.sc/5UvmeJA-GvN_

https://prnt.sc/_F26QZMlDeU9

[zhandos38]

I have solved this problem by removing important param in talwind.config.js. Hope it will help someone.

[azupardo]

I have solved this problem by removing important param in talwind.config.js. Hope it will help someone.

What did you removed?

[o2sevruk]

@ankurdhamija83 Hi,
which framework or library do you use (React, Vue)?
As I see you're import the script in the head tag, but you should import it before closing body tag.

[zhandos38]

@azupardo
{
important: true,
}

[jahaganiev]

Hey folks! Thanks everyone for the input - I am converting this issue into Discussions.

[vipankumar87]

it still not working i am starting up with angular latest and following that tutorial but no access to this location

<script src="./node_modules/preline/dist/preline.js"></script>

[vipankumar87]

https://preline.co/docs/frameworks-angular.html

[kevan-mtl]

hi guys,
I'm running into the same issue on my SvelteKit project. Weirdly, everything is working fine when I test the solution locally using the instructions available here: https://preline.co/docs/frameworks-svelte.html

... but the minute I push this to Cloudflare, the dropdown of my nav bar stops working... See example here: https://feb41251.hydrogrower-website.pages.dev/

(to reproduce collapse your browser screen to show the dropdown burger menu in the top right corner).

Like everyone else, I seem to get a failure when loading preline.js.

Why does it work locally though?? (might be a noob question, but I'm kinda new to web dev and Svelte)

[azupardo]

Are you guys sure the file is there? maybe you need to run the npm install on your web path terminal

[kevan-mtl]

I managed to find a solution using the temp solution proposed here: #110