1

I'm trying to use toastify in my project but it seems that react is not picking up the classes library. I can see the display message when I do my action but it appears in just text and as a normal div.

I have modified by webpack so I can use css modules, might this be the problem? See my code below:

App container:

import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

class App extends Component {
    render() {
        return (
            <div className={classes.ListHolder}>
                <Layout>
                    <ToastContainer className={classesToast} />
                    <Switch>
                        <Route path="/update" component={ItemBuilder} />
                        <Route path="/add-new" component={ItemBuilder} />
                        <Route path="/" component={Itemsholder} />
                    </Switch>
                    {/* <div>
                        <h1>Plan Your trip</h1>
                    </div> */}
                </Layout>
            </div>
        );
    }
}

Component where Im using it:

import { toast } from 'react-toastify';


            axios
                .post('/items.json', item)
                .then((res) => {
                    this.setState({ loading: true, added: true });
                    toast('testing!!!! ');
                })
                .catch((error) => {
                    this.setState({ loading: true, added: true });
                    console.log(error);
                });[![enter image description here][1]][1]

I added a pictures to demostrate the UI.

css webpack config for dev and prod:

            test: /\.css$/,
                        use: [
                            require.resolve('style-loader'),
                            {
                                loader: require.resolve('css-loader'),
                                options: {
                                    importLoaders: 1,
                                    modules: true,
                                    localIndentName: '[name]__[local]__[hash:base64:5]',
                                },
                            },

Any ideas?

Carlos Escobar
  • 422
  • 3
  • 15
  • Can you make a sandbox with this issue? Have you checked that your css is actually loaded? Have you checked that you see valid className ToastContainer using React dev tools? – Nikita Chayka Nov 27 '20 at 16:55

0 Answers0