Alert does not close

[elissaioskon]

Hi, react-s-alert version "react-s-alert": "^1.4.1" react version "react": "^16.3.0" i have place in my app.js : import Alert from 'react-s-alert'; On a component named ContactForm i have on componentDidMount an http req. On callback if response is success i call Alert.info('Test message 2', { position: 'bottom-left', effect: 'scale', });

I can see the alert but when i close it from X it doesnt close.Am i doing something wrong?

[juliancwirko]

Could you please prepare reproduction repo?

[elissaioskon]

Ok I will do it next days. Doesnt have anyone this problem before or any idea i could try? i need only this for a contact form.Thanks.

[juliancwirko]

I use it like that and it works well for me, this is why I asked for reproduction, to test it on your and my side on the same code.

[elissaioskon]

Ok, i will make repo next days. I will try to provide some more info in case to help indentify what causes the problem. I use react with server side rendering(no nextjs) .

So in my routes.js i have:
const routes = [
  {
    component: App,
    routes: [
      {
        path: '/',
        exact: true,
        component: Home,
      },
      {
        path: '/charter-types',
        exact: true,
        component: CharterTypes,
        loadInitialData: loadSomeData,
      }

//Some more routes...
]}

And on my app.js i use
import { renderRoutes } from 'react-router-config';

class App extends Component {
  render(){
    const {route} = this.props
    return(
    <Layout>
      <Alert stack={{limit: 3}} timeout={5000} offset={60} />
      {renderRoutes(route.routes)}
    </Layout>
    )
  }
};

[elissaioskon]

I saw that for some effects it works and it close and with other not. I have added all css files. After 1 day without changing anything relative to sweet alert it works for all i dont know how. but thats good :)

[scsirdx]

@elissaioskon This bug can occur when you're using effect without importing proper css file. At least i can reproduce it locally this way.

[zorobabel]

@elissaioskon As @scsirdx says, make sure you are importing both css files, for example:

import 'react-s-alert/dist/s-alert-default.css';
import 'react-s-alert/dist/s-alert-css-effects/slide.css';