React-toastify: ERROR in ./node_modules/react-toastify/dist/ReactToastify.css Module parse failed: Unexpected token (1:0)

[speichs]

I am having an issue getting my project to recognize the css file included with react-toastify. I understand that I might need to augment my webpack config in order to have this file recognized but I am wondering if you could provide an example as to how to modify.

I have encountered no issues with other css files that I am loading.

[wwwennn]

I met the same problem. Hope someone could help.

[speichs]

Though not the best solution and one that I would not care to keep in my project, try:

import "!style-loader!css-loader!react-toastify/dist/ReactToastify.css"

[fkhadra]

Hey,

Which version of webpack are you using? You just need the style loader as shown here.

[speichs]

I am using the latest version of webpack. I believe that the issue is stemming from the fact that I cannot (do not know how) to add a loader to a specific file in the config. If you have any recommendations I would very much appreciate it. Here is my config file:

const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client?reload=true',
    path.resolve(__dirname, 'src/index.js')
  ],
  target: 'web',
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'src'),
    historyApiFallback: {index: 'index.html'},
    compress:true,
    hotOnly:true,
    port:9000,
    open:true,
    filename: 'index.js',
    overlay:{
      errors: false,
      warnings: false
    },
    proxy: {
      '/**': {
        target: 'http://localhost:10088/',
        secure: false
      }
    }
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new UglifyJSPlugin({
      test: /\.js($|\?)/i,
      sourceMap:true,
      uglifyOptions: {
        compress: true
      }
    }),
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)?$/,
        exclude: '/node_modules/',
        use: 'babel-loader'
      },
      // {
      //   test:/\.js$/,
      //   exclude: '/node_modules/',
      //   loader: "eslint-loader",
      //   options:{
      //     emitWarning: true
      //   }
      // },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: '[name]__[local]'
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: (loader) => [
                require('postcss-advanced-variables')()
              ]
            }
          }
        ]
      },
      {
        test:/\.(jpe?g|png|gif|svg)$/i,
        exclude: /node_modules/,
        use:[
          {
            loader: 'file-loader?limit=10000&mimetype=image/png'
          }
        ]
      }
    ]
  }
}

[fkhadra]

Hey @speichs,

First suggestion, try the following config in place of your css block without options:

{
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          }
        ]
}

Then in your code:

import 'react-toastify/dist/ReactToastify.css'

If it works(it should work), add the postcss loader:

{
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader'
          }
        ]
}

If It works, you can begin to add options to the loaders. I'm back fron holidays so I'll be able to respond faster.

[speichs]

Apologies for the delay. Was on vacation. It only works if I remove the exclusion of node_modules. Unfortunately I need to have that exclusion in there. Do you have any suggestions on how to override this in webpack for just a single file?

[fernandolobao]

Same problem here :/

Do someone already have an answer for this?

[njosefbeck]

@speichs @fernandolobao This issue seems to have some different solutions that people have tried: https://github.com/webpack/webpack/issues/2031. Might be helpful!

[fkhadra]

Hello,

You can also include the css using unpkg cdn using the url below:
https://unpkg.com/react-toastify@latest/dist/ReactToastify.css

I'll close the issue. Please feel free to open a new one if needed.

[oklas]

We have same here in create-react-app ("react-scripts": "3.4.1") - it is reproducing only in production - in development it is not reproducing

the solution

import "!style-loader!css-loader!react-toastify/dist/ReactToastify.css"

mentioned above here, produces build error:

Line 7:1: Unexpected '!' in '!style-loader!css-loader!react-toastify/dist/ReactToastify.css'. Do not use import syntax to configure webpack loaders import/no-webpack-loader-syntax

[Hakeemmidan]

Importing 'react-toastify/dist/ReactToastify.css' to the file where I was importing <ToastContainer /> (I'm personally doing it in my root component), and restarting the server has solved the issue for me.

Here's how my root file looks like:

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


function App() {
  return (
    <>
      <ToastContainer />
      {/* < other components here > */}
    </>
  );
}

export default App;