React-Toolbox Theme error

Question

I copied the basic button implementation from the react-toolbox website and it seems to give an error in the react-toolbox theme. Please see the screenshot for the error.

My index.js file

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'react-toolbox/lib/button';

ReactDOM.render(
        <Button label="Hello World!" />,
        document.getElementById('app')
);

My webpack.config.js file

var HTMLWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
 template: __dirname + '/app/index.html', 
 filename: 'index.html',
 inject: 'body'
});

module.exports = {

 entry: __dirname + '/app/index.js',
 module: {
  loaders: [
   {
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader'
   }
  ]
 },
 output: {
  filename: 'transformed.js',
  path: __dirname+'/build'
 },
 plugins: [HTMLWebpackPluginConfig]
};

and the package.json file

    {
  "name": "react2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-toolbox": "^2.0.0-beta.7"
  },
  "devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.2",
    "babel-preset-react": "^6.23.0",
    "html-webpack-plugin": "^2.28.0",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  }
}

This is the error screenshot

Am i missing something? Because all the website says is npm install --save react-toolbox, nothing more.

Note - npm build runs fine. npm start gives the error.

Please guide :)

score 0 · Answer 1 · answered Apr 21 '17 at 05:13

From react-toolbox documentation

React Toolbox uses CSS Modules by default to import stylesheets written using PostCSS/cssnext features. In case you want to import the components already bundled with CSS, your module bundler should be able to require these PostCSS modules.

Your webpack config file doesn't have any loaders/rules to handle postCSS files. Check the below webpack config file.

webpack.config.js

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

module.exports = {
  devtool: 'inline-source-map',
  entry: path.join(__dirname, 'app/index.js'),
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'transformed.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: ['css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]_[local]_[hash:base64:5]!postcss-loader']
        })
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          use: ['css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader', 'sass-loader']
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('styles.css'),
    new HtmlWebpackPlugin({
      template: 'app/index.html'
    })
  ]
};

You can remove the sass-loader rule if you are not using Sass.

along with this, you need to have one more config file at root level(same level as webpack.config.js).

postcss.config.js

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-cssnext': {
      browsers: ['last 2 versions', '> 5%']
    },
  },
};

Note: make sure you have all the packages mentioned above are installed

React-Toolbox Theme error

1 Answers1