css-loader : Unexpected token of css coming from node module

Question

I will explain my issue with the Github issue style :

What is the current behavior?

Cannot load css. The full error message:

If the current behavior is a bug, please provide the steps to reproduce.
My package.json : https://gist.github.com/jy95/99377c113252e6baaa23087abe859814
My webpack.config.js : https://gist.github.com/jy95/16b0f03d46b087c6f2640c8e9178914f

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.
Node : 6.10.3
OS: Windows 10

PS: Before you can tell me to see with ExtractTextPlugin, I would like an explanation why I got this error (I also tried to required the css in my entry : app.js , same result )

Answer 1

I finally found the fix, may it help you :

The culpit was the postcss-loader in v2.0.1, update this to 2.0.5 tested (https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/498)

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const postcssPlugins = [
  require('postcss-cssnext')(),
  require('postcss-modules-values')
];

const scssLoader = [
  { loader: 'style-loader' },
  { loader: 'css-loader' },
  { loader: 'sass-loader' }
];

const postcssLoader = [
  { loader: 'style-loader' },
  { loader: 'css-loader', options: { modules: true } },
  { loader: 'postcss-loader', options: { plugins: [...postcssPlugins] } }
];

// you'll need to npm install the following: [raw-loader, html-minifier-loader, json-loader, css-loader,style-loader, url-loader, file-loader ]
// in your index.html you should have two script tags, one for app.js(or bundle.js) and vendor.js
// no need for babelify with webpack. just, npm install --save-dev babel-cli babel-preset-es2016
// in .babelrc file change the preset of 2015 to ["es2016"]
module.exports = {
  entry: {
    app: './app.js',
    // if any on these are just for css remove them from here and require(with absolute path) them from app.js
    vendor: [
      'babel-polyfill',
      'admin-lte',
      'admin-lte/bootstrap/js/bootstrap.min.js',
      'lobibox/dist/js/notifications.min.js',
      'admin-lte/plugins/fastclick/fastclick.js',
      'moment',
      'moment/locale/fr.js',
      'moment-timezone',
      'eonasdan-bootstrap-datetimepicker',
      'bootstrap-table',
      'bootstrap-table/dist/locale/bootstrap-table-fr-BE.min.js',
      'parsleyjs',
      'parsleyjs/dist/i18n/fr.js',
      'bootstrap-daterangepicker',
      'socket.io-client',
      'jquery-confirm',
      'push.js',
      'lodash',
      'bootstrap-table/dist/extensions/export/bootstrap-table-export.min.js',
      'tableexport.jquery.plugin'
    ]
  },
  //devtool: 'eval', // for test in the browser
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')//,
    //pathinfo: true
  },
  module: {
    rules: [{
      test: /\.js$/,
      use: 'babel-loader',
      exclude: /node_modules/
    }, {
      test: /\.html$/,
      use: ['raw-loader', 'html-minifier-loader'],
      exclude: /node_modules/
    }, {
      test: /\.json$/,
      use: 'json-loader',
      exclude: /node_modules/
    }, {
      test: /\.(scss|sass)$/,
      use: ExtractTextPlugin.extract({
            fallback: scssLoader[0], // style-loader
            use: scssLoader.slice(1) // [ 'css-loader', 'sass-loader' ]
        })
    },{ 
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
      })
    }, {
      test: /\.(jpg|png|gif)$/,
      use: 'file-loader'
    }, {
      test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
      loader: 'file-loader?name=fonts/[name].[ext]'
    }],
  },
  plugins: [
    new ExtractTextPlugin({
        filename: 'app.bundle.css',
        allChunks: true
    }),
    new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
    })
  ],
};

Answer 2

Try this out in your webpack.config.js

const postcssPlugins = [
  require('postcss-cssnext')(),
  require('postcss-modules-values')
];

const scssLoader = [
  { loader: 'style-loader' },
  { loader: 'css-loader' },
  { loader: 'sass-loader' }
];

const postcssLoader = [
  { loader: 'style-loader' },
  { loader: 'css-loader', options: { modules: true } },
  { loader: 'postcss-loader', options: { plugins: () => [...postcssPlugins] } }
];

 module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',

            query: {
               presets: ['es2015', 'react']
            }
         },
         {
             test: /\.(scss|sass)$/,
             loader: scssLoader,
             include: [__dirname]
           },
           { test: /\.css$/,
             loader: postcssLoader,
             include: [__dirname]
           }
      ]

   }

Answer 3

You've excluded node_modules for css-loader in your webpack.config.js. Probably you have to include those paths from node_modules you need to processed. Something like this:

{
  test: /\.css$/,
  use: 'css-loader',
  exclude: /node_modules/,
  include: [
    'node_modules/admin-lte/dist/css/skins/skin-blue.min.css',
    <place here others you need>
  ],
}

Some issues about root folder may appear, check on your system for your self.