Error in postcss/css loader with create-react-app @storybook/react v5.2.6

Describe the bug When using a standard/new project created with create-react-app 3.2.0 and Storybook 5.2.6, Storybook fails to build any React component with which imports a CSS file with the following:

ERROR in ./src/HeaderLogo.css (./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./node_modules/@storybook/core/node_modules/style-loader!./node_modules/@storybook/core/node_modules/css-loader/dist/cjs.js??ref--9-1!./node_modules/postcss-loader/src??postcss!./src/HeaderLogo.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(2:1) Unknown word

To Reproduce Steps to reproduce the behavior:

1. Create a new application using create-react-app (latest was 3.2.0 when last created) and typescript configuration (I’m assuming typescript does not cause this problem)
2. Add Storybook npx -p @storybook/cli sb init
3. Add a very simple story that uses a component that does an import of a CSS file: import './MyComponent.css'
4. Build will fail

Expected behavior Build will not fail

Build Output info @storybook/react v5.2.6 info info => Loading static files from: /Users/mattmassey/work/storydemo/public . info => Loading presets info => Loading presets info => Loading custom addons config. info => Loading Webpack configuration from node_modules/react-scripts info => Removing existing JavaScript and TypeScript rules. info => Modifying Create React App rules. info => Using default Webpack setup.

[mlmassey]

The reason for this is because there is a problem with the Storybook integration with the CRA build scripts. Its inserting two CSS loader rules which are conflicting with each other. The solution is to remove one of the rules, since they are basically the same in the webpack config. A temporary work-around is to add a custom webpack.config.js in the .storybook folder that has the following:

let foundCSSRule = false;

function removeDuplicateCSSRule(rule) {
  if (!rule || !rule.test) {
    return;
  }
  if (rule.test.toString() !== '/\\.css$/') {
    return;
  }
  if (!foundCSSRule) {
    foundCSSRule = true;
    return;
  }
  return false;
}

function updateRules(oldRules) {
  const newRules = [];
  if (!oldRules || !oldRules.length) {
    return newRules;
  }
  for (let i = 0; i < oldRules.length; i++) {
    const rule = oldRules[i];
    if (rule.oneOf) {
      rule.oneOf = updateRules(rule.oneOf);
      newRules.push(rule);
    } else {
      const newRule = removeDuplicateCSSRule(oldRules[i]);
      if (newRule) {
        // If a new rule was returned, push it into the new rules list
        newRules.push(newRule);
      }
      if (newRule !== false) {
        // If any function returned false, it means remove it from the list of rules
        // Otherwise, we just use the old rule that was there previously
        newRules.push(oldRules[i]);
      }
    }
  }
  return newRules;
}

module.exports = async ({ config, mode }) => {
  console.log('*** Custom webpack running ****');
  config.module.rules = updateRules(config.module.rules);
  // Uncomment this line if you would like to view the final webpack config so you can alter it.  Useful for debugging
  // console.dir(config, { depth: null });
  return config;
};

[mlmassey]

@shilman Confirmed that 1.3.2 fixes this issue. Thanks for the quick work