ES6 optional chaining syntax in svelte component throws an error

[jeongtae]

Describe the bug When I use an optional chaining syntax in the Svelte component, An error occurs. It occurs only when I run Storybook, no problem on Rollup. I expected it is related to Babel so I tried to configure Babel in several ways but all failed.

To Reproduce Steps to reproduce the behavior:

1. Execute commands below

   npx degit sveltejs/template my-app
   cd my-app
   npx sb init

2. Edit src/stories/Button.svelte

   <button
   type="button"
   class={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
   {style}
   on:click={onClick}>
   {label?.length}
   </button>

3. Run Storybook

   yarn storybook

4. See error

   
   ERROR in ./src/stories/Button.svelte 22:32
   Module parse failed: Unexpected token (22:32)
   File was processed with these loaders:
   * ./node_modules/svelte-loader/index.js
   You may need an additional loader to handle the result of these loaders.
   | function create_fragment(ctx) {
   |       let button;
   >       let t_value = /*label*/ ctx[1]?.length + "";
   |       let t;
   |       let button_class_value;
   @ ./src/stories/Button.stories.js 10:0-37 13:13-19 41:15-21
   @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
   @ ./.storybook/generated-stories-entry.js
   @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addParameter.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined
   Child HtmlWebpackCompiler:
                         Asset      Size               Chunks  Chunk Names
   __child-HtmlWebpackPlugin_0  6.19 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
   Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
   [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/dist/server/templates/index.ejs] 1.98 KiB {HtmlWebpackPlugin_0} [built]

WARN Broken build, fix the error above. WARN You may need to refresh the browser.

**System Environment**
MacBook Air, macOS 11.2.3 (M1, Apple Silicon)
Node v15.11.0 (ARM)

[shilman]

@j3rem1e I repro'd this even on the 6.2-rc (npx sb@next init). any ideas what's going on?

[j3rem1e]

It's a known issue with webpack4 : https://github.com/sveltejs/svelte-loader/issues/137 https://github.com/webpack/webpack/issues/10227#issuecomment-642734920

with yarn, there is a workaround :

"resolutions": {
    "acorn": "8.0.1"
},

[davidcalhoun]

Can confirm @j3rem1e 's workaround works when on Webpack 4, and can also confirm this issue went away entirely when opting into Webpack 5.