marcelodolza / iziToast

Elegant, responsive, flexible and lightweight notification plugin with no dependencies.

Home Page:http://izitoast.marcelodolza.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

'iziToast' is not defined

DaniBencz opened this issue · comments

Hi!
I work with React. Here is the .html:

At compile I get 'iziToast' is not defined.
Any ideas?
Thanks!

I meant:
rel="stylesheet" href="../node_modules/izitoast/dist/css/iziToast.min.css"
src="../node_modules/izitoast/dist/js/iziToast.min.js"

commented

@DaniBencz I assume you are using webpack and while serving html file, it will not take relative path i.e. css files from node_modules at runtime. So you have to import iziToast css at your root react component/view.

import 'izitoast/dist/css/iziToast.min.css'; // loading css 
import iziToast from 'izitoast/dist/js/iziToast.min.js';  // you have access to iziToast now

You should have css-loader to import css file.

Or if you have public folder to serve assets in your react project, you can simply move these 2 files and include them in html file with public path location. example:

<link rel="stylesheet" href="/assets/css/iziToast.min.css">
commented

@DaniBencz please confirm if the provided solution resolves your issue, so that @marcelodolza can close this issue.

@theajr Thank you for the information! Indeed, I use webpack. Eventually I dropped iziToast from the project, but that is not to say, your suggestion would not have worked.

its done in three magical steps
1.install izitoast //npm i izitoast
2. const iziToast = require('izitoast);
3.import 'izitoast/dist/css/iziToast.min.css';

and you are good to go peace out comment back if you need further assistance.

@DaniBencz I assume you are using webpack and while serving html file, it will not take relative path i.e. css files from node_modules at runtime. So you have to import iziToast css at your root react component/view.

import 'izitoast/dist/css/iziToast.min.css'; // loading css 
import iziToast from 'izitoast/dist/js/iziToast.min.js';  // you have access to iziToast now

You should have css-loader to import css file.

Or if you have public folder to serve assets in your react project, you can simply move these 2 files and include them in html file with public path location. example:

<link rel="stylesheet" href="/assets/css/iziToast.min.css">

Thanks, it solved. But i do not understand, why reactjs does not see it. Or i mean nodejs?