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/semantic-ui@2.4.2/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

From what I see you just imported css. Does the formantic package also deliver any js code? I assume there needs to be some js code loaded from the module in order to make the toast method available. — Jankapunkt, Jul 12 '20 at 21:05
Was missing the minifier package: standard-minifier-css@1.6.0 — Phil Heinz, Jul 30 '20 at 09:11

score 0 · Answer 1 · answered Jul 14 '20 at 07:27

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.

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

1 Answers1