search

fkhadra / react-toastify

React notification made easy 🚀 !
https://fkhadra.github.io/react-toastify/introduction
MIT License
12.72k stars 700 forks source link

React 16.0.0. update #55

Closed cbroberg closed 7 years ago

cbroberg commented 7 years ago

Hi.

Thanks for the amazing lib.

Any chance of an update so react-toastify will work in React 16?

Thanks in advance.

fkhadra commented 7 years ago

Hey @cbroberg,

I'm glad you like it ! The latest version v2.1.0 support react16. Did you encounter any issue ?

cyrus-za commented 7 years ago

Hi, I am encountering a issue when I upgrade. As soon as the toast gets called I get this error: Cannot read property 'classList' of null

react-dom.development.js?c2e5001:8305 The above error occurred in the component: in Transition (created by DefaultTransition) in DefaultTransition (created by Toast) in Toast in div in TransitionGroup (created by ToastContainer) in div (created by ToastContainer) in ToastContainer (at Toast.js:7) in div (at Toast.js:6) in Unknown (at Layout.js:29) in div (at Layout.js:25) in MuiThemeProvider (at Layout.js:24) in div (at Layout.js:23) in Layout (created by Apollo(Layout)) in Apollo(Layout) (at profile.js?entry:31) in Profile (created by Apollo(Profile)) in Apollo(Profile) (created by Connect(Apollo(Profile))) in Connect(Apollo(Profile)) (created by withApollo(Connect(Apollo(Profile)))) in withApollo(Connect(Apollo(Profile))) (at with-data.js:86) in ApolloProvider (at with-data.js:85) in _class (created by Container) in AppContainer (created by Container) in Container (created by App) in div (created by App) in App

React will try to recreate this component tree from scratch using the error boundary you provided, AppContainer.

fkhadra commented 7 years ago

Hey @cbroberg,

Would you like me to reopen the issue ? The behavior you get is kind of weird.

I created an app with create-react-app and I'm unable to reproduce the issue. The test use react16 and the build pass without any issue.

Maybe it could be a cache issue or something like that. Did you try to clear the cache and install react from scratch ?

Can you provide some snippets so I could help you better ?

cyrus-za commented 7 years ago

I've tried clearing cache and everything but I still get the error. I am using next.js with Server side rendering so not sure if it has something to do with that. Using next 4.0.0

cyrus-za commented 7 years ago

Here's my Toast.js component that I add inside my Layout.js (so it renders on every nextjs page) 

import * as React from "react";
import { toast, ToastContainer } from "react-toastify";

// noinspection CssUnknownProperty
export default (props) =>
    <div>
        <ToastContainer {...props} pauseOnHover position={toast.POSITION.TOP_RIGHT}/>
        {/*language=CSS*/}
        <style>{`
            @-webkit-keyframes toastify-bounceInRight {
                0%, 60%, 75%, 90%, to {
                    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
                    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
                }
                0% {
                    opacity: 0;
                    -webkit-transform: translate3d(3000px, 0, 0);
                    transform: translate3d(3000px, 0, 0)
                }
                60% {
                    opacity: 1;
                    -webkit-transform: translate3d(-25px, 0, 0);
                    transform: translate3d(-25px, 0, 0)
                }
                75% {
                    -webkit-transform: translate3d(10px, 0, 0);
                    transform: translate3d(10px, 0, 0)
                }
                90% {
                    -webkit-transform: translate3d(-5px, 0, 0);
                    transform: translate3d(-5px, 0, 0)
                }
                to {
                    -webkit-transform: none;
                    transform: none
                }
            }

            @keyframes toastify-bounceInRight {
                0%, 60%, 75%, 90%, to {
                    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
                    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
                }
                0% {
                    opacity: 0;
                    -webkit-transform: translate3d(3000px, 0, 0);
                    transform: translate3d(3000px, 0, 0)
                }
                60% {
                    opacity: 1;
                    -webkit-transform: translate3d(-25px, 0, 0);
                    transform: translate3d(-25px, 0, 0)
                }
                75% {
                    -webkit-transform: translate3d(10px, 0, 0);
                    transform: translate3d(10px, 0, 0)
                }
                90% {
                    -webkit-transform: translate3d(-5px, 0, 0);
                    transform: translate3d(-5px, 0, 0)
                }
                to {
                    -webkit-transform: none;
                    transform: none
                }
            }

            .toast-enter--bottom-right, .toast-enter--top-right, .toastify-bounceInRight {
                -webkit-animation-name: toastify-bounceInRight;
                animation-name: toastify-bounceInRight
            }

            @-webkit-keyframes toastify-bounceOutRight {
                20% {
                    opacity: 1;
                    -webkit-transform: translate3d(-20px, 0, 0);
                    transform: translate3d(-20px, 0, 0)
                }
                to {
                    opacity: 0;
                    -webkit-transform: translate3d(2000px, 0, 0);
                    transform: translate3d(2000px, 0, 0)
                }
            }

            @keyframes toastify-bounceOutRight {
                20% {
                    opacity: 1;
                    -webkit-transform: translate3d(-20px, 0, 0);
                    transform: translate3d(-20px, 0, 0)
                }
                to {
                    opacity: 0;
                    -webkit-transform: translate3d(2000px, 0, 0);
                    transform: translate3d(2000px, 0, 0)
                }
            }

            .toast-exit--bottom-right, .toast-exit--top-right, .toastify-bounceOutRight {
                -webkit-animation-name: toastify-bounceOutRight;
                animation-name: toastify-bounceOutRight
            }

            @-webkit-keyframes toastify-bounceInLeft {
                0%, 60%, 75%, 90%, to {
                    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
                    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
                }
                0% {
                    opacity: 0;
                    -webkit-transform: translate3d(-3000px, 0, 0);
                    transform: translate3d(-3000px, 0, 0)
                }
                60% {
                    opacity: 1;
                    -webkit-transform: translate3d(25px, 0, 0);
                    transform: translate3d(25px, 0, 0)
                }
                75% {
                    -webkit-transform: translate3d(-10px, 0, 0);
                    transform: translate3d(-10px, 0, 0)
                }
                90% {
                    -webkit-transform: translate3d(5px, 0, 0);
                    transform: translate3d(5px, 0, 0)
                }
                to {
                    -webkit-transform: none;
                    transform: none
                }
            }

            @keyframes toastify-bounceInLeft {
                0%, 60%, 75%, 90%, to {
                    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
                    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
                }
                0% {
                    opacity: 0;
                    -webkit-transform: translate3d(-3000px, 0, 0);
                    transform: translate3d(-3000px, 0, 0)
                }
                60% {
                    opacity: 1;
                    -webkit-transform: translate3d(25px, 0, 0);
                    transform: translate3d(25px, 0, 0)
                }
                75% {
                    -webkit-transform: translate3d(-10px, 0, 0);
                    transform: translate3d(-10px, 0, 0)
                }
                90% {
                    -webkit-transform: translate3d(5px, 0, 0);
                    transform: translate3d(5px, 0, 0)
                }
                to {
                    -webkit-transform: none;
                    transform: none
                }
            }

            .toast-enter--bottom-left, .toast-enter--top-left, .toastify-bounceInLeft {
                -webkit-animation-name: toastify-bounceInLeft;
                animation-name: toastify-bounceInLeft
            }

            @-webkit-keyframes toastify-bounceOutLeft {
                20% {
                    opacity: 1;
                    -webkit-transform: translate3d(20px, 0, 0);
                    transform: translate3d(20px, 0, 0)
                }
                to {
                    opacity: 0;
                    -webkit-transform: translate3d(-2000px, 0, 0);
                    transform: translate3d(-2000px, 0, 0)
                }
            }

            @keyframes toastify-bounceOutLeft {
                20% {
                    opacity: 1;
                    -webkit-transform: translate3d(20px, 0, 0);
                    transform: translate3d(20px, 0, 0)
                }
                to {
                    opacity: 0;
                    -webkit-transform: translate3d(-2000px, 0, 0);
                    transform: translate3d(-2000px, 0, 0)
                }
            }

            .toast-exit--bottom-left, .toast-exit--top-left, .toastify-bounceOutLeft {
                -webkit-animation-name: toastify-bounceOutLeft;
                animation-name: toastify-bounceOutLeft
            }

            @-webkit-keyframes toastify-bounceInUp {
                0%, 60%, 75%, 90%, to {
                    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
                    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
                }
                0% {
                    opacity: 0;
                    -webkit-transform: translate3d(0, 3000px, 0);
                    transform: translate3d(0, 3000px, 0)
                }
                60% {
                    opacity: 1;
                    -webkit-transform: translate3d(0, -20px, 0);
                    transform: translate3d(0, -20px, 0)
                }
                75% {
                    -webkit-transform: translate3d(0, 10px, 0);
                    transform: translate3d(0, 10px, 0)
                }
                90% {
                    -webkit-transform: translate3d(0, -5px, 0);
                    transform: translate3d(0, -5px, 0)
                }
                to {
                    -webkit-transform: translateZ(0);
                    transform: translateZ(0)
                }
            }

            @keyframes toastify-bounceInUp {
                0%, 60%, 75%, 90%, to {
                    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
                    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
                }
                0% {
                    opacity: 0;
                    -webkit-transform: translate3d(0, 3000px, 0);
                    transform: translate3d(0, 3000px, 0)
                }
                60% {
                    opacity: 1;
                    -webkit-transform: translate3d(0, -20px, 0);
                    transform: translate3d(0, -20px, 0)
                }
                75% {
                    -webkit-transform: translate3d(0, 10px, 0);
                    transform: translate3d(0, 10px, 0)
                }
                90% {
                    -webkit-transform: translate3d(0, -5px, 0);
                    transform: translate3d(0, -5px, 0)
                }
                to {
                    -webkit-transform: translateZ(0);
                    transform: translateZ(0)
                }
            }

            .toast-enter--bottom-center, .toastify-bounceInUp {
                -webkit-animation-name: toastify-bounceInUp;
                animation-name: toastify-bounceInUp
            }

            @-webkit-keyframes toastify-bounceOutUp {
                20% {
                    -webkit-transform: translate3d(0, -10px, 0);
                    transform: translate3d(0, -10px, 0)
                }
                40%, 45% {
                    opacity: 1;
                    -webkit-transform: translate3d(0, 20px, 0);
                    transform: translate3d(0, 20px, 0)
                }
                to {
                    opacity: 0;
                    -webkit-transform: translate3d(0, -2000px, 0);
                    transform: translate3d(0, -2000px, 0)
                }
            }

            @keyframes toastify-bounceOutUp {
                20% {
                    -webkit-transform: translate3d(0, -10px, 0);
                    transform: translate3d(0, -10px, 0)
                }
                40%, 45% {
                    opacity: 1;
                    -webkit-transform: translate3d(0, 20px, 0);
                    transform: translate3d(0, 20px, 0)
                }
                to {
                    opacity: 0;
                    -webkit-transform: translate3d(0, -2000px, 0);
                    transform: translate3d(0, -2000px, 0)
                }
            }

            .toast-exit--top-center, .toastify-bounceOutUp {
                -webkit-animation-name: toastify-bounceOutUp;
                animation-name: toastify-bounceOutUp
            }

            @-webkit-keyframes toastify-bounceInDown {
                0%, 60%, 75%, 90%, to {
                    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
                    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
                }
                0% {
                    opacity: 0;
                    -webkit-transform: translate3d(0, -3000px, 0);
                    transform: translate3d(0, -3000px, 0)
                }
                60% {
                    opacity: 1;
                    -webkit-transform: translate3d(0, 25px, 0);
                    transform: translate3d(0, 25px, 0)
                }
                75% {
                    -webkit-transform: translate3d(0, -10px, 0);
                    transform: translate3d(0, -10px, 0)
                }
                90% {
                    -webkit-transform: translate3d(0, 5px, 0);
                    transform: translate3d(0, 5px, 0)
                }
                to {
                    -webkit-transform: none;
                    transform: none
                }
            }

            @keyframes toastify-bounceInDown {
                0%, 60%, 75%, 90%, to {
                    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
                    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
                }
                0% {
                    opacity: 0;
                    -webkit-transform: translate3d(0, -3000px, 0);
                    transform: translate3d(0, -3000px, 0)
                }
                60% {
                    opacity: 1;
                    -webkit-transform: translate3d(0, 25px, 0);
                    transform: translate3d(0, 25px, 0)
                }
                75% {
                    -webkit-transform: translate3d(0, -10px, 0);
                    transform: translate3d(0, -10px, 0)
                }
                90% {
                    -webkit-transform: translate3d(0, 5px, 0);
                    transform: translate3d(0, 5px, 0)
                }
                to {
                    -webkit-transform: none;
                    transform: none
                }
            }

            .toast-enter--top-center, .toastify-bounceInDown {
                -webkit-animation-name: toastify-bounceInDown;
                animation-name: toastify-bounceInDown
            }

            @-webkit-keyframes toastify-bounceOutDown {
                20% {
                    -webkit-transform: translate3d(0, 10px, 0);
                    transform: translate3d(0, 10px, 0)
                }
                40%, 45% {
                    opacity: 1;
                    -webkit-transform: translate3d(0, -20px, 0);
                    transform: translate3d(0, -20px, 0)
                }
                to {
                    opacity: 0;
                    -webkit-transform: translate3d(0, 2000px, 0);
                    transform: translate3d(0, 2000px, 0)
                }
            }

            @keyframes toastify-bounceOutDown {
                20% {
                    -webkit-transform: translate3d(0, 10px, 0);
                    transform: translate3d(0, 10px, 0)
                }
                40%, 45% {
                    opacity: 1;
                    -webkit-transform: translate3d(0, -20px, 0);
                    transform: translate3d(0, -20px, 0)
                }
                to {
                    opacity: 0;
                    -webkit-transform: translate3d(0, 2000px, 0);
                    transform: translate3d(0, 2000px, 0)
                }
            }

            .toast-exit--bottom-center, .toastify-bounceOutDown {
                -webkit-animation-name: toastify-bounceOutDown;
                animation-name: toastify-bounceOutDown
            }

            .toastify-animated {
                -webkit-animation-duration: .75s;
                animation-duration: .75s;
                -webkit-animation-fill-mode: both;
                animation-fill-mode: both
            }

            .toastify {
                z-index: 1000;
                position: fixed;
                padding: 4px;
                width: 320px;
                box-sizing: border-box;
                color: #fff
            }

            .toastify--top-left {
                top: 1em;
                left: 1em
            }

            .toastify--top-center {
                top: 1em;
                left: 50%;
                margin-left: -160px
            }

            .toastify--top-right {
                top: 1em;
                right: 1em
            }

            .toastify--bottom-left {
                bottom: 1em;
                left: 1em
            }

            .toastify--bottom-center {
                bottom: 1em;
                left: 50%;
                margin-left: -160px
            }

            .toastify--bottom-right {
                bottom: 1em;
                right: 1em
            }

            @media only screen and (max-width: 480px) {
                .toastify {
                    width: 100vw;
                    padding: 0
                }

                .toastify--top-center, .toastify--top-left, .toastify--top-right {
                    left: 0;
                    top: 0;
                    margin: 0
                }

                .toastify--bottom-center, .toastify--bottom-left, .toastify--bottom-right {
                    left: 0;
                    bottom: 0;
                    margin: 0
                }
            }

            .toastify__close {
                padding: 0;
                color: #fff;
                font-weight: 700;
                font-size: 14px;
                background: transparent;
                outline: none;
                border: none;
                cursor: pointer;
                opacity: .7;
                transition: .3s ease;
                -ms-flex-item-align: start;
                align-self: flex-start
            }

            .toastify__close:focus, .toastify__close:hover {
                opacity: 1
            }

            .toastify-content--default .toastify__close {
                color: #000;
                opacity: .3
            }

            .toastify-content--default .toastify__close:hover {
                opacity: 1
            }

            .toastify-content {
                position: relative;
                min-height: 48px;
                margin-bottom: 1rem;
                padding: 8px;
                border-radius: 1px;
                box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .1), 0 2px 15px 0 rgba(0, 0, 0, .05);
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                justify-content: space-between;
                max-height: 800px;
                overflow: hidden;
                font-family: sans-serif;
                cursor: pointer
            }

            .toastify-content--default {
                background: #00626b;
                color: #FFF;
            }

            .toastify-content--info {
                background: #3498db
            }

            .toastify-content--success {
                background: #07bc0c
            }

            .toastify-content--warning {
                background: #f1c40f
            }

            .toastify-content--error {
                background: #e74c3c
            }

            .toastify__body {
                margin: auto 0
            }

            @media only screen and (max-width: 480px) {
                .toastify-content {
                    margin-bottom: 0
                }
            }

            @-webkit-keyframes track-progress {
                0% {
                    width: 100%
                }
                to {
                    width: 0
                }
            }

            @keyframes track-progress {
                0% {
                    width: 100%
                }
                to {
                    width: 0
                }
            }

            .toastify__progress {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 0;
                height: 5px;
                z-index: 1;
                opacity: .7;
                -webkit-animation: track-progress linear 1;
                animation: track-progress linear 1;
                background-color: hsla(0, 0%, 100%, .7)
            }

            .toastify__progress--default {
                background: #4ff2cd;
            }
        `}</style>
    </div>

And then when ever I call toast('something') I get that error. I import toast in a different component and call it that way

fkhadra commented 7 years ago

Hey @cyrus-za,

I'll bootstrap an app with next4 to see if it has something to do with the SSR. Let you know if I found something asap.

fkhadra commented 7 years ago

@cyrus-za is there a next4 starter kit available somewhere?

EDIT: Found one.

fkhadra commented 7 years ago

@cyrus-za It's working with next4 without any issue. You can find my source here

PS: Sorry for the spam

cyrus-za commented 7 years ago

Hi,

It seems to only be a problem on my local host. If I deploy it, the issue goes away so something must still be cached somewhere. You can close the issue

On Wed, Nov 8, 2017 at 2:26 PM Fadi Khadra notifications@github.com wrote:

@cyrus-za https://github.com/cyrus-za It's working with next4 without any issue. You can find my source here https://github.com/fkhadra/next-toastify

PS: Sorry for the spam

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/fkhadra/react-toastify/issues/55#issuecomment-342802820, or mute the thread https://github.com/notifications/unsubscribe-auth/ABwqZeaAhbL4mrD_PhPmqKdyfcu5C3rCks5s0Z3cgaJpZM4PylnA .

budiadiono commented 6 years ago

@cyrus-za I have same issue, it was fixed by solving my "dependencies issue". I've checked through npm ls react -- some libraries in my project using React 15.x, that was causing the issue.

wozzo commented 5 years ago

For anyone else who uses yarn, I was able to fix this by adding a resolutions property to my package.json

  "resolutions": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-transition-group": "^4.0.1"
  }