search

htmlstreamofficial / preline

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
https://preline.co
Other
4.85k stars 307 forks source link

Preline JS Bundle not working #49

Closed ankurdhamija83 closed 1 year ago

ankurdhamija83 commented 1 year ago

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 commented 1 year ago

Can you add some code for reference ?

ankurdhamija83 commented 1 year ago

<!DOCTYPE html>

{{> title}} {{> tailwind-css}} {{!-- --}} {{{ body }}}
ankurdhamija83 commented 1 year ago

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

koossaayy commented 1 year ago

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

{{> title}} {{> tailwind-css}} {{!-- --}} {{{ body }}}

ankurdhamija83 commented 1 year ago

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'>

— Reply to this email directly, view it on GitHub https://github.com/htmlstreamofficial/preline/issues/49#issuecomment-1436730617, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFOYL5NTNTTVYDVIDKBRBKDWYNDKRANCNFSM6AAAAAAU6GUSFM . You are receiving this because you authored the thread.Message ID: @.***>

koossaayy commented 1 year ago

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 commented 1 year ago

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

— Reply to this email directly, view it on GitHub https://github.com/htmlstreamofficial/preline/issues/49#issuecomment-1436938568, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFOYL5LW2NBRYTZYL7Z3COTWYNP6JANCNFSM6AAAAAAU6GUSFM . You are receiving this because you authored the thread.Message ID: @.***>

azupardo commented 1 year ago

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

ankurdhamija83 commented 1 year ago

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'> 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 https://github.com/htmlstreamofficial/preline/issues/49#issuecomment-1438670077, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFOYL5PPSFIXWTDGHU3JRPDWYTMZPANCNFSM6AAAAAAU6GUSFM . You are receiving this because you were mentioned.Message ID: @.***>

ankurdhamija83 commented 1 year ago

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'> 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 https://github.com/htmlstreamofficial/preline/issues/49#issuecomment-1438670077, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFOYL5PPSFIXWTDGHU3JRPDWYTMZPANCNFSM6AAAAAAU6GUSFM . You are receiving this because you were mentioned.Message ID: @.***>

koossaayy commented 1 year ago

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'> 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 https://github.com/htmlstreamofficial/preline/issues/49#issuecomment-1438670077, 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 commented 1 year ago

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.

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

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)

https://github.com/htmlstreamofficial/preline/issues/49#issuecomment-1438670077 , 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 https://github.com/htmlstreamofficial/preline/issues/49#issuecomment-1438888911, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFOYL5LZXLX2XS2X4R33MSDWYT633ANCNFSM6AAAAAAU6GUSFM . You are receiving this because you were mentioned.Message ID: @.***>

azupardo commented 1 year ago

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 commented 1 year ago

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

azupardo commented 1 year ago

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

What did you removed?

o2sevruk commented 1 year ago

@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 commented 1 year ago

@azupardo { important: true, }

jahaganiev commented 1 year ago

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