react-toolbox / react-toolbox-example Goto Github PK

View Code? Open in Web Editor NEW

143.0 4.0 97.0 41 KB

Example using react-toolbox

JavaScript 72.13% CSS 4.79% HTML 23.08%

react-toolbox-example's Introduction

react-toolbox-example

Getting Started

Clone this repository
Run npm install && npm start
Visit 0.0.0.0:8080 in your browser

react-toolbox-example's People

Contributors

Stargazers

Watchers

Forkers

trevorbernard nickpisacane leoxwebdev borillo nogsmpls carloscuatin tribemedia documents-tts roylee0704 michaeltrim mobiletta mgcrea mutalis handtrix arlair dxps pyrolistical jasonleibowitz trescenzi clarkbynum pietgit nelix lemoncode swaroopsm jramon ellerbrock lionep zoharliran kikobeats nickeblewis adrianriddle jayc13 ivarconr aoyel jminnick stereobooster anniehck babak2008 abovino leannezhang twaider adolgachev ming535 jzhang300 samogray dalexe davidsiaw criew dylanlott kalyaniitkgp07 olegstepura xavi160 kopasetik javisu zan-rosenthal secretmapper mehmetkursunlu oxyno-zeta vaclovasv barbaravk adamhenson kanitsharma krishnakumarsingh jeffpinkston lanceon gauthiernpn fantasydr chrisreichert53 doowonee pkane lokeswara-sane ethersage tanaphonble codeamend jacksonwildemurphy mattiasrunge velvetropes heygarrison asacco-ssense markchipman madshargreave nathandunn narvey harze bq1028 adsidera kmimu hhy5277 li-helen bobbybobby shinpei-k philipmagnusson amitdumka iq-scm bmocrypto

react-toolbox-example's Issues

Problems with rendering Dialog component

Hi guys,

I'm having trouble with using a Dialog component. The way I try to implement it is:

import { Dialog } from 'react-toolbox/lib/dialog'
import theme from './pages.styles.module.scss'

state = { active: true };

closeConfirmation = () => {
   this.setState({ active: !this.state.active });
};

actions = [
    { label: "OK", onClick: this.closeConfirmation }
];
...
<Dialog actions={this.actions}
              active={this.state.active}
              onEscKeyDown={this.closeConfirmation}
              onOverlayClick={this.closeConfirmation}
              title='Links Sent'
              theme={theme}>
              <p>An email with download links has been sent to your inbox</p>
</Dialog>

I noticed that it is in fact, being present in the DOM, but it doesn't generate relevant classes for 'overlay' element and 'backdrop'. Rest of its content seems to be just fine, with all respective CSS classes present in the DOM. What might be the cause?

I should also mention that other components like <Button /> and <Input />, used in the same way, are rendered fine.

I am using version 1.3.4.

r

Cannot start

Hi guys, I found react toolbox quite interesting so I decided to give it a try. Unfortunately I'm unable to start it. Tried node version 4.2.3 and 5.3.0 but both are stuck on npm start (npm run build is fine, deploy gives error). I'm attaching the log so you can have a look at it.
npm-debug.txt

roboto-font and material-icons

Can you please show us an example how to load roboto-font and material-icons through webpack modules without using link ref tag?

It seems there are conflict with sass-loader and toolbox-loader when bundling roboto-font and material-icons together. An example with that would be greatly appreciated.

Cannot resolve module 'style'

Hmmmm... I am using webpack for two different sections (based on the configuration of this repository) of my application (main and admin). The endpoint admin wont start because each react-toolbox component (e.g. face as showed below).

ERROR in ./~/react-toolbox/lib/time_picker/clock/face.js
Module not found: Error: Cannot resolve module 'style' in /PATH/TO/MY/PROJECT/node_modules/react-toolbox/lib/time_picker/clock
 @ ./~/react-toolbox/lib/time_picker/clock/face.js 29:13-31

The configuration looks like this:

// core/webpack/config.js
var path = require('path');
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = function generateConfig(endpoint) {
    var dirname = `${process.cwd()}/core/resource/app/${endpoint}`;

    return {
        context: dirname,
        devtool: 'inline-source-map',
        entry: [
            'webpack-hot-middleware/client',
            path.join(dirname, 'src', 'bootstrap')
        ],
        output: {
            path: path.join(dirname, '../../static/app'),
            filename: `${endpoint}.js`,
            publicPath: '/app'
        },
        plugins: [
            new webpack.HotModuleReplacementPlugin(),
            new webpack.NoErrorsPlugin(),
            new ExtractTextPlugin('react-toolbox.css', { allChunks: true })
        ],
        module: {
            loaders: [
                {
                    test: /(\.js|\.jsx)$/,
                    exclude: /(node_modules)/,
                    loader: 'babel'
                },
                {
            test: /(\.scss|\.css)$/,
            loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap!toolbox')
          }
            ]
        },
        resolve: {
            extensions: ['', '.jsx', '.scss', '.js', '.json'],
            modulesDirectories: [
                'node_modules',
                `${process.cwd()}/node_modules`
            ]
        },
        postcss: [autoprefixer]
    };
};

// core/resource/app/main/config.js
var webpack = require('../../../webpack/config');

module.exports = webpack('admin');

Any idea?

failed start script

Failed at the [email protected] start script 'cross-env NODE_ENV=development node_modules/.bin/webpack-dev-server --colors --config webpack.config.js'. in my windows 7

Remove stage-0 from required presets

This boilerplate depends on babel-preset-stage-0 -- which essentially means that projects that start off of this template will have to depend on ECMAScript features that have gained no acceptance.

No project should have a stage-0 dependency.

Hence pl;ease remove it from package.json.

Tabs not showing on react-toolbox-example

Hello. I installed the react-toolbox-example project and was able to use all the components without any problems. All of them except for the "Tabs" component.
This component simply doesn't show.
See this trivial App.js:

import React from 'react';
import { Button } from 'react-toolbox/lib/button';
//import { Tab, Tabs } from 'react-toolbox';
import { Tabs, Tab } from "react-toolbox/lib/tabs";

class App extends React.Component {
  state = {
    index: 0
  };
  setIndex = index => {
    this.setState({ index });
  };
  render() {
    return (
      <div>
        <div>[Tabs - start]</div>
        <Tabs index={this.state.index} onChange={this.setIndex}>
          <Tab label='Primary'><small>Primary content</small></Tab>
          <Tab label='Secondary' onActive={this.handleActive}><small>Secondary content</small></Tab>
          <Tab label='Third' disabled><small>Disabled content</small></Tab>
          <Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
          <Tab label='Fifth'><small>Fifth content</small></Tab>
        </Tabs>
        <div>[Tabs - end]</div>
        <Button label='Click on me!' raised primary />
      </div>
    );
  }
}

export default App;

All I get on the screen is something like:

[Tabs - start]
[Tabs - end]

   Click on me!

The Tabs and Tab objects are imported alright I think (at least they are not null). I tried to import them in 2 different ways (see code above) but the result is the same on both cases.
I want to point out the fact that any other component I tried it worked without any issues (and I tried almost all of them!)
Any ideas?
Alex

Webpack resolve modules question

When using the ExtractTextPlugin plugin to resolve all styles, won't this load stylesheets from other node module folders that are not part of react-toolbox and should thus be ignored?

extensions: ['', '.js', '.jsx', '.scss'], 
        modulesDirectories: [
            'node_modules',
            path.resolve(__dirname, './node_modules')
        ]

Ripple tag won't be removed

The ripple tag won't be removed after clicking button.
I found that the ripple tag won't be removed in my project.
But it can't be reproduced on react-toolbox web page example.
So I try it on react-toolbox-example, and it happens.
As below snapshot, I click the SuccessButton in react-toolbox-example.<span data-react-toolbox="ripple" class="theme__rippleWrapper___2AWhQ theme__rippleWrapper___2zthi"></span> tag should be removed but it won't.

Add component unit tests using Jest

I have just started using React Toolbox, and find it quite hard to write some unit tests for components using React Toolbox Components. I believe it would be really helpful if such examples were available in this repository. What do you think?

It doesn't work

When I follow the instructions, it displays an empty page in my browser and prints this to the console. I'm using node v4.4.3 on Ubuntu.

ERROR in ./app/components/style.scss
Module build failed: ModuleBuildError: Module build failed: 
  @import "./colors";
 ^
      Import directives may not be used within control directives or mixins.
      in /home/nick/Downloads/react-toolbox-example/node_modules/react-toolbox/lib/_base.scss (line 4, column 3)
    at DependenciesBlock.onModuleBuildFailed (/home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:315:19)
    at nextLoader (/home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:270:31)
    at /home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
    at context.callback (/home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:148:14)
    at Object.onRender (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/index.js:272:13)
    at /home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:906:35
    at _arrayEach (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:85:13)
    at Object.<anonymous> (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:898:17)
    at Object.callback (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:44:16)
    at options.error (/home/nick/Downloads/react-toolbox-example/node_modules/node-sass/lib/index.js:274:32)
 @ ./app/components/header.jsx 19:13-31

ERROR in ./app/style.scss
Module build failed: ModuleBuildError: Module build failed: 
  @import "./colors";
 ^
      Import directives may not be used within control directives or mixins.
      in /home/nick/Downloads/react-toolbox-example/node_modules/react-toolbox/lib/_base.scss (line 4, column 3)
    at DependenciesBlock.onModuleBuildFailed (/home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:315:19)
    at nextLoader (/home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:270:31)
    at /home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
    at context.callback (/home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:148:14)
    at Object.onRender (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/index.js:272:13)
    at /home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:906:35
    at _arrayEach (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:85:13)
    at Object.<anonymous> (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:898:17)
    at Object.callback (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:44:16)
    at options.error (/home/nick/Downloads/react-toolbox-example/node_modules/node-sass/lib/index.js:274:32)
 @ ./app/index.jsx 23:13-31

ERROR in ./~/react-toolbox/lib/button/style.scss
Module build failed: ModuleBuildError: Module build failed: 
  @import "./colors";
 ^
      Import directives may not be used within control directives or mixins.
      in /home/nick/Downloads/react-toolbox-example/node_modules/react-toolbox/lib/_base.scss (line 4, column 3)
    at DependenciesBlock.onModuleBuildFailed (/home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:315:19)
    at nextLoader (/home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:270:31)
    at /home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
    at context.callback (/home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:148:14)
    at Object.onRender (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/index.js:272:13)
    at /home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:906:35
    at _arrayEach (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:85:13)
    at Object.<anonymous> (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:898:17)
    at Object.callback (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:44:16)
    at options.error (/home/nick/Downloads/react-toolbox-example/node_modules/node-sass/lib/index.js:274:32)
 @ ./~/react-toolbox/lib/button/Button.js 39:13-31

ERROR in ./~/react-toolbox/lib/app_bar/style.scss
Module build failed: ModuleBuildError: Module build failed: 
  @import "./colors";
 ^
      Import directives may not be used within control directives or mixins.
      in /home/nick/Downloads/react-toolbox-example/node_modules/react-toolbox/lib/_base.scss (line 4, column 3)
    at DependenciesBlock.onModuleBuildFailed (/home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:315:19)
    at nextLoader (/home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:270:31)
    at /home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
    at context.callback (/home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:148:14)
    at Object.onRender (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/index.js:272:13)
    at /home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:906:35
    at _arrayEach (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:85:13)
    at Object.<anonymous> (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:898:17)
    at Object.callback (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:44:16)
    at options.error (/home/nick/Downloads/react-toolbox-example/node_modules/node-sass/lib/index.js:274:32)
 @ ./~/react-toolbox/lib/app_bar/AppBar.js 19:13-31

ERROR in ./~/react-toolbox/lib/ripple/style.scss
Module build failed: ModuleBuildError: Module build failed: 
  @import "./colors";
 ^
      Import directives may not be used within control directives or mixins.
      in /home/nick/Downloads/react-toolbox-example/node_modules/react-toolbox/lib/_base.scss (line 4, column 3)
    at DependenciesBlock.onModuleBuildFailed (/home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:315:19)
    at nextLoader (/home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:270:31)
    at /home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
    at context.callback (/home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:148:14)
    at Object.onRender (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/index.js:272:13)
    at /home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:906:35
    at _arrayEach (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:85:13)
    at Object.<anonymous> (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:898:17)
    at Object.callback (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:44:16)
    at options.error (/home/nick/Downloads/react-toolbox-example/node_modules/node-sass/lib/index.js:274:32)
 @ ./~/react-toolbox/lib/ripple/Ripple.js 35:13-31
Child extract-text-webpack-plugin:

    ERROR in ./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/sass-loader?sourceMap!./~/toolbox-loader!./app/components/style.scss
    Module build failed: 
      @import "./colors";
     ^
          Import directives may not be used within control directives or mixins.
          in /home/nick/Downloads/react-toolbox-example/node_modules/react-toolbox/lib/_base.scss (line 4, column 3)
Child extract-text-webpack-plugin:

    ERROR in ./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/sass-loader?sourceMap!./~/toolbox-loader!./app/style.scss
    Module build failed: 
      @import "./colors";
     ^
          Import directives may not be used within control directives or mixins.
          in /home/nick/Downloads/react-toolbox-example/node_modules/react-toolbox/lib/_base.scss (line 4, column 3)
Child extract-text-webpack-plugin:

    ERROR in ./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/sass-loader?sourceMap!./~/toolbox-loader!./~/react-toolbox/lib/button/style.scss
    Module build failed: 
      @import "./colors";
     ^
          Import directives may not be used within control directives or mixins.
          in /home/nick/Downloads/react-toolbox-example/node_modules/react-toolbox/lib/_base.scss (line 4, column 3)
Child extract-text-webpack-plugin:

    ERROR in ./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/sass-loader?sourceMap!./~/toolbox-loader!./~/react-toolbox/lib/app_bar/style.scss
    Module build failed: 
      @import "./colors";
     ^
          Import directives may not be used within control directives or mixins.
          in /home/nick/Downloads/react-toolbox-example/node_modules/react-toolbox/lib/_base.scss (line 4, column 3)
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 2.39 kB [rendered]
        [0] ./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/sass-loader?sourceMap!./~/toolbox-loader!./~/react-toolbox/lib/app/style.scss 884 bytes {0} [built]
        [1] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
Child extract-text-webpack-plugin:

    ERROR in ./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/sass-loader?sourceMap!./~/toolbox-loader!./~/react-toolbox/lib/ripple/style.scss
    Module build failed: 
      @import "./colors";
     ^
          Import directives may not be used within control directives or mixins.
          in /home/nick/Downloads/react-toolbox-example/node_modules/react-toolbox/lib/_base.scss (line 4, column 3)
webpack: bundle is now VALID.

It can also emit these warnings:

npm WARN optional Skipping failed optional dependency /webpack/watchpack/chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]

Webpack2 support

Would be nice to have an example with the Webpack 2 setup.

Does not work when multiple modules are exported - the generated css is blank

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
const AUTOPREFIXER_BROWSERS = [
'Android 2.3',
'Android >= 4',
'Chrome >= 35',
'Firefox >= 31',
'Explorer >= 9',
'iOS >= 7',
'Opera >= 12',
'Safari >= 7.1'
];

var debug = process.env.NODE_ENV !== "production";

module.exports = {
context: dirname,
devtool: debug ? "inline-sourcemap" : null,
entry: {
"moduleA": "./src/moduleA/index.js",
"moduleB": "./src/moduleB/index.js"
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js',
publicPath: '/'
},
resolve: {
extensions: ['', '.scss', '.css', '.js', '.json']
},
module: {
loaders: [
{
test: /(.js)|(.jsx)$/,
exclude: /(node_modules)/,
loader: 'babel',
query: {
presets: ['es2015', 'react'],
plugins: ['jsx-control-statements']
}
},
{
test: /(.scss|.css)$/,
loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name][local]___[hash:base64:5]!postcss!sass')
}
]
},
postcss: [autoprefixer({browsers: AUTOPREFIXER_BROWSERS})],
sassLoader: {
data: '@import "theme/_config.scss";',
includePaths: [path.resolve(__dirname)]
},
externals: {
'react': 'React',
'react-dom': 'ReactDOM',
'react-addons-css-transition-group': 'React.addons.CSSTransitionGroup'
},
plugins: debug ? [new ExtractTextPlugin('main.css', { allChunks: true })] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({
mangle: false, sourcemap: false, screw_ie8: true,
warnings: false
})
]
};

webpack build output is main.css 195 bytes 0, 2, 7 [emitted] moduleA, moduleB

Install fails - won't compile -- Is this project dead?

ERROR in ./~/react-toolbox/components/index.js
Module build failed: SyntaxError: Unexpected token, expected { (24:7)

  22 | export { default as ProgressBar } from './progress_bar';
  23 | export * from './radio';
> 24 | export Ripple from './ripple';
     |        ^
  25 | export { default as Slider } from './slider';
  26 | export { default as Snackbar } from './snackbar';
  27 | export { default as Switch } from './switch';

 @ ./src/frontend/index.js 5:0-61
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server react-hot-loader/patch ./src/frontend/index.js
webpack: Failed to compile.

Doesn't run on windows

Seems to be related to this issue: webpack/webpack-dev-server#155

Running npm start just results in the message webpack: wait until bundle finished and an unresponsive localhost:8080.

Red box of death.

Hello,
Im wondering if there is another way to show errors with this config (i dont want the red screen of death to show them, im fine with console)

Thanks

This is my webpack config.

const path = require('path');
const webpack = require('webpack');

const settings = {
  entry: {
    bundle: [
      "react-hot-loader/patch",
      "./src/frontend/index.js"
    ]
  },
  output: {
    filename: "[name].js",
    publicPath: "/",
    path: path.join(path.join(__dirname, 'dist'), 'js'),
    libraryTarget: "amd",
  },
  resolve: {
    //extensions: [".js", ".json", ".css"]
    extensions: ['.scss', '.css', '.js', '.json','.webpack.js', '.web.js', '.js', '.jsx']

  },
  //devtool: 'inline-source-map',
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.js?$/,
        loader: 'babel-loader',
        options: {
          presets: [
            ["es2015", { modules: false }],
            "stage-2",
            "react"
          ],
          plugins: [
            "transform-node-env-inline"
          ],
          env: {
            development: {
              plugins: ["react-hot-loader/babel"]
            }
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: true,
              sourceMap: true,
              importLoaders: 1,
              localIdentName: "[name]--[local]--[hash:base64:8]"
            }
          },
          "postcss-loader" // has separate config, see postcss.config.js nearby
        ]
      },
    ]
  },
  externals: [
      function(context, request, callback) {
          if (/^dojo/.test(request) ||
              /^dojox/.test(request) ||
              /^dijit/.test(request) ||
              /^esri/.test(request)
          ) {
              return callback(null, "amd " + request);
          }
          callback();
      }
  ],
  devServer: {
  //  contentBase: path.resolve("src/www"),
  //  publicPath: "http://localhost:8080/", // full URL is necessary for Hot Module Replacement if additional path will be added.
  /*  quiet: false,
    hot: true,
    port: 443,
    host: "127.0.0.1",

    historyApiFallback: true,
    inline: true
    */

    inline: true,
    port: 443,
    host: "127.0.0.1",
    historyApiFallback: true

  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.LoaderOptionsPlugin({
      debug: true
    }),
  ],
};

module.exports = settings;

npm start, webpack build memory usage exceeds 500MB

This is more of discussion rather than issue report.
Is there a suggested way to decrease the memory usage while the webpack is building? Just to run this example, even in NODE_ENV=production, memory usage exceeds 550MB. Once the build is complete, of course, it drops to ~25MB.
I have a problem deploying a small test app to Heroku, as they're only providing me with 512MB and build exceeds 10s while it switches over to swap space.

Please, any hint is appreciated! Great project.

TypeError: Cannot read property 'flat' of undefined

HI, looking forward to using what looks like a terrific set of components. I've been trying to get them installed in react-redux-universal-hot-example and am almost all the way there. I've got the webpack config set up and it's building all the way through with no errors, but when I view the site at local host, I'm getting this error:

TypeError: Cannot read property 'flat' of undefined
Button.render
D:\projects\rrum\node_modules\react-toolbox\lib\button\index.js:65:41

Any ideas on what might be causing this?

Cannot find react-style-proptype modules

When I run npm install, then npm start, this happens.

ERROR in ./~/react-toolbox/lib/checkbox/Checkbox.js
Module not found: Error: Can't resolve 'react-style-proptype' in '/Users/waleo/Code/ya-pack/node_modules/react-toolbox/lib/checkbox'
 @ ./~/react-toolbox/lib/checkbox/Checkbox.js 38:26-57
 @ ./~/react-toolbox/lib/checkbox/index.js
 @ ./~/react-toolbox/lib/index.js
 @ ./src/frontend/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server react-hot-loader/patch ./src/frontend/index.js

ERROR in ./~/react-toolbox/lib/checkbox/Check.js
Module not found: Error: Can't resolve 'react-style-proptype' in '/Users/waleo/Code/ya-pack/node_modules/react-toolbox/lib/checkbox'
 @ ./~/react-toolbox/lib/checkbox/Check.js 15:26-57
 @ ./~/react-toolbox/lib/checkbox/index.js
 @ ./~/react-toolbox/lib/index.js
 @ ./src/frontend/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server react-hot-loader/patch ./src/frontend/index.js

ERROR in ./~/react-toolbox/lib/slider/Slider.js
Module not found: Error: Can't resolve 'react-style-proptype' in '/Users/waleo/Code/ya-pack/node_modules/react-toolbox/lib/slider'
 @ ./~/react-toolbox/lib/slider/Slider.js 32:26-57
 @ ./~/react-toolbox/lib/slider/index.js
 @ ./~/react-toolbox/lib/index.js
 @ ./src/frontend/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server react-hot-loader/patch ./src/frontend/index.js

Minor correction needed to make it work on Windows

webpack.config.js, module.exports.sassLoader.data injects @import with backslash-delimited path on Windows. Backslashes are interpreted as escape characters by sass loader, so the path gets corrupted and loader fails.
We need to either remove path.resolve here making sure that backslashes don't appear in the path, or replace backslashes with regular slashes after path.resolve (better alternative), or duplicate backslashes (perhaps even better one)

Hot module reloading not working

App Bar fixed property doesn't work

It seems that the fixed property of the App Bar doesn't work.

I have changed line 7 of header.jsx file to

<AppBar className={style.appbar} fixed flat>

Now the App Bar overlay the content.

Best regards
Rico

npm install with Node.js v6.10.2 (npm3 v3.10.10)

I'm installing react-toolbox-example in a workspace of Cloud9.
I'm using Node.js v6.10.2 (npm3 v3.10.10). On the install I get this messages:

UNMET PEER DEPENDENCY [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ ├─┬ [email protected]
│ │ │ │ │ └── [email protected]
│ │ │ │ └── [email protected]
│ │ │ └── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ └── [email protected]
├── UNMET PEER DEPENDENCY [email protected]
├── UNMET PEER DEPENDENCY [email protected]
etc..
│ ├── [email protected]
│ ├── [email protected]
│ └── [email protected]
├── UNMET PEER DEPENDENCY redux@^3.1.0
etc..
//and continues without more UNMET messages.

And in the end I get:

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN [email protected] requires a peer of react@^0.14 || ~15.4.0 but none was installed.
npm WARN [email protected] requires a peer of react-addons-css-transition-group@^0.14.0 || ~15.4.0 but none was installed.
npm WARN [email protected] requires a peer of react-dom@^0.14.0 || ~15.4.0 but none was installed.
npm WARN [email protected] requires a peer of redux@^3.1.0 but none was installed.

Then, I start with npm start and I get:

username:~/workspace (master) $ npm start

[email protected] start /home/ubuntu/workspace
cross-env NODE_ENV=development node_modules/.bin/webpack-dev-server --colors --config webpack.config.js

Project is running at http://localhost:8080/
webpack output is served from http://localhost:8080/
Content not from webpack is served from /home/ubuntu/workspace/src/www
404s will fallback to /index.html
(node:2817) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see webpack/loader-utils#56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
Hash: 3c9493796afc42412ba3
Version: webpack 2.3.3
Time: 50931ms
Asset Size Chunks Chunk Names
bundle.js 10.1 MB 0 [emitted] [big] bundle
chunk {0} bundle.js (bundle) 3.16 MB [entry] [rendered]
[./node_modules/react-dom/index.js] .//react-dom/index.js 164 bytes {0} [built]
[./node_modules/react-hot-loader/patch.js] .//react-hot-loader/patch.js 146 bytes {0} [built]
[./node_modules/react-toolbox/lib/index.js] .//react-toolbox/lib/index.js 7.18 kB {0} [built]
[./node_modules/react/react.js] .//react/react.js 161 bytes {0} [built]
[./node_modules/strip-ansi/index.js] .//strip-ansi/index.js 379 bytes {0} [built]
[./node_modules/url/url.js] .//url/url.js 25.4 kB {0} [built]
[./node_modules/webpack-dev-server/client/index.js?http:/localhost:8080] (webpack)-dev-server/client?http://localhost:8080 8.29 kB {0} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 5.28 kB {0} [built]
[0] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server react-hot-loader/patch ./src/frontend/index.js 64 bytes {0} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.33 kB {0} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.99 kB {0} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 180 bytes {0} [built]
[./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.1 kB {0} [built]
[./src/frontend/component/App.js] ./src/frontend/component/App.js 1.02 kB {0} [built]
[./src/frontend/index.js] ./src/frontend/index.js 999 bytes {0} [built]
+ 742 hidden modules
webpack: Compiled successfully.

What it means?

Can't get to work with react-slingshot

I am trying to use react-toolbox with the react-slingshot starter kit. I installed react-toolbox and was trying to use the demo code for the Button component from the react-toolbox site and it didn't work. The buttons icons are not showing up, so I tried to update the webpack config to make it look similar to the one here. Got a whole bunch of errors. Can somebody give it a shot and let me know what needs to be done to make it work? thanks.

Using in Isomorphic Application

Hi, I'm trying to use toolbpx in isomorphic application. But have some troubles...
Here is my webpack config:

import path from 'path';
import webpack from 'webpack';
import merge from 'lodash.merge';

import ExtractTextPlugin from 'extract-text-webpack-plugin';

const DEBUG = !process.argv.includes('release');
const VERBOSE = process.argv.includes('verbose');
const WATCH = global.WATCH === undefined ? false : global.WATCH;
const AUTOPREFIXER_BROWSERS = [
  'Android 2.3',
  'Android >= 4',
  'Chrome >= 35',
  'Firefox >= 31',
  'Explorer >= 9',
  'iOS >= 7',
  'Opera >= 12',
  'Safari >= 7.1',
];
const GLOBALS = {
  'process.env.NODE_ENV': DEBUG ? '"development"' : '"production"',
  __DEV__: DEBUG,
};
const JS_LOADER = {
  test: /\.jsx?$/,
  include: [
    path.resolve(__dirname, '../node_modules/react-routing/src'),
    path.resolve(__dirname, '../src'),
  ],
  loader: 'babel-loader',
};

//
// Common configuration chunk to be used for both
// client-side (app.js) and server-side (server.js) bundles
// -----------------------------------------------------------------------------

const config = {
  output: {
    publicPath: '/',
    sourcePrefix: '  ',
  },

  cache: DEBUG,
  debug: DEBUG,

  stats: {
    colors: true,
    reasons: DEBUG,
    hash: VERBOSE,
    version: VERBOSE,
    timings: true,
    chunks: VERBOSE,
    chunkModules: VERBOSE,
    cached: VERBOSE,
    cachedAssets: VERBOSE,
  },

  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
  ],

  resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', '.scss'],
  },

  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json-loader',
      }, {
        test: /\.txt$/,
        loader: 'raw-loader',
      }, {
        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
        loader: 'url-loader?limit=10000',
      }, {
        test: /\.(eot|ttf|wav|mp3)$/,
        loader: 'file-loader',
      },
    ],
  },

  postcss: function plugins() {
    return [
      require('postcss-import')({
        onImport: files => files.forEach(this.addDependency),
      }),
      require('postcss-nested')(),
      require('postcss-cssnext')({ autoprefixer: AUTOPREFIXER_BROWSERS }),
    ];
  },
};

//
// Configuration for the client-side bundle (app.js)
// -----------------------------------------------------------------------------

const appConfig = merge({}, config, {
  entry: [
    ...(WATCH ? ['webpack-hot-middleware/client'] : []),
    './src/app.js',
  ],
  output: {
    path: path.join(__dirname, '../build/public'),
    filename: 'app.js',
  },

  // Choose a developer tool to enhance debugging
  // http://webpack.github.io/docs/configuration.html#devtool
  devtool: DEBUG ? 'cheap-module-eval-source-map' : false,
  plugins: [
    ...config.plugins,
    new ExtractTextPlugin('app.css'),
    new webpack.DefinePlugin(GLOBALS),
    ...(!DEBUG ? [
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: VERBOSE,
        },
      }),
      new webpack.optimize.AggressiveMergingPlugin(),
    ] : []),
    ...(WATCH ? [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin(),
    ] : []),
  ],
  module: {
    loaders: [
      WATCH ? {
        ...JS_LOADER,
        query: {
          // Wraps all React components into arbitrary transforms
          // https://github.com/gaearon/babel-plugin-react-transform
          plugins: ['react-transform'],
          extra: {
            'react-transform': {
              transforms: [
                {
                  transform: 'react-transform-hmr',
                  imports: ['react'],
                  locals: ['module'],
                }, {
                  transform: 'react-transform-catch-errors',
                  imports: ['react', 'redbox-react'],
                },
              ],
            },
          },
        },
      } : JS_LOADER,
      ...config.module.loaders,
      {
        test: /(\.scss|\.css)$/,
        loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap'),
      },
    ],
  },
});

//
// Configuration for the server-side bundle (server.js)
// -----------------------------------------------------------------------------

const serverConfig = merge({}, config, {
  entry: './src/server.js',
  output: {
    path: './build',
    filename: 'server.js',
    libraryTarget: 'commonjs2',
  },
  target: 'node',
  externals: [
    function filter(context, request, cb) {
      const isExternal =
        request.match(/^[a-z][a-z\/\.\-0-9]*$/i) &&
        !request.match(/^react-routing/) &&
        !context.match(/[\\/]react-routing/);
      cb(null, Boolean(isExternal));
    },
  ],
  node: {
    console: false,
    global: false,
    process: false,
    Buffer: false,
    __filename: false,
    __dirname: false,
  },
  devtool: 'source-map',
  plugins: [
    ...config.plugins,
    new webpack.DefinePlugin(GLOBALS),
    new webpack.BannerPlugin('require("source-map-support").install();',
      { raw: true, entryOnly: false }),
  ],
  module: {
    loaders: [
      JS_LOADER,
      ...config.module.loaders,
      {
        test: /(\.scss|\.css)$/,
        loader: 'css/locals?module&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap',
      },
    ],
  },
});

export default [appConfig, serverConfig];

Actually building of bundle is done without errors, but when I try to run server.js - I get error:

Error: Cannot find module './style'
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:286:25)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/some-path/node_modules/react-toolbox/lib/font_icon/index.js:15:14)
    at Module._compile (module.js:434:26)
    at Object.Module._extensions..js (module.js:452:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)

In my server.js I do not using hot-middleware.

Redundant style duplication

In webpack.config.js we have something like this:

sassLoader: {
    data: '@import "theme/_config.scss";',
    includePaths: [path.resolve(__dirname, './src/app')]
  },

The data directive here appends any styles in _config.scss in EVERY css file it processes. Additionally, if _config.scss @imports any other styles, they are also appended. This is how css-loader works -- and there is no way around it.

Please have a look at this issue:
webpack-contrib/css-loader#17

Is there a solution for this?

Webpack babel experimental class support

Webpack throws following error on React Component:

Module build failed: SyntaxError: components/dialog/index.jsx: Unexpected token (20:15)
  18 |   }
  19 |
> 20 |   closeDialog = () => {
     |                ^
  21 |     this.refs.dialog.hide();
  22 |   };
  23 |

And this is the class, basically any class using babel experimental class support,

class DialogTest extends React.Component {
  showDialog = () => {
    this.refs.dialog.show();
  };

  closeDialog = () => {
    this.refs.dialog.hide();
  };

  actions = [
    { label: "Cancel", onClick: this.closeDialog },
    { label: "Save", onClick: this.closeDialog }
  ];

  render () {
    return (
      <div>
        <Button label='Show my dialog' onClick={this.showDialog} />
        <Dialog ref='dialog' title='My awesome dialog' type='small' actions={this.actions}>
          <p>Here you can add arbitrary content. Components like Pickers are using dialogs now.</p>
        </Dialog>
      </div>
    );
  }
}

return <DialogTest />;

I don't know how to enable babel exp. features with webpack 5.x.

Can't build with cross-env - Error: spawn webpack ENOENT

Cloned repo, ran install, ran start - works fine. Ran build - get this error:

λ npm run build

> [email protected] build C:\...\react-toolbox-example
> cross-env NODE_ENV=production UV_THREADPOOL_SIZE=100 webpack --config ./webpack.config.file

events.js:141
      throw er; // Unhandled 'error' event
      ^

Error: spawn webpack ENOENT
    at exports._errnoException (util.js:837:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:178:32)
    at onErrorNT (internal/child_process.js:344:16)
    at doNTCallback2 (node.js:429:9)
    at process._tickCallback (node.js:343:17)
    at Function.Module.runMain (module.js:477:11)
    at startup (node.js:117:18)
    at node.js:951:3

npm ERR! Windows_NT 10.0.10240

So I tried to set node env manually

SET NODE_ENV=production && webpack --config ./webpack.config.file

But it didn't work or something, because the built react-toolbox.js file will still look for __webpack_hmr EventSource, so hmr appears to be still enabled.

The problem also appears in my actual project, that I used react-toolbox in. I eliminated any trace of hmr from my source files yet it still kept showing up - turns out it was from the source of react-toolbox. So how do I let it know that the "node env" is "production"?

Also tried to do it in the webpack.config.file.js file

'process.env.NODE_ENV': JSON.stringify('production')

Nothing changed.

Tried to run it and it doesn't work

Build failed
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN Error: EPERM: operation not permitted, scandir 'C:\Users\gonzarey\Desktop\react-toolbox-example\node_modules\getpass\node_modules'
npm WARN { Error: EPERM: operation not permitted, scandir 'C:\Users\gonzarey\Desktop\react-toolbox-example\node_modules\getpass\node_modules'
npm WARN errno: -4048,
npm WARN code: 'EPERM',
npm WARN syscall: 'scandir',
npm WARN path: 'C:\Users\gonzarey\Desktop\react-toolbox-example\node_modules\getpass\node_modules' }
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "i"
npm ERR! node v7.5.0
npm ERR! npm v4.1.2
npm ERR! code ELIFECYCLE

npm ERR! [email protected] postinstall: node scripts/build.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script 'node scripts/build.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the node-sass package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node scripts/build.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs node-sass
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls node-sass
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\gonzarey\Desktop\react-toolbox-example\npm-debug.log

Fails to install modules correctly

I cloned the repo, and started npm install but was met with this error message at the end of the install process.

`npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install"
npm ERR! node v6.1.0
npm ERR! npm v3.8.6
npm ERR! code ELIFECYCLE

npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\eladk\Documents\GitHub\react-toolbox-example\npm-debug.log`

I attempted to npm start but was then met with this error: Error: Cannot find module 'brace-expansion'

I installed it, and re-ran npm start and still no luck:
`ERROR in .//react-toolbox/lib/app_bar/style.scss
Module build failed: Error: Cannot find module 'node-sass'
at Function.Module._resolveFilename (module.js:438:15)
at Function.Module._load (module.js:386:25)
at Module.require (module.js:466:17)
at require (internal/module.js:20:19)
at Object. (C:\Users\eladk\Documents\GitHub\react-toolbox-example\node_modules\sass-loader\index.js:4:12)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:456:32)
at tryModuleLoad (module.js:415:12)
at Function.Module._load (module.js:407:3)
@ .//react-toolbox/lib/app_bar/AppBar.js 15:13-31

'ERROR in .//react-toolbox/lib/ripple/style.scss
Module build failed: Error: Cannot find module 'node-sass'
at Function.Module._resolveFilename (module.js:438:15)
at Function.Module._load (module.js:386:25)
at Module.require (module.js:466:17)
at require (internal/module.js:20:19)
at Object. (C:\Users\eladk\Documents\GitHub\react-toolbox-example\node_modules\sass-loader\index.js:4:12)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:456:32)
at tryModuleLoad (module.js:415:12)
at Function.Module._load (module.js:407:3)
@ .//react-toolbox/lib/ripple/Ripple.js 23:13-31`

Not able to find output file

Hi,
I got your example working, just had a question.
Where is the output stored?
It says in the config that it is in build folder, but i cannot find any build folder :/

Error on clone, install, start

After git clone, npm install, npm start...I get this error:

> [email protected] start /home/..../react-toolbox-example
> node server

..../react-toolbox-example/server.js:22
app.get('*', (req, res) => {
                         ^
SyntaxError: Unexpected token >
    at Module._compile (module.js:439:25)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)
    at startup (node.js:119:16)
    at node.js:902:3

npm ERR! Linux 3.13.0-95-generic
npm ERR! argv "node" "/usr/local/bin/npm" "start"
npm ERR! node v0.10.25
npm ERR! npm  v3.10.7
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `node server`
npm ERR! Exit status 8

Ubuntu 14.04/NPM 3.10.7

Compiling slow

Why is compiling so slow? I'm testint the react-toolbox-example on my local machine through a virtual machine, I usually compile apps there within 0,2 -2 seconds at max, same in Cloud9, but with this example, a simple change in the code takes like 130-250 seconds to finish the compile process, both in my virtual machine and in Cloud9. Other apps in Cloud9, with bundles.js with size of 2MB compiles fast, no more than 1-2seconds.

this module requires normalize.css but normalize is screwing up styling on other components.

start error?

app.get('*', (req, res) => {
^^
SyntaxError: Unexpected token =>
at exports.runInThisContext (vm.js:73:16)
at Module._compile (module.js:443:25)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Function.Module.runMain (module.js:501:10)
at startup (node.js:129:16)
at node.js:814:3

Support create-react-app

To be more precise custom-react-scripts Which adds support for SASS and CSSModules.

ModuleNotFoundError on ~normalize.css

Following the exact same instructions of the README:

Module build failed: ModuleNotFoundError: Module not found: Error: Cannot resolve module '~normalize.css'

It happens when navigating to http://0.0.0.0:8080/ and a blank page is displayed.

Small workaround to "make it work":

Node v4.5.0

Stylesheet seems to be loaded after the bundle?

When I view the page, it seems to flash with the toolbox logo (very large, black colored, on a white page background), and then after that it goes to the expected view.

Is there a way to make it load correctly on first page load?

SyntaxError cropped up

suddenly now giving an error:

ERROR in ./~/react-toolbox/components/index.js
Module build failed: SyntaxError: D:/Documents/react-toolbox-example-master/node_modules/react-toolbox/components/index.js: Unexpected token, expected { (24:7)

Steps to duplicate: exactly the same as the steps in the README.

How do I add an images folder to the build?

webpack.config.js file

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractPlugin = new ExtractTextPlugin({
  filename: 'main.css'
});
const HTMLWebpackPlugin = require('html-webpack-plugin');
const htmlplugin = new HTMLWebpackPlugin({
      template: 'src/www/index.html'
      // baseUrl: './'
    });
const settings = {
  entry: {
    bundle: [
      'react-hot-loader/patch',
      './src/frontend/index.js'
    ]
  },
  output: {
    filename: '[name].js',
    publicPath: '',
    path: path.resolve('build')
  },
  resolve: {
    extensions: ['.js', '.json', '.css']
  },
  devtool: 'eval-source-map',
  module: {
    rules: [
      {
        test: /\.html$/,
        use: ['html-loader']
      },
      {
        test: /\.js?$/,
        loader: 'babel-loader',
        options: {
          presets: [
            ['es2015', { modules: false }],
            'stage-2',
            'react'
          ],
          plugins: [
            'transform-node-env-inline'
          ],
          env: {
            development: {
              plugins: ['react-hot-loader/babel']
            }
          }
        }
      },
      {
        test: /\.sass$/,
        use: extractPlugin.extract({
          use: [{
            loader: 'css-loader',
            options: {
              minimize: true
            }
          },
          'sass-loader']
        })
      },
      {
        test: /\.(jpg|png)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'img/',
              publicPath: 'img/'
            }
          }
        ]
      },
      {
        test: /\.(css)$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
              sourceMap: true,
              importLoaders: 1,
              localIdentName: '[name]--[local]--[hash:base64:8]'
            }
          },
          'postcss-loader' // has separate config, see postcss.config.js nearby
        ]
      }
    ]
  },
  devServer: {
    contentBase: path.resolve('src/www'),
    publicPath: 'http://localhost:8080/', // full URL is necessary for Hot Module Replacement if additional path will be added.
    quiet: false,
    hot: true,
    historyApiFallback: true,
    inline: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.LoaderOptionsPlugin({
      debug: true
    }),
    htmlplugin,
    extractPlugin,
    new CleanWebpackPlugin(['build'])
  ]
};

module.exports = settings;

I have an image folder in my src....
But img folder is not getting created in my build folder and there is no error to debug
HELP!!

Webpack hot module replacement

First of all, thank you for this example. I struggled making react-toolbox work.

Is it possible to add webpack hot module replacement or another kind of auto app refresh on code change?

how to solve this issue??

ERROR in .//react-toolbox/lib/button/theme.scss
Module parse failed: C:\Users\swapnil\Desktop\reactApp\node_modules\react-toolbox\lib\button\theme.scss Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '@' (1:0)
at Parser.pp$4.raise (C:\Users\swapnil\Desktop\reactApp\node_modules\acorn\dist\acorn.js:2221:15)
at Parser.pp$7.getTokenFromCode (C:\Users\swapnil\Desktop\reactApp\node_modules\acorn\dist\acorn.js:2756:10)
at Parser.pp$7.readToken (C:\Users\swapnil\Desktop\reactApp\node_modules\acorn\dist\acorn.js:2477:17)
at Parser.pp$7.nextToken (C:\Users\swapnil\Desktop\reactApp\node_modules\acorn\dist\acorn.js:2468:15)
at Parser.parse (C:\Users\swapnil\Desktop\reactApp\node_modules\acorn\dist\acorn.js:515:10)
at Object.parse (C:\Users\swapnil\Desktop\reactApp\node_modules\acorn\dist\acorn.js:3098:39)
at Parser.parse (C:\Users\swapnil\Desktop\reactApp\node_modules\webpack\lib\Parser.js:902:15)
at DependenciesBlock. (C:\Users\swapnil\Desktop\reactApp\node_modules\webpack\lib\NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (C:\Users\swapnil\Desktop\reactApp\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
at nextLoader (C:\Users\swapnil\Desktop\reactApp\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
@ .//react-toolbox/lib/button/index.js 26:13-36

ERROR in .//react-toolbox/lib/ripple/Ripple.js
Module not found: Error: Cannot resolve module 'immutability-helper' in C:\Users\swapnil\Desktop\reactApp\node_modules\react-toolbox\lib\ripple
@ .//react-toolbox/lib/ripple/Ripple.js 23:26-56

ERROR in .//react-toolbox/lib/ripple/theme.scss
Module parse failed: C:\Users\swapnil\Desktop\reactApp\node_modules\react-toolbox\lib\ripple\theme.scss Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '@' (1:0)
at Parser.pp$4.raise (C:\Users\swapnil\Desktop\reactApp\node_modules\acorn\dist\acorn.js:2221:15)
at Parser.pp$7.getTokenFromCode (C:\Users\swapnil\Desktop\reactApp\node_modules\acorn\dist\acorn.js:2756:10)
at Parser.pp$7.readToken (C:\Users\swapnil\Desktop\reactApp\node_modules\acorn\dist\acorn.js:2477:17)
at Parser.pp$7.nextToken (C:\Users\swapnil\Desktop\reactApp\node_modules\acorn\dist\acorn.js:2468:15)
at Parser.parse (C:\Users\swapnil\Desktop\reactApp\node_modules\acorn\dist\acorn.js:515:10)
at Object.parse (C:\Users\swapnil\Desktop\reactApp\node_modules\acorn\dist\acorn.js:3098:39)
at Parser.parse (C:\Users\swapnil\Desktop\reactApp\node_modules\webpack\lib\Parser.js:902:15)
at DependenciesBlock. (C:\Users\swapnil\Desktop\reactApp\node_modules\webpack\lib\NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (C:\Users\swapnil\Desktop\reactApp\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
at nextLoader (C:\Users\swapnil\Desktop\reactApp\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
@ .//react-toolbox/lib/ripple/index.js 13:13-36
webpack: bundle is now VALID.

this example don't work in IE 11

when I use IE11 to open the index page, I will get a error Object.assign is not a function

External postcss config

Hey, thank you for putting this resource together! I'm a little confused about the postcss config in a separate file. Where is webpack picking this up? This isn't an issue, but rather a clarification question.