I am a beginner to webpack, node.js and basically to web development. I am using Redux/React/Isomorphic boilerplate . I am trying to use React-Toolbox for all the presentation components but not able to build/bundle (npm run dev) as it throws an error - "assets not found". Please help me fix this issue. I have given below all the errors/config details
Errors on running - 'npm run dev':
[2] ==> ? API is running on port 3030
[2] ==> ? Send requests to http://localhost:3030
[1] [webpack-isomorphic-tools] [error] asset not found: ./node_modules/react-toolbox/lib/ripple/style.scss
[1] [webpack-isomorphic-tools] [error] asset not found: ./node_modules/react-toolbox/lib/button/style.scss
[0] ./src/containers/Survey/Survey.js
[0]
[0] C:\Users\myusername\Documents\Dev Work\MYAPP-REDUX\src\containers\Survey\Survey.js
[0] 6:8 error "Button" is defined but never used no-unused-vars
[0]
[0] ? 1 problem (1 error, 0 warnings)
[0]
[0] ./~/css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local][hash:base64:5]!./~/autoprefixer-loader?browsers=last 2 version!./~/sass-loader?outputStyle=expanded&sourceMap!./~/react-toolbox/lib/button/s
tyle.scss
[0] Module build failed:
[0] undefined
[0] ^
[0] Import directives may not be used within control directives or mixins.
[0] in C:\Users\myusername\Documents\Dev Work\MYAPP-REDUX\node_modules\react-toolbox\lib_base.scss (line 4, column 3)
[0] Error:
[0] undefined
[0] ^
[0] Import directives may not be used within control directives or mixins.
[0] in C:\Users\myusername\Documents\Dev Work\MYAPP-REDUX\node_modules\react-toolbox\lib_base.scss (line 4, column 3)
[0] at options.error (C:\Users\myusername\Documents\Dev Work\MYAPP-REDUX\node_modules\node-sass\lib\index.js:271:32)
[0] @ ./~/react-toolbox/lib/button/style.scss 4:14-272 13:2-17:4 14:20-278
[0] ./~/css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local][hash:base64:5]!./~/autoprefixer-loader?browsers=last 2 version!./~/sass-loader?outputStyle=expanded&sourceMap!./~/react-toolbox/lib/ripple/s
tyle.scss
[0] Module build failed:
[0] undefined
[0] ^
[0] Import directives may not be used within control directives or mixins.
[0] in C:\Users\myusername\Documents\Dev Work\MYAPP-REDUX\node_modules\react-toolbox\lib_base.scss (line 4, column 3)
[0] Error:
[0] undefined
[0] ^
[0] Import directives may not be used within control directives or mixins.
[0] in C:\Users\myusername\Documents\Dev Work\MYAPP-REDUX\node_modules\react-toolbox\lib_base.scss (line 4, column 3)
[0] at options.error (C:\Users\myusername\Documents\Dev Work\MYAPP-REDUX\node_modules\node-sass\lib\index.js:271:32)
[0] @ ./~/react-toolbox/lib/ripple/style.scss 4:14-272 13:2-17:4 14:20-278
[0] [webpack-isomorphic-tools/plugin] [error] Module "./~/css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local][hash:base64:5]!./~/autoprefixer-loader?browsers=last 2 version!./~/sass-loader?outputStyle
=expanded&sourceMap!./~/react-toolbox/lib/ripple/style.scss" has no source. Maybe Webpack compilation of this module failed. Skipping this asset.
[0] [webpack-isomorphic-tools/plugin] [error] Module "./~/css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local][hash:base64:5]!./~/autoprefixer-loader?browsers=last 2 version!./~/sass-loader?outputStyle
=expanded&sourceMap!./~/react-toolbox/lib/button/style.scss" has no source. Maybe Webpack compilation of this module failed. Skipping this asset.
[0] webpack built 7d8176b687a8306c3338 in 18755ms
Survey.js:
import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import Helmet from 'react-helmet';
import {initialize} from 'redux-form';
import {SurveyForm} from 'components';
import Button from 'react-toolbox/lib/button';
.... rest of the code omitted as the above import causes this..
Webpack config:
chunkFilename: '[name]-[chunkhash].js',
publicPath: 'http://' + host + ':' + port + '/dist/'
},
module: {
loaders: [
{ test: /.jsx?$/, exclude: /node_modules/, loaders: ['babel?' + JSON.stringify(babelLoaderQuery), 'eslint-loader']},
{ test: /.json$/, loader: 'json-loader' },
{ test: /.less$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local][hash:base64:5]!autoprefixer?browsers=last 2 version!less?outputStyle=expanded&sourceMap' },
{
test: /.scss$/,
loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local][hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap',
//include: /node_modules/react-toolbox/
},
{ test: /.woff(\?v=\d+.\d+.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
{ test: /.woff2(\?v=\d+.\d+.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
{ test: /.ttf(\?v=\d+.\d+.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
{ test: /.eot(\?v=\d+.\d+.\d+)?$/, loader: "file" },
{ test: /.svg(\?v=\d+.\d+.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },
{ test: webpackIsomorphicToolsPlugin.regular_expression('images'), loader: 'url-loader?limit=10240' }
]
},
progress: true,
resolve: {
modulesDirectories: [
'src',
'node_modules',
//path.join(dirname, '../node_modules')
],
extensions: ['', '.json', '.js', '.jsx', '.scss', ]
},
plugins: [
// hot reload
new webpack.HotModuleReplacementPlugin(),
new webpack.IgnorePlugin(/webpack-stats.json$/),
new webpack.DefinePlugin({
__CLIENT: true,
SERVER: false,
DEVELOPMENT: true,
DEVTOOLS: true // <-------- DISABLE redux-devtools HERE
}),
webpackIsomorphicToolsPlugin.development()
]
};
webpack-isomorphic-tools config:
style_modules: {
include: [/^\.\/node_modules\/*/],
extensions: ['less','scss'],
filter: function(module, regex, options, log) {
if (options.development) {
// in development mode there's webpack "style-loader",
// so the module.name is not equal to module.name
return WebpackIsomorphicToolsPlugin.style_loader_filter(module, regex, options, log);
} else {
// in production mode there's no webpack "style-loader",
// so the module.name will be equal to the asset path
return regex.test(module.name);
}
},
path: function(module, options, log) {
if (options.development) {
// in development mode there's webpack "style-loader",
// so the module.name is not equal to module.name
return WebpackIsomorphicToolsPlugin.style_loader_path_extractor(module, options, log);
} else {
// in production mode there's no webpack "style-loader",
// so the module.name will be equal to the asset path
return module.name;
}
},
parser: function(module, options, log) {
if (options.development) {
return WebpackIsomorphicToolsPlugin.css_modules_loader_parser(module, options, log);
} else {
// in production mode there's Extract Text Loader which extracts CSS text away
return module.source;
}
}
