(SSR w/ Next.js) CSS not being applied to the Toast component

[pietro-tavares]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
I can't seem to make the CSS for the Toast work in my component (SSR using Next.js).
I've tried the suggestions in 202 and code from various sandboxes. I've added the CSS imports on every possible place (i.e., pages/_app.js, pages/_document.js, pages/index.js etc..).
My Toast shows up with the correct behavior (it slides just fine and closes on click) but without CSS. It looks exactly like the one in the issue linked above, so I guess this might be something on my end..

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your CodeSandbox (https://codesandbox.io/s/new) example below:
Since it's a lot of (proprietary) code, I'll share the most relevant parts. Please ask me to provide more code if needed.

// formComponent.js
import { ToastContainer, toast } from 'react-toastify';
import '../../static/css/toast.css'
import 'react-toastify/dist/ReactToastify.min.css';

const Form = ({ t }) => {
 // ...
 const raiseToast = () => {
      toast.success("Go horse!.", {
        zIndex: 9999,
        progressClassName: 'fancy-progress-bar',
        className: {
            color: '#343a40 !important',
            minHeight: '60px !important',
            borderRadius: '8px !important',
            background: '#2FEDAD !important',
            boxShadow: '2px 2px 20px 2px rgba(0,0,0,0.3) !important'
        }
      })
    }
  }
 return (
    <>
       <form>
         // ...
         <button onClick={() => raiseToast()}>
             Submit
         <button>
       </form>
       <ToastContainer
        position="bottom-center"
        hideProgressBar={false}
        autoClose={false}
        newestOnTop={true}
        closeOnClick={true}
        draggable={true}
        rtl={false}
        style={{
            color: '#343a40 !important',
            minHeight: '60px !important',
            borderRadius: '8px !important',
            background: '#2FEDAD !important',
            boxShadow: '2px 2px 20px 2px rgba(0,0,0,0.3) !important'
        }}
    </>
)

// pages/_app.js
import React from 'react'
import App from 'next/app'
import { appWithTranslation } from '../lib/i18n'
import { ToastContainer, toast } from 'react-toastify';
import '../static/css/toast.css'
import 'react-toastify/dist/ReactToastify.css'

class MyApp extends App {
   render() {
      const { Component, pageProps } = this.props
      return (
         <>
            <Component {...pageProps} />
         </>
      )
   }
}

What is the expected behavior?
A success toast with the same appearence (CSS) as seem in all demos and sandboxes around here.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
react: 16.12.0
react-toastify: 5.5.0
next: 9.2.2
Firefox 68.5.0esr (64-bit)
Google Chrome 80.0.3987.132 (Official Build) (64-bit)
Node v10.15.3 on a Debian Buster machine

[approached]

How do you fixed this?
I have the same problem.

[pietro-tavares]

I didn't, actually. I gave up momentarily to attend higher priorities at work but will get back to it soon.

I'm reopening the issue (don't remember if/why I've closed it in the first place 🤔 )

EDIT: We, at work, ended up choosing to not implement this. Best of luck @approached.

[fkhadra]

Hello,

With nextjs all you have to do is to import the css file in you app file. https://nextjs.org/docs/basic-features/built-in-css-support#adding-a-global-stylesheet

I use nextjs as well and I don't have issue with it.

[eddsaura]

I use nextjs as well and I don't have issue with it.

Hey I have problems using it with nextjs. Its like next cant find the module installed.

[fkhadra]

Hey @eddsaura can you share what's your error.

[eddsaura]

sure @fkhadra , I got:

And nextjs reference to this page: https://nextjs.org/docs/messages/module-not-found

Also, our webpack config is like this:

Thing is, I imported it first in a conditional page, I moved it to _app just in case, same output. Also I tried with import '!style-loader!css-loader!react-toastify/dist/ReactToastify.css'; also, nothing to with this.

Thanks a lot 👍🏽

[fkhadra]

Stupid question 😆 are you sure the library is installed, I mean can you check the content of your node_modules folder. I suggest reinstalling your dependencies just in case, never had any issue with nextjs before.

If you don't have a CSS loader there is a helper to inject the style https://fkhadra.github.io/react-toastify/how-to-style/#inject-style-on-demand

[eddsaura]

Stupid question 😆

Hahaha not stupid at all. Yes it is installed. I just deleted yarn.lock and node_modules and reinstalled again (for third time just for checking it you know) same output!

Still not working with injectStyle. I think importing the css is not the problem.

[fkhadra]

Super weird. Are you on https://www.reactiflux.com/. If yes you can ping me directly it will be easier. Can you share the repo?

[eddsaura]

Super weird. Are you on https://www.reactiflux.com/. If yes you can ping me directly it will be easier. Can you share the repo?

Yup, just pinged you through #help-react . Maybe can I mp you? tyty

[fkhadra]

Issue solved :). Docker cache issue

[priyank8141]

Fixed my issue :-

For a more comprehensive understanding, import the React Toastify CSS in your app.js file. You can refer to the provided link (https://codesandbox.io/s/nextjs-react-toastify-ujr4m) for further clarification.

[Lucasmm016]

This problem still occurs for me. Version next: 13.4.19. I'm using the new folder structure from next 13 (app/).