server side rendering get broken on v3

[idangozlan]

uncaughtException: window is not defined\nReferenceError: window is not defined\n at Object. (***/node_modules/react-toasts/lib/index.js:1:200)\n at Module._compile (module.js:653:30)\n at Module._compile (***x/node_modules/pirates/lib/index.js:83:24....

[Vashnak]

I'll will take a look

[Vashnak]

Okay I looked at this, It will ask me some majors changes, like exporting the css instead of embedding it to the component.

Another solution is to define inline styles, it avoids the css import, but it is so ugly in my opinion.. I will work on the first solution when I have some free time !

[idangozlan]

I think the proper solution is to let the user include the CSS file by itself instead of the module doing that automatically.
This is how all the modules are working. Take a look on react-slick for example

[Vashnak]

Yeah I know, but it is a major change, I'm not sure If I should release a 4.x or 3.x. In my opinion, 4.x since it is breaking changes, but I'm not sure

[prakashnandagopal]

A workaround for this would be to import the ToastsContainer and the ToastsStore in the componentDidMount.

constructor(){
this.ToastsContainer = () => <React.Fragment />;
this.ToastsStore = () => <React.Fragment />;
}

componentDidMount() {
const toasts = require("react-toasts");
this.ToastsContainer = toasts.ToastsContainer;
this.ToastsStore = toasts.ToastsStore;
}

render(){
<this.ToastsContainer store={this.ToastsStore} />
}

[18601673727]

Tried with <NoSsr>, no luck either.

[bjufre]

@Vashnak Any updates on this? I'm using it for a Gatsby site, and I'm getting the error related to the window being undefined.

[mrhut10]

@bjufre is your Gatsby site with a branch using this library publically accessible? I would be interested to try to replicate this without setting up a project myself to play with.