1

I have a problem of creating a simple react-toolbox button story in a storybook. I want to highlight that, all my setup of react-toolbox in application itself works well. Appropriate postcss.config.js file looks like this:

const theme = require('./src/theme');

module.exports = {
  plugins: {
    'postcss-import': {
      root: __dirname
    },
   'postcss-mixins': {},
   'postcss-each': {},
   'postcss-cssnext': {
      browsers: ['last 2 versions', '> 5%'],
      features: {
        customProperties: {
          variables: theme
        }
      }
    }
  }
};

I got this error and I'm not sure which loader I'm missing in my config.

ERROR in ./~/react-toolbox/lib/button/theme.css
Module parse failed: /Users/kuko/Workspace/in2core/qtakecloud-frontend/node_modules/react-toolbox/lib/button/theme.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
    at Parser.pp$4.raise (/Users/kuko/Workspace/in2core/qtakecloud-frontend/node_modules/@kadira/storybook/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/Users/kuko/Workspace/in2core/qtakecloud-frontend/node_modules/@kadira/storybook/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/Users/kuko/Workspace/in2core/qtakecloud-frontend/node_modules/@kadira/storybook/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (/Users/kuko/Workspace/in2core/qtakecloud-frontend/node_modules/@kadira/storybook/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/Users/kuko/Workspace/in2core/qtakecloud-frontend/node_modules/@kadira/storybook/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/Users/kuko/Workspace/in2core/qtakecloud-frontend/node_modules/@kadira/storybook/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/Users/kuko/Workspace/in2core/qtakecloud-frontend/node_modules/@kadira/storybook/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/Users/kuko/Workspace/in2core/qtakecloud-frontend/node_modules/@kadira/storybook/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseExpression (/Users/kuko/Workspace/in2core/qtakecloud-frontend/node_modules/@kadira/storybook/node_modules/acorn/dist/acorn.js:1573:21)
    at Parser.pp$1.parseStatement (/Users/kuko/Workspace/in2core/qtakecloud-frontend/node_modules/@kadira/storybook/node_modules/acorn/dist/acorn.js:727:47)
 @ ./~/react-toolbox/lib/button/index.js 24:13-35
ERROR in ./~/react-toolbox/lib/ripple/theme.css
Module parse failed: /Users/kuko/Workspace/in2core/qtakecloud-frontend/node_modules/react-toolbox/lib/ripple/theme.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
    at Parser.pp$4.raise (/Users/kuko/Workspace/in2core/qtakecloud-frontend/node_modules/@kadira/storybook/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/Users/kuko/Workspace/in2core/qtakecloud-frontend/node_modules/@kadira/storybook/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/Users/kuko/Workspace/in2core/qtakecloud-frontend/node_modules/@kadira/storybook/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (/Users/kuko/Workspace/in2core/qtakecloud-frontend/node_modules/@kadira/storybook/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/Users/kuko/Workspace/in2core/qtakecloud-frontend/node_modules/@kadira/storybook/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/Users/kuko/Workspace/in2core/qtakecloud-frontend/node_modules/@kadira/storybook/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/Users/kuko/Workspace/in2core/qtakecloud-frontend/node_modules/@kadira/storybook/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/Users/kuko/Workspace/in2core/qtakecloud-frontend/node_modules/@kadira/storybook/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseExpression (/Users/kuko/Workspace/in2core/qtakecloud-frontend/node_modules/@kadira/storybook/node_modules/acorn/dist/acorn.js:1573:21)
    at Parser.pp$1.parseStatement (/Users/kuko/Workspace/in2core/qtakecloud-frontend/node_modules/@kadira/storybook/node_modules/acorn/dist/acorn.js:727:47)
 @ ./~/react-toolbox/lib/ripple/index.js 13:13-35

It looks like there is a problem with @import but why everything works correctly in my app? Is here anybody, that can help me to solve this issue?

Thanks for any advice.

Radovan Kuka
  • 1,962
  • 1
  • 17
  • 19
  • According to answer [here](https://github.com/react-toolbox/react-toolbox/issues/1430) and info [here](https://storybooks.js.org/docs/react-storybook/configurations/custom-webpack-config/), react-storybook still uses Webpack 1, which causes this issue. When I add custom webpack 1.x compatible config, everything works well. – Radovan Kuka May 12 '17 at 07:23
  • 1
    Storybook 3.0.0 now uses Webpack 2! see https://storybook.js.org/ – Norbert Jun 08 '17 at 06:44

0 Answers0