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

[mulyoved]

Followed instructions from

Used "Create react app"

using

• "react-scripts": "0.9.3"

Added

• "react-toolbox": "^2.0.0-beta.6"
• "react-toolbox-themr": "^1.0.2"

Added script

• "toolbox": "react-toolbox-themr",

npm run toolbox

confirmed created correctly

Edit App.js

Add ThemeProvider

Run

npm run start

Get Error

Failed to compile.

Error in ./~/react-toolbox/lib/button/theme.css
Module build failed: Error: composition is only allowed when selector is single :local class name not in ".raised", ".raised" is weird
    at Array.map (native)
 @ ./~/react-toolbox/lib/button/theme.css 4:14-116 13:2-17:4 14:20-122

See full repository that duplicates the problem https://github.com/mulyoved/toolbox-sample

[webdevdaemon]

I also have this problem, under almost identical circumstances.

[djolf]

same problem here. just adding a simple Button from docs example after using create-react-app, and getting this error.

[metastew]

+1 Did a create-react-app command and then followed the docs to add a button.

[RomanHotsiy]

This helped me out: #1054 (comment)

[gmeans]

I can get around the error by importing the raw component.

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

However the problem I have now is no styles are applied to the button. I have the ThemeProvider configured w/ the generated theme.js from toolbox, and it wraps the global App component.

import React from 'react';
import Shell from './ShellToolbox';
import './assets/toolbox/theme.css';
import theme from './assets/toolbox/theme';
import ThemeProvider from 'react-toolbox/lib/ThemeProvider';

const App = () => (
    <ThemeProvider theme={theme}>
        <Shell/>
    </ThemeProvider>
);

export default App;

Then I have a simple component as a test:

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

const Shell = () => (
    <Button label="Hello World!"/>
);

export default Shell;

The button renders w/ no styles, but if clicked the ripple effect shows. I'm guessing the ThemeProvider isn't providing the theme.

This may need to be another issue, but I've followed the same path as @mulyoved

[gmeans]

Ok I got this to work. All that was necessary was to change my import to be:

import Button from 'react-toolbox/lib/button/Button';

The initial error as reported by @mulyoved was caused by importing per the docs:

import { AppBar } from 'react-toolbox/lib/app_bar';

This imports a bundled module and includes CSS modules that don't play nice w/ create-react-app. Importing the default export directly from the module file includes the theme but not the CSS modules.

My issue was caused by following the Raw Component import instructions in the README:

https://github.com/react-toolbox/react-toolbox#raw-component

This imports the component minus any theme functionality. I think the docs could be clearer on this so I'll create another issue.

[mulyoved]

Update the sample commit

code now look like that

import './toolbox/theme.css';
import theme from './toolbox/theme';
import ThemeProvider from 'react-toolbox/lib/ThemeProvider';

import {Button, IconButton} from 'react-toolbox/lib/button/Button';

No build error, so this is progress

But button without style (also can see the ripple effect)

[gmeans]

@mulyoved remove the brackets, those pull in the named export which doesn't have theming.

import Button from 'react-toolbox/lib/button/Button

Here's the relevant source from the component:

const Button = factory(rippleFactory({ centered: false }), InjectFontIcon);
export default themr(BUTTON)(Button);
export { factory as buttonFactory };
export { Button };

You can see how only the default export from the component file has the theme functionality. If you use the {} you end up pulling that named Button export which is just the factory w/ ripple.

[mulyoved]

Thanks, this does fix the problem, update the sample

as #1288 is open closing this for now

[yarnball]

I'm still having an issue here.
With
import { Button } from 'react-toolbox/lib/button'; I just see the ripple affect only on the button.

Using
import Button from 'react-toolbox/lib/button/Button'; I see no affect/theme on the button at all.

I followed the instructions on setting up postcss/webpack. Any ideas?

[juancancela]

Considering that theres some many people still having issues with this, maybe it would make sense to reopen it? :)

[akhnaz]

I also have the same problem. I am using mozilla/neutrino for the setup.

[drusepth]

Still seeing this problem following the documentation from a create-react-app skeleton.

[codeuniquely]

Yes had the same issue following the docs, can you either FIX the code to match the docs or UPDATE the docs to match the code ....

When you import as suggested (see below) in this issue - it has no errors, BUT no styles ...

import Button from 'react-toolbox/lib/button/Button'


Similar issues with all components

import { RadioGroup, RadioButton } from 'react-toolbox/lib/radio';

ERROR in ./node_modules/css-loader!./node_modules/react-toolbox/lib/radio/theme.css
    Module build failed: Error: composition is only allowed when selector is single :local class name not in ".radioChecked", ".radioChecked" is weird

and so on ....

[gbiryukov]

Finally I found solution.

In my case webpack was configured to use css-modules only for src folder of my app. Since React Toolbox located inside node_modules directory, post-css loader was applied to source that doesn't handled by css-modules.
This is common approach because most of npm packages ships with compiled css so there is no reason to apply css-modules for them.

So I just added react-toolbox into app styles pipeline and all stuff start working as expected in docs.

// App styles
{
  test: /\.css$/,
  include: [
    path.join(__dirname, 'src'),
+   path.join(__dirname, 'node_modules/react-toolbox'),
  ],
  use: [
    ...,
    {
      loader: 'css-loader',
      options: {
        modules: true,
        ...
      },
    },
    ...
  ],
},
// Vendor styles should not be processed by css-modules
{
  test: /\.css$/,
  include: [path.join(__dirname, 'node_modules')],
+ exclude: [path.join(__dirname, 'node_modules/react-toolbox')],
  use: [
    ...,
    {
      loader: 'css-loader',
      options: {
        modules: false,
        ...
      },
    },
    ...
  ],
},

Also be noticed that latest css-loader depends on fresh postcss-modules-scope release that incompatible with postcss@5 (used by react-toolbox 2 beta). To be sure that your project uses compatible version you have to explicitly install postcss-modules-scope@1.0.2

[Remixt]

@gbiryukov Where is that file located? I don't see any App styles file to modify.

[gbiryukov]

@Remixt it is webpack config, not styles file. Usually it is located in project root and has name webpack.config.js or webpack.config.babel.js

[distractdiverge]

I know this is an old issue, but I though I'd post my solution here as well.

Using the latest create-react-app and ejecting the app, I had to change my config that loads the css
to include the modules: true option.

{
  test: /\.css$/,
  use: [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: {
        importLoaders: 1,
+       modules: true,
      },
    },
  ],
},

[mazunind]

Tried all of the above methods. The one @alexlapinski proposed helped me get some of styles and animations, but it still doesn't load all of them