React-toolbox: Module build failed: Error: composition is only allowed when selector is single :local class name not in ".raised", ".raised" is weird

[burakuluu]

Hi,

I tried to use react-toolbox but this error keeps showing after all the solutions that I've found. I finally decided to ask here.

Error is;

Module build failed: Error: composition is only allowed when selector is single :local class name not in ".raised", ".raised" is weird

My postcss.config.js file looks like;

module.exports = {
  plugins: [
    require('postcss-smart-import')({ /* ...options */ }),
    require('precss')({ /* ...options */ }),
    require('autoprefixer')({ /* ...options */ })
  ]
}

In my .js file, I imported some react-toolbox modules;

import AppBar from 'react-toolbox/lib/app_bar';
import Navigation from 'react-toolbox/lib/navigation';

And also my webpack.config.dev.js and webpack.config.prod.js look like;

var webpack = require('webpack');
var loaders = require('./webpack.loaders');
var path = require('path');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: 'inline-sourcemap',
  entry: {
    app: "./app.js",
    vendor: [
      'axios',
      'react',
      'react-dom',
      'react-grid-layout',
      'react-bootstrap',
      'react-redux',
      'react-router',
      'redux',
      'redux-logger',
      'redux-thunk'
    ]
  },
  resolve: {
    root: path.resolve(__dirname),
    alias: {
      'dashboard-app/config': 'src/config',
      'dashboard-app/utils': 'src/utils',
      'dashboard-app/auth': 'src/modules/auth',
      'dashboard-app/dashboard-view': 'src/modules/dashboard-view',
      'dashboard-app/header': 'src/modules/header',
      'dashboard-app/widgets-container': 'src/modules/widgets-container',
      'dashboard-app/assets': 'src/assets',
    },
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: ['babel-loader'],
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
        }
      },
      {
        test: /\.css$/,
        loader: 'style!css!postcss'
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: "file"
      },
      {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?prefix=font/&limit=5000"
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=application/octet-stream"
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=image/svg+xml"
      },
      {
        test: /\.gif/,
        loader: "file?name=./images/[sha512:hash:base64:7].[ext]"
      },
      {
        test: /\.jpg/,
        loader: "file?name=./images/[sha512:hash:base64:7].[ext]"
      },
      {
        test: /\.png/,
        loader: "file?name=./images/[sha512:hash:base64:7].[ext]"
      }
    ]
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: "/[name]-[hash].js"
  },
  plugins: [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.CommonsChunkPlugin("vendor", "/[name]-[hash].js"),
    new HtmlWebpackPlugin({
      template: __dirname + "/src/index.tmpl.html"
    }),
  ],
};

[burakuluu]

My problem has been solved by utilizing these solutions;

npm install postcss-loader --save-dev
npm install postcss --save
npm install postcss-cssnext --save

Configure webpack 1.x loader for .css files to use postcss:

      {
        test: /\.css$/,
        loaders: [
          'style-loader',
          'css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss?sourceMap&sourceComments',
        ],
      },

[yarnball]

I'm also having this problem. Is this the only solution? Has not worked for me. Your webpack code gives me an error

[Karivool]

I just wanted to say thank you for posting this solution @burakuluu - this helped me finally compile webpack after so many other failed solutions.