CODEWITHSUNDEEP
javascriptreactjswebpackwebpack-2
Serenity
Serenity

Reputation: 4054

Error in CSS font loader when using webpack 2.2.0

I want to shift webpack to v2.2.0. I did some changes in cofig. Before there were no any error while bundling but right now i am getting tons of error but all on slick-carousel, i guess. I could not find out the reason of the error.

Here is the screenshot attached

enter image description here

enter image description here

Here is my webpack config

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

const VENDOR_LIBS = [
  'react', 'lodash', 'axios', 'base-64', 'leaflet', 'leaflet-routing-machine',
  'moment', 'react-bootstrap', 'react-dates', 'react-dom', 'react-geosuggest',
  'react-google-places-suggest', 'react-input-range', 'react-intl', 'react-leaflet',
  'react-masonry-component', 'react-redux', 'react-router', 'react-router-redux',
  'react-slick', 'redux', 'redux-form', 'redux-thunk', 'slick-carousel'
];

const config = {
  entry: {
    bundle: './src/index.js',
    vendor: VENDOR_LIBS,
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js',
  },
  module: {
    rules: [
      {
        loader: ExtractTextPlugin.extract({
          loader: 'css-loader'
        }),
        test: /\.css$/,
      },
      {
        use: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/,
      },
      {
        use: [
          {
            loader: 'url-loader',
            options: { limit: 40000 }
          },
          'image-webpack-loader'
        ],
        test: /\.(jpe?g|png|gif|svg)$/,
      },
      {
        test: /masonry|imagesloaded|fizzy\-ui\-utils|desandro\-|outlayer|get\-size|doc\-ready|eventie|eventemitter/, // eslint-disable-line
        loader: 'imports-loader?define=>false&this=>window'
    }
    ],
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'manifest']
    }),
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }),
    new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    }),
    new ExtractTextPlugin('style.css'),
  ],
};

if (process.env.NODE_ENV === 'production') {
    config.plugins.push(
        new webpack.optimize.UglifyJsPlugin()
    );
}

module.exports = config;

package.json

"dependencies": {
    "axios": "^0.15.2",
    "base-64": "^0.1.0",
    "leaflet": "^1.0.2",
    "leaflet-routing-machine": "^3.2.4",
    "lodash": "^4.17.2",
    "moment": "^2.16.0",
    "react": "^15.4.0",
    "react-bootstrap": "^0.30.6",
    "react-dates": "^4.0.1",
    "react-dom": "^15.4.0",
    "react-geosuggest": "^2.0.0",
    "react-google-places-suggest": "^1.0.1",
    "react-input-range": "^0.9.3",
    "react-intl": "^2.1.5",
    "react-leaflet": "^1.0.1",
    "react-masonry-component": "^4.3.1",
    "react-redux": "^4.4.6",
    "react-router": "^3.0.0",
    "react-router-redux": "^4.0.7",
    "react-slick": "^0.14.5",
    "redux": "^3.6.0",
    "redux-form": "^6.2.0",
    "redux-thunk": "^2.1.0",
    "slick-carousel": "^1.6.0"
  },
  "devDependencies": {
    "babel-core": "^6.18.2",
    "babel-eslint": "^7.1.0",
    "babel-loader": "^6.2.7",
    "babel-plugin-react-intl": "^2.2.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-2": "^6.18.0",
    "css-loader": "^0.26.1",
    "eslint": "^3.10.2",
    "eslint-config-rallycoding": "^3.1.0",
    "file-loader": "^0.9.0",
    "imports-loader": "^0.6.5",
    "react-addons-shallow-compare": "^15.4.0",
    "extract-text-webpack-plugin": "2.0.0-beta.4",
    "html-webpack-plugin": "^2.26.0",
    "image-webpack-loader": "^3.1.0",
    "webpack": "2.2.0-rc.0",
    "webpack-dev-server": "2.2.0-rc.0",
    "react-hot-loader": "^3.0.0-beta.6",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7"
  }

index.html

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        {# <link rel="stylesheet" type="text/css" href="./assets/css/main.css">#}
        <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.css">
        <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDclCH64TYf07E67k6dKHyrY573Yt35g9s&libraries=places"></script>
    </head>
    <body>
        <div class="app"></div>
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
        {# <script src="./app.js"></script>#} htmlwebpack plugin will do it
    </body>
</html>

update

i had to remove these lines to make it work 

// import 'slick-carousel/slick/slick.css';
// import 'slick-carousel/slick/slick-theme.css';

Upvotes: 3

Views: 883

Answers (1)

Nishanth Matha
Nishanth Matha

Reputation: 6081

Just try add the following loader to your config inside the module:

{ test: /\.(png|woff|woff2|eot|ttf|svg)$/ ,
  loader: 'url-loader?limit=100000' 
}

Upvotes: 2

Related Questions