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

3. 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 :
sveltejs/svelte-loader#137
webpack/webpack#10227 (comment)

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.