How to correctly configure React-Toolbox in an isomorphic web application without "asset not found" error

Question

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;
    }
  }

Answer 1

Alright, the issue specifically seems to be that you are requiring css in your component (indirectly through React Toolbox) that is attempting to render on the server-side (which is what webpack-isomporphic-tools is handling) instead of the client, where it belongs.

You can reference this question for a potential solution: Importing CSS files in Isomorphic React Components

As you've mentioned that you're fairly new to web development, I'd would also suggest that the boilerplate here is massive overkill for early learning / experimentation (isomorphism can be tricky even for experienced developers) and something a bit simpler like https://github.com/gaearon/react-hot-boilerplate or just putting together some simple components from scratch would probably be a more comfortable starting point for learning.