Using a custom .babelrc in create-react-app

Describe the bug I am using customize-cra to add a specific babel plugin for development and I have also added a .babelrc in the .storybook folder which has the following:

{
  "presets": ["react-app"],
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}

The issue is it doesn’t read the babel config even though the terminal says:

But in the end it shows the following issue:

Expected behavior It should run the plugins and presets from the custom .babelrc file

System:

• OS: MacOS
• Device: Macbook
• Browser: Chrome
• Framework: React
• Version: @storybook/react: 5.0.6 react-scripts: 2.1.8

[slorber]

Hi,

If you are using CRA and you need a custom config (like a babel plugin) you can use react-app-rewired with customize-cra.

Here’s how you can add the emotion css props plugin to both CRA + Storybook.

(This is useful for Emotion because the babel macro can’t setup the emotion css pragma, so really the babel plugin is required)

Step 1

Add customize CRA + React-app-rewired

yarn add customize-cra react-app-rewired --dev

  /* ./package.json */

  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
}

Step 2: customize the CRA config:

/* ./config-overrides.js */

const {
  override,
  addBabelPreset
} = require("customize-cra");
const path = require("path");

module.exports = override(
  addBabelPreset("@emotion/babel-preset-css-prop")
);

Step 3: customize the Storybook config:

Note, you can keep using the CRA storybook preset

/* ./storybook/webpack.config.js */

module.exports = ({ config }) => {
  return require("../config-overrides")(config);
};

This way you don’t have to duplicate the config overrides, and can use the same overrides for both CRA and Storybook to keep them in sync.

[mrmckeb]

Not yet @shilman, I’m checking now to see why the release is still held up.