Following the instruction gives errors. Don't see JS files anywhere

laravel-frontend-presets / uikit3

Laravel 5.5+ Front-end preset for UIKit 3.

https://laravel-frontend-presets.github.io/uikit3

44 stars 11 forks source link

Following the instruction gives errors. Don't see JS files anywhere #16

Open bramvanhoutte opened 6 years ago

bramvanhoutte commented 6 years ago

This is the error i get when running npm run dev

WARNING in ./resources/assets/js/bootstrap.js
Module not found: Error: Can't resolve 'bootstrap-sass' in '/Users/bramvanhoutte/Documents/OneDrive - ODISEE/Odisee/Sem4/Webdevelopment/SDProject/Hungry/resources/assets/js
'
 @ ./resources/assets/js/bootstrap.js 13:2-27
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

WARNING in ./resources/assets/js/bootstrap.js
Module not found: Error: Can't resolve 'jquery' in '/Users/bramvanhoutte/Documents/OneDrive - ODISEE/Odisee/Sem4/Webdevelopment/SDProject/Hungry/resources/assets/js'
 @ ./resources/assets/js/bootstrap.js 11:29-46
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

Components are all broken too

OwenMelbz commented 6 years ago

Does your bootstrap.js still try to include jQuery and Bootstrap?

If so - you will need to remove them.

bramvanhoutte commented 6 years ago

Remove bootstrap.js or JQuery and Bootstrap?

OwenMelbz commented 6 years ago

The error basically says that your bootstrap.js file (nothing to do with twitter bootstrap) contains 2 bits of code, which webpack cannot find.

These 2 missing bits of code are bootstrap-sass and jquery

IF you want to use jQuery - you'll need to install jquery to your project, with something like npm install jquery

If you don't want jQuery, then delete the line of code within bootstrap.js which tries to include it, i imagine it will look something like $ = jQuery = requre('jquery')

As you're using UIKit and not Twitter Bootstrap, you will want to remove the code which tries to include it, this line of code probably just looks like require('bootstrap-sass')

So if you remove that bit of code from the bootstrap.js then it wont error

bramvanhoutte commented 6 years ago

Removing the bootstrap-sass and jquery referenced fixes the errors that occur when I run npm run dev. I am however still stuck with UIKit components not displaying properly. I have linked app.css and app.js to the View but the still component isn't showing correctly.

I am wondering how the UIKit javascript is linked to the page. Since I can't find references to it anywhere.

Trying to get a simple dropdown to work.

<button type="button"></button>
<div uk-dropdown>This is the content</div>

This is the result: