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

[auderer]

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

[shilman]

@auderer can you try with the most recent 5.2 beta? there was a babel config-related bug in 5.1.0-5.1.9 that I fixed in the 5.2 beta and plan to patch back into 5.1.10, tho I'm not sure it's related to this: https://github.com/storybookjs/storybook/pull/7573

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[gastonmorixe]

Same issue here. One day and I haven’t been able to solve it. No matter what I try, even 5.2.0-rc1 still getting optionalChaining not enabled but it is. I tried adding it from custom babelrc and webpack. None did work.

[gastonmorixe]

Forgot to add that this is preventing our company to use Storyboards sadly.

[gastonmorixe]

@shilman I have proceeded to create a sample project to reproduce this bug (or something I am not understanding how to configure). Please note I have duplicated .babelrc file in the root and .storybook folder. None work.

https://github.com/gastonmorixe/storybook-optional-chaining-error

[gastonmorixe]

I have also created a new branch to try adding the plugin by modifying storybook webpack's config and it doesn't work either.

https://github.com/gastonmorixe/storybook-optional-chaining-error/tree/webpack-way

[shilman]

@gastonmorixe I don't have time to look in detail, but I noticed that you're using CRA and the babel/webpack handling works differently in CRA than in other apps. Basically we try to use the CRA configuration as much as possible.

@mrmckeb Do you think you can help @gastonmorixe out a little bit? And if this is in fact a CRA-related issue, do you think the preset can either fix it OR at least make what's going on more explicit for cases like this?

[gastonmorixe]

Yes, that demo is using CRA and we are using it in our company too.

Thank you for your prompt response @shilman would appreciate any help.

[juddey]

Similar issue here with the babel proposal pipeline operator plugin. Following along for updates.

[gastonmorixe]

Any update @shilman @mrmckeb ? We would love to use Storybook ASAP. Thanks

[mrmckeb]

@gastonmorixe if you try the new preset for CRA, it allows you to pass in a Babel plugin - or this will be enabled in Create React App as of v3.3 I believe (waiting on TS 3.7).

[hellsan631]

Also experiencing this issue, following along as well

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[reatexpk]

Same issue

[mrmckeb]

@hellsan631 @reatexpk This is not released in Create React App yet.

As mentioned, you could try to use the new preset which allows you to specify plugins for Babel if you wish.

[bamboozila]

@hellsan631 @reatexpk This is not released in Create React App yet.

As mentioned, you could try to use the new preset which allows you to specify plugins for Babel if you wish.

Any idea why I get a "Unexpected token" on every jsx occurence while using the preset ?

Can you confirm the CRA preset won't work in its current state ?

[shilman]

@MeisterTea I am using the preset in this gist and have confirmed it works within the past 12 hours

[bamboozila]

did you get the optional chaining working ? did you override the plugins used by babel ? If so, can you show me how ?

EDIT: @mrmckeb as of now, there is no way to override the babel plugins used with craOverrides (see: https://github.com/storybookjs/presets/commit/6b400842af2880f904a0e9038e649f90917b260e ).
It only permits fileLoaderExcludes to be overrided.

Any idea ?

[shilman]

Aha, have not tried optionalChaining. Is it even possible in CRA?

[bamboozila]

Yes, it is by using craco or react app rewired

[shilman]

LOL so not really supported. craco creator @patricklafrance is also active in Storybook, so maybe he's got some thoughts 😁

[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.

[bamboozila]

@mrmckeb Thank you, it works fine !