Fomantic UI - TypeError: $(...).toast is not a function

Question

I am using Meteor with React and Semantic-ui-react. I needed a toast function so I wanted to change to Fomantic UI. Everything related is loaded by NPM.

I removed semantic-ui-css and added fomantic-ui-css.

I removed the <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css" /> from the head.

I changed all import 'semantic-ui-css/semantic.min.css'; to import 'fomantic-ui-css/semantic.css';

When I try to execute a

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

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

I can't find anything on it over various searches through SO and repository issues.

Thanks for any help you can give!! Phil

Answer 1

You basically need to import the semantic.js file, which will add the functionality to your jquery instances:

import 'fomantic-ui-css/semantic.js'
import 'fomantic-ui-css/semantic.css'

However, there is no need to import the .min.* minified files, because Meteor will use a js and css minifier when you build your app for production / deployment later.