TypeError: $(...).toast is not a function

[KalalauEnterprises]

I'm using Meteor 1.9.2 with Semantic-UI-react 0.88.2.
I needed a toast function so I converted to Fomantic-UI by:

1. Removed semantic-ui-css and added fomantic-ui-css using npm.
2. Removed <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css" /> from the head.
3. Replaced all import 'semantic-ui-css/semantic.min.css'; with import 'fomantic-ui-css/semantic.css';

When I try to execute:

$('body')
  .toast({
    title: 'LOOK',
    message: 'See, how long i will last',
    showProgress: 'bottom'
  })
;

I getTypeError: $(...).toast is not a function

Thank you for any ideas you might have. The Fomantic-UI package looks awesome. Thanks for doing this!!!
Phil

[TheJltres]

I see you are loading CSS only, that's a custom jQuery function.

If you are using Semantic-UI-Ract, try to look to they documentation, or load jQuery on page and all fomantic JavaScript files you need

[lubber-de]

The toast module is not covered by SUI React, so, as @TheJltres suggested, import jquery, then your above mentioned code should work

[KalalauEnterprises]

@TheJltres and @lubber-de Thank you! I'm sorry for my ignorance on this, but jQuery is already in my Meteor project. I have no problems using jQuery to reference the body with const body = $('body');.
What else do I need to do to get the toast function added to jQuery? Thanks again!

[lubber-de]

Is jquery imported , thus available, before the .toast() call takes place?

[KalalauEnterprises]

Yes, in fact I added the const body = $('body'); right before my toast test just to see if it would error there first. It didn't. I got the body reference just fine, so I'm sure the DOM is ready and all is imported.

[lubber-de]

🤔 Of course you also need to include the toast.js...
If it is still not working, please try to create a jsfiddle / codepen so we can try to reproduce this

[KalalauEnterprises]

To include the toast.js I would use some version of import '...' from 'fomatic-ui-css';?

[lubber-de]

yes, this file is needed https://github.com/fomantic/Fomantic-UI-CSS/blob/master/components/toast.js

[lubber-de]

Most probably also the transition.js , which toast uses

[KalalauEnterprises]

Thanks I'll give it a shot.

[KalalauEnterprises]

It worked, so for anyone using Meteor, in your client startup,

import '/node_modules/fomantic-ui-css/components/toast.js';
import '/node_modules/fomantic-ui-css/components/transition.js';

Solved my problem. You can then use $(...).toast(...)
Thank you @lubber-de and @TheJltres!