React-toastify: Error in react-toastify/dist/ReactToastify.css Module parse failed

[billtlee]

Hi, I am trying to use this package. However, I am running this issue with importing the css file. I am using nextjs and semantic-ui. Is it not compatible? thx!

Error in react-toastify/dist/ReactToastify.css
Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type. | .Toastify__toast-container { | z-index: 9999; | position: fixed;
ModuleParseError: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .Toastify__toast-container {
| z-index: 9999;
| position: fixed;

[fkhadra]

Hello @billtlee ,

Take a look at next-css plugin.

You can also copy the css file node_modules/react-toastify/dist/ReactToastify.css to your build folder and simply you a link tag.

[billtlee]

@fkhadra
Thanks! Got it to work with your suggestion.

[wilfredonoyola]

I fixed this using with Next JS 8.

import 'react-toastify/scss/main.scss'

I think this the best way!

Let me know what do you think

[huytruongdac]

I'm having this issue with Typescript, can someone help me? pls.

[utiq]

Hi @wilfredonoyola, where did you add that import?
How did you do for ToastContainer to not look for the css version?