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

Created on 30 Nov 2019 · 6Comments · Source: storybookjs/storybook

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:

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)
Add Storybook npx -p @storybook/cli sb init
Add a very simple story that uses a component that does an import of a CSS file: import './MyComponent.css'
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.

babel / webpack bug cra high priority

Source

mlmassey

👍2

Most helpful comment

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 on 30 Nov 2019

👍2

All 6 comments

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 on 30 Nov 2019

👍2

@mrmckeb this appears to be the same problem as discussed in my gist and also in https://github.com/storybookjs/presets/issues/69

shilman on 1 Dec 2019

Hi @mlmassey, we're aware that there is an issue where Storybook adds a CSS loader (and others) after the preset. @shilman and I plan to address this in the very near future.

I think I've solved this, and I'm pushing up a PR shortly.