I am trying to use this front-end library react-icheck (a port of the icheck.js jquery plugin into react) into my react application setup with webpack 2. This is the error I get when I run npm start:
Module not found: Error: Can't resolve 'minimal/minimal@2x.png' in '_my_project_directory_\node_modules\icheck\skins'.
This is the way I import icheck components in one of my files:
require('icheck/skins/all.css');
import {Checkbox, Radio} from 'react-icheck';
minimal/minimal@2x.png is an image file referenced in the all.css I am importing. (relative path)
I have made some research over the internet and found out that it seems that the css-loader and postcss-loader break when the path is relative. Could some one point me to the right direction as to how I could solve this problem? Here I dump the content of my webpack file:
var webpack = require('webpack');
var path = require('path');
var resolve = path.resolve;
// variables
var isProduction = process.argv.indexOf('-p') >= 0;
var sourcePath = path.join(__dirname, './src');
var outPath = path.join(__dirname, './dist');
// plugins
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
context: sourcePath,
entry: {
main: './index.tsx',
vendor: [
'react',
'react-dom',
'react-redux',
'react-router',
'redux'
]
},
output: {
path: outPath,
publicPath: '/',
filename: 'bundle.js',
},
devtool: 'inline-source-map',
target: 'web',
resolve: {
extensions: ['.js', '.ts', '.tsx'],
// Fix webpack's default behavior to not load packages with jsnext:main module
// https://github.com/Microsoft/TypeScript/issues/11677
mainFields: ['main']
},
module: {
loaders: [
// .ts, .tsx
{
test: /\.tsx?$/,
use: isProduction
? 'awesome-typescript-loader?module=es6'
: [
//'react-hot-loader',
'awesome-typescript-loader'
]
},
// .jsx
{
test: /\.js$/,
loaders: ['react-hot-loader', 'babel-loader'],
include: sourcePath
},
// css
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
query: {
modules: true,
sourceMap: !isProduction,
importLoaders: 1,
localIdentName: '[local]__[hash:base64:5]'
}
},
{
loader: 'postcss-loader'
}
]
})
},
// static assets
{ test: /\.html$/, use: 'html-loader' },
{ test: /\.png$/, use: 'url-loader?limit=10000' },
{ test: /\.jpg$/, use: 'file-loader' },
],
},
plugins: [
new webpack.LoaderOptionsPlugin({
options: {
context: sourcePath,
postcss: [
require('postcss-import')({ addDependencyTo: webpack }),
require('postcss-url')(),
require('postcss-cssnext')(),
require('postcss-reporter')(),
require('postcss-browser-reporter')({ disabled: isProduction }),
]
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor.bundle.js',
minChunks: Infinity
}),
new webpack.optimize.AggressiveMergingPlugin(),
new ExtractTextPlugin({
filename: 'styles.css',
disable: !isProduction
}),
new HtmlWebpackPlugin({
template: 'index.html'
})
],
devServer: {
contentBase: sourcePath,
hot: true,
stats: {
warnings: false
},
},
node: {
// workaround for webpack-dev-server issue
// https://github.com/webpack/webpack-dev-server/issues/60#issuecomment-103411179
fs: 'empty',
net: 'empty'
}
};
