(React) Broken build caused by ref key

[sylvainDNS]

Describe the bug
ref key seems to break my storybook build.

Code snippets
When I am using this snippet :

import React from 'react'
import { Link } from 'react-router-dom'

export const List = () => (
  <ol>
    <Item>
      <Link to={'/a'}>Go to A</Link>
    </Item>
  </ol>
)

const Item = props => <li>{props.children}</li>

Build storybook command return this error : Module parse failed: Unexpected keyword 'var'

info @storybook/react v5.3.18                                                                                                                                                                                                          [0/3249]
info                                                                                                                                                                                                                                           
info clean outputDir..                                     
info => Copying prebuild dll's..
info => Building manager..                                 
info => Loading manager config..
info => Loading presets                                    
info => Loading custom manager config.
info => Compiling manager..                                
info => manager built (6.4 s)                              
info => Building preview..                                 
info => Loading preview config..
info => Loading presets                                    
info => Loading config/preview file in ".storybook".
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.
info => Compiling preview..                                
ERR! => Failed to build the preview
ERR! ./src/List.jsx 1:37
ERR! Module parse failed: Unexpected keyword 'var' (1:37)
ERR! File was processed with these loaders:
ERR!  * ./node_modules/babel-loader/lib/index.js
ERR!  * ./node_modules/eslint-loader/dist/cjs.js
ERR! You may need an additional loader to handle the result of these loaders.
ERR! > import React from"react";import{Link,var _ref=/*#__PURE__*/ /*#__PURE__*/React.createElement(Item,null,/*#__PURE__*/React.createElement(Link,{to:"/a"},"Go to A"));}from"react-router-dom";export const List=props=>/*#__PURE__*/React.createElement("ol",null,_ref,props.children);List.displayName="List";const Item=props=>/*#__PURE__*/React.createElement("li",null,props.children);Item.displayName="Item";List.__docgenInfo={description:"",methods:[],displayName:"List"};if("undefined"!=typeof STORYBOOK_REACT_CLASSES){STORYBOOK_REACT_CLASSES["src/List.jsx"]={name:"List",docgenInfo:List.__docgenInfo,path:"src/List.jsx"}}
ERR!  @ ./src/List.stories.js 2:0-37 2:93-103
ERR!  @ ./src sync \.stories\.js$
ERR!  @ ./.storybook/config.js
ERR!  @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js
(node:179436) UnhandledPromiseRejectionWarning: [object Object]
(node:179436) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:179436) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

What is really weird is that I put ref key to null in <Link /> component build works:

import React from 'react'
import { Link } from 'react-router-dom'

export const List = () => (
  <ol>
    <Item>
      <Link ref={null} to={'/a'}>
        Go to A
      </Link>
    </Item>
  </ol>
)

const Item = props => <li>{props.children}</li>

System:

  System:
    OS: Linux 5.6 Arch Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
  Binaries:
    Node: 12.16.2 - ~/.nvm/versions/node/v12.16.2/bin/node
    Yarn: 1.22.4 - /usr/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v12.16.2/bin/npm
  npmPackages:
    @storybook/addon-actions: ^5.3.18 => 5.3.18 
    @storybook/addon-knobs: ^5.3.18 => 5.3.18 
    @storybook/preset-create-react-app: ^2.1.1 => 2.1.1 
    @storybook/react: ^5.3.18 => 5.3.18
    react: ^16.8.6 => 16.8.6
    react-scripts: ^3.3.0 => 3.3.0
    react-router-dom: ^5.0.0 => 5.0.0

Additional context
I am using CRA with craco to override webpack config, but only to add some custom aliases.

[shilman]

@sylvainDNS do you have a public repro cc @ndelangen

[ndelangen]

import React from"react";import{Link,var _ref=/*#__PURE__*/ /*#__PURE__*/React

is invalid code...

Please send us a repro

or paste the output of --debug-webpack

[sylvainDNS]

Yes I will make a repo soon 😉

[shilman]

@sylvainDNS there's also this great recipe for codesandbox by @yannbf https://gist.github.com/yannbf/d7a32cfe697e71489db00bfd50e7ab5c

[stale]

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!

[ndelangen]

related to: #11060

[Pyrolistical]

should be fixed by #11086

[sylvainDNS]

Hi guys, sorry for not providing a repository.

I tested release v6.0.0-beta.23 and v6.0.0-beta.24. Beta 24 fix my issue, which introduce #11086 changes.

Thank you for your work !