Uncaught ReferenceError: bulmaCarousel is not defined

[deeshrestha]

Hi, In my Laravel project, carousel is included

require('bulma-extensions/bulma-carousel/dist/bulma-carousel');

but

var carousels = bulmaCarousel.attach();

produces the said error. Carousel styling is fine but slider part is not working.

Any suggestion? Thanks!

[Wikiki]

Hi,

Try precising the .js file extension in the require.

[deeshrestha]

I did but I a am getting same error. I have other extensions imported in similar manner. Tags Input is working fine.

Whether I do attach or not. Carousel slider is not working.

[Wikiki]

I guess I had an issue with the dist compilation. Can you try with the code in the "release/2.0.0" branch ? Just to confirm it's ok with the new code. If then I'll release it.

[Wikiki]

It seems in the master branch (and so the npm package) the component is called Carousel and not bulmaCarousel. I don't know why. I'll try to figure it out.

[Wikiki]

Forget about the release branch is an old one. sorry I mix between the different extensions

[deeshrestha]

I am using the whole extension package. Carousel is one of them. I am using v1.0.31 of extension that includes Carousel v.2.0.14.

I have checked the bulma-carousel.js. Seems like it is defined as bulmaCarousel

Not sure why I am getting this error.

I am trying to attach that after including bulma, then bulma-extensions

By the way, just for the clue: It shows last image among 3 images inside Carousel. Navigation keys have no response.

[dumptyd]

I'm getting this same error. Can't use bulma-carousel at all.

EDIT: Sorry about this, it was parcel causing this issue.

[notchris]

I was getting this issue, but ended up using Carousel instead of bulmaCarousel and it seems to work. However, when switching between slides, I get the following error:

Unable to preventDefault inside passive event listener invocation.

I've tried applying touch-action style props to all contained elements with no luck.

https://i.imgur.com/asMThkK.png

[Wikiki]

Arf... I'll check this extension completely tomorrow.

[ShapesGraphicStudio]

Hello, I'm having the same issue here, maybe not doing it right.

I installed with

npm install bulma-extensions

In resources/js/app.js, I wrote

require('bulma-extensions/bulma-carousel/dist/js/bulma-carousel');

I also tried

require('bulma-extensions/bulma-carousel/dist/js/bulma-carousel.js');

Both seem to give the same result.

for the system to find the .js file

Just beneath that I wrote

var carousels = bulmaCarousel.attach();

And I get same error "ReferenceError: bulmaCarousel is not defined"

Same with

var carousels = Carousel.attach();

I get error "ReferenceError: Carousel is not defined"

When checking bulma-carousel.js I can see bulmaCarousel defined.

Looks like the problem is because

var carousels = bulmaCarousel.attach();

is called before bulma-carousel.js.

Any help would be appreciated here.

Best regards

[ShapesGraphicStudio]

I tried to change integration to change the order but I still get same error message. Making this work fine with a static html file, but not within Laravel..

[Wikiki]

please try v2.1.15 compile with webpack

[ShapesGraphicStudio]

Thanks for the concern. But I can not make this work. Maybe it's because of my integration, not doing it right.

I'm a Laravel newbie, but I managed to make https://ssense.github.io/vue-carousel/ work fine.

But as I was using Bulma css framework for my project, I wanted to include bulma extensions.

I just tried it in a new Laravel fresh install to see if my project was causing the issue, but I get the same result.

The only way I can make it work is by putting the js in a public/js/custom.js file and calling it in my blade template like

<script src="{{ asset('js/custom.js') }}"></script>

But I don't think it's the right way to do it / best practice with Laravel.. ?

If anyone made this work, could you please explain how ?

[Wikiki]

I don't know laravel. Are you able to share you fresh project so I'll be ablle to test and try to find the issue on my side ?

[ShapesGraphicStudio]

Thanks for your concern.

I just pushed a public repository with all explanations.

[ShapesGraphicStudio]

BTW, if it can help, I tested out other extensions.

Accordion, Quickview, Icon helper are working fine.

On Calendar I get same error bulmaCalendar is not defined.

Tags don't seem to work neither but no error.

[Wikiki]

@ShapesGraphicStudio : is https://github.com/ShapesGraphicStudio/LaravelBulma is the repository you are talking about ?

@Laraveldeep you seem to be used to work with Laravel...Can I request you help ? Integration with Laravel drives me crazy. What's the prerequisites for extensions integration ? Should I release them in ES5 / ES6. If you have time to check with me one (calendar or carousel) extension with me and its integration into a Laravel project I would really appreciate that. Once we found the right build process I'll then be able to apply it to all other extensions.

[Wikiki]

@ShapesGraphicStudio : can you join me on discord: https://discord.gg/9RVxNG I'm trying to work with your laravel repository and maybe you can help me.

[Wikiki]

@ShapesGraphicStudio : on this discord server instead please: https://discord.gg/reg7Yr

[Wikiki]

1. in webpack.mix.js update the mix command to: mix.js('resources/assets/js/app.js', 'public/js') .sass('resources/assets/sass/app.scss', 'public/css') .copy('node_modules/bulma-extensions/bulma-carousel/dist/js/bulma-carousel.js', 'public/js');

2. in your view include the JS file now available from the public/js folder and then init the extension using var carousels = bulmaCarousel.attach()

[ShapesGraphicStudio]

Great shot! Thanks a lot !!

[deeshrestha]

@Wikiki Sorry didn't get any notification regarding this conversation. Laravel uses 'Laravel mix' a wrapper for webpack.

.copy('node_modules/bulma-extensions/bulma-carousel/dist/js/bulma-carousel.js', 'public/js'); may not be necessary.

Let me check few things.

[deeshrestha]

We need to define bulmaCarousel explicitly. This works perfectly with Laravel Mix/Webpack.

SASS
@import "node_modules/bulma-extensions/bulma-carousel/dist/css/bulma-carousel.sass"
JS
var bulmaCarousel = require('bulma-extensions/bulma-carousel/dist/js/bulma-carousel');
bulmaCarousel.attach();

[abhimanyunaikare]

https://twitter.com/sahajiabhimanyu/status/1074979485307625472

I am using Laravel+VUE+Bulma, and calendar i dont know if i wrote properly. But all other tags like input are working fine.

[jessaustin]

EDIT: Sorry about this, it was parcel causing this issue.

@dumptyd I'm getting the same issue with parcel and bulmaCarousel not being defined; how did you fix it? Sorry the parcel docs have not been helpful; thanks in advance!