Support for the experimental syntax 'optionalChaining' isn't currently enabled

When trying to run storybook using @babel/plugin-proposal-optional-chaining, I get this error: Support for the experimental syntax 'optionalChaining' isn't currently enabled

However, I have the plugin installed and set up in my .storybook/.babelrc… A different plugin, babel-plugin-root-import is working great, but for some reason its acting like I don’t have the optional chaining plugin in babelrc.

Error:

ERROR in ./src/gamepad/with-gamepad.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/omitted/code/omitted/omitted/src/gamepad/with-gamepad.jsx: Support for the experimental syntax 'optionalChaining' isn't currently enabled (15:24):

  13 |           switch (button) {
  14 |             case 'A':
> 15 |               onButtonA?.()
     |                        ^
  16 |               break
  17 |             case 'B':
  18 |               onButtonB?.()

Add @babel/plugin-proposal-optional-chaining (https://git.io/vb4Sk) to the 'plugins' section of your Babel config to enable transformation

package.json:

{
  "name": "walmart-gaming",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^3.5.0",
    "@use-it/event-listener": "^0.1.3",
    "connected-react-router": "^6.3.1",
    "history": "^4.7.2",
    "immutable": "^4.0.0-rc.12",
    "jwt-decode": "^2.2.0",
    "keymirror": "^0.1.1",
    "lodash": "^4.17.11",
    "memoize-one": "^5.0.4",
    "react": "^16.8.3",
    "react-cookie": "^3.0.8",
    "react-device-detect": "^1.6.2",
    "react-dom": "^16.8.3",
    "react-hanger": "^2.0.0",
    "react-icons": "^3.5.0",
    "react-modal": "^3.8.1",
    "react-redux": "^7.1.0",
    "react-router-dom": "^4.4.0-beta.7",
    "react-scripts": "2.1.5",
    "react-simple-keyboard": "^1.21.6",
    "react-transition-group": "^2.6.0",
    "rebass": "^3.1.1",
    "redux": "^4.0.1",
    "redux-actions": "^2.6.5",
    "redux-saga": "^1.0.2",
    "styled-components": "^5.0.0-beta.5",
    "styled-system": "^5.0.6"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject",
    "storybook": "start-storybook -p 9009 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@babel/plugin-proposal-optional-chaining": "^7.2.0",
    "@storybook/addon-actions": "^5.1.9",
    "@storybook/addon-links": "^5.1.9",
    "@storybook/addons": "^5.1.9",
    "@storybook/react": "^5.1.9",
    "babel-plugin-root-import": "^6.1.0",
    "babel-plugin-styled-components": "^1.10.0",
    "directory-named-webpack-plugin": "^4.0.1",
    "eslint-plugin-babel": "^5.3.0",
    "eslint-plugin-react-hooks": "^1.6.0",
    "html-webpack-plugin": "^3.2.0",
    "jest-directory-named-resolver": "^0.3.0"
  }
}

.storybook/.babelrc

{
  "plugins": [
    [
      "babel-plugin-root-import",
      {
        "rootPathSuffix": "src"
      }
    ],
    "babel-plugin-styled-components",
    "@babel/plugin-proposal-optional-chaining"
  ]
}

.storybook/webpack.config.js

const DirectoryNamedWebpackPlugin = require('directory-named-webpack-plugin')

module.exports = async ({ config, mode }) => {
  config.resolve.plugins = [
    ...(config.resolve.plugins || []),
    new DirectoryNamedWebpackPlugin(true)
  ]

  return config
}

System:

• OS: MacOS
• Device: Macbook Pro
• Browser: chrome
• Framework: react
• Version: 5.1.9

[mrmckeb]

@MeisterTea if you use the new preset for CRA, it allows you to use Babel plugins, like in this (empty) example.

https://github.com/storybookjs/presets/blob/master/examples/cra/.storybook/.babelrc

Please let me know if this isn’t working for you! The CRA release is late, but this is in 3.3, which has been due any day now for a few weeks.

[reatexpk]

Same issue