Storybook 6 with Vue.js doesn't support optional chaining

[DavidRouyer]

Describe the bug
Storybook 6 with Vue.js doesn't support optional chaining with the zero config TypeScript.

To Reproduce
Steps to reproduce the behavior:

1. Use the https://github.com/storybookjs/storybook/tree/next/examples/vue-cli example
2. Add some code which uses optional chaining in Button.vue

const test: string | undefined = "";

if (test?.toString())
{
  console.log(test);
}

3. See the error in console

ERROR in ./src/button/Button.vue?vue&type=script&lang=ts& (./node_modules/vue-docgen-loader/lib??ref--14!./node_modules/ts-loader??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./src/button/Button.vue?vue&type=script&lang=ts&) 6:9
Module parse failed: Unexpected token (6:9)
File was processed with these loaders:
 * ./node_modules/vue-docgen-loader/lib/index.js
 * ./node_modules/vue-docgen-loader/lib/index.js
 * ./node_modules/ts-loader/index.js
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| import { Prop } from 'vue-property-decorator';
| const test = "";
> if (test?.toString()) {
|     console.log(test);
| }

Expected behavior
The code should not throw an error.

Screenshots
If applicable, add screenshots to help explain your problem.

Code snippets
If applicable, add code samples to help explain your problem.

System:
Please paste the results of npx -p @storybook/cli@next sb info here.

Additional context
The vue-cli example doesn't not work out of the box, some dependencies are missing.

You can see the reproduction here: https://github.com/DavidRouyer/storybook-vue-cli-example

I've added the missing dependencies in DavidRouyer/storybook-vue-cli-example@77a14b8

I've added the code which breaks the build in DavidRouyer/storybook-vue-cli-example@38f7ccc

[DavidRouyer]

I've found the culprit, it looks like the "target": "esnext" doesn't support optional chaining anymore :/ You have to use "target": "ES2018" for example

[shilman]

So this is a tsconfig.json configuration issue, not a storybook issue?

[DavidRouyer]

Yes 🙂

[shilman]

Cool. Closing!

[Double-Are]

@DavidRouyer Thanks David. high fives

[F0rsaken]

Actually, I don't know if changing the target property is the solution. Let's say I want to keep it as esnext or lower for browser compatybility. What should I do then?

[githubuser234]

Actually, I don't know if changing the target property is the solution. Let's say I want to keep it as esnext or lower for browser compatybility. What should I do then?

Configuring babel worked for me, see e.g. vuejs/vue-loader#1697 (comment)

[kaokei]

@githubuser234 @shilman @DavidRouyer

I just write a demo repo to reproduce the bug.

Steps as below.

step1: use vuecli to create project. vue create project

step2: use npx to init storybook. npx sb init

step3: use optional chain inside vue component

step4: npm run storybook

npm run serve and npm run build all works fine. So I think this is storybook's bug.

[foreveraloneT]

@DavidRouyer Thank you so much, you save my day 😭

[b-bika]

Changing the babel config did not work and we don't really want to downgrade the es target. Is there any other solution/workaround? 😕

[altinselimi]

I am not using esTarget at all (no Typescript) and this error still pops up ? Any help ?

[brettlyne]

In case anyone else ends up here that's

• not using Typescript
• can build fine, but get error in Storybook dev server

What worked for me was upgrading to webpack 5 in main.js

1. install @storybook/builder-webpack5 @storybook/manager-webpack5

// .storybook/main.js
module.exports = {
  core: { builder: 'webpack5' },
};