How to properly load CSS from an external module in React?

Question

In my react.js app I am trying to use an external module (React Toastify) using the following statement:

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

Unfortunately this throws the following error:

Uncaught Error: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> .Toastify__toast-container {
|   z-index: 9999;

I guess it has something to do with webpack, here are my settings in webpack.config.js:

    output: {
  filename: '[name].js',
  path: path.resolve(__dirname, 'assets'),
},

devtool: production ? '' : 'source-map',

resolve: {
  extensions: [".js", ".jsx", ".json"],
},


module: {
  rules: [
    {
     test: /\.jsx?$/,


      exclude: /node_modules/,



      loader: 'babel-loader',
    },
  ],
},

};

I am not sure how this can be fixed, any advice appreciated.

@fastAsTortoise Ah, of course - I was using a boilerplate where it wasnt declared. Now it works, thanks a lot! — Vonder
– Vonder, Commented Mar 30, 2019 at 16:15

Peter Lehnhardt · Accepted Answer · 2019-03-30 17:07:22Z

2

In your webpack config file you have add the css loader test:

module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
    }, {
      test: /\.css$/,
      use: ['style-loader', 'css-loader'],
    },
  ],
},

And don't forget to install it with npm i -D css-loader.

More info here: https://github.com/webpack-contrib/css-loader

answered Mar 30, 2019 at 17:07

Peter Lehnhardt

5,0431 gold badge21 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to properly load CSS from an external module in React?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related