Vue | Svelte: can't parse optional chaining operator when using TypeScript

[Lehoczky]

Describe the bug When using optional chaning inside a vue component, storybook gives the following error:

Module parse failed: Unexpected token (6:23)
File was processed with these loaders:
 * ./node_modules/vue-docgen-loader/lib/index.js
 * ./node_modules/vue-docgen-loader/lib/index.js
 * ./node_modules/@storybook/vue/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.
|     created() {
|         const someObject = { a: 1 };
>         if (someObject?.b) {
|         }
|     }

To Reproduce I created a small example at https://github.com/Lehoczky/storybook-bug-repro When I try to run storybook with npm run storybook i got the above error. Meanwhile the app runs fine with npm run serve.

System

  System:
    OS: Windows 10 10.0.19043
    CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz
  Binaries:
    Node: 14.7.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.7 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 92.0.4515.107
    Edge: Spartan (44.19041.1023.0), Chromium (92.0.902.55)
  npmPackages:
    @storybook/addon-actions: ^6.3.6 => 6.3.6
    @storybook/addon-essentials: ^6.3.6 => 6.3.6
    @storybook/addon-links: ^6.3.6 => 6.3.6
    @storybook/vue: ^6.3.6 => 6.3.6

[j-a-m-l]

I can confirm the problem occurs.

[bleucitron]

Having the same issue with Svelte.

[kahea-hendrickson-vnl]

I get this error when my tsconfig target is "esnext". When my target is "es2019" there is no error.

[iamswain25]

I get this error when my tsconfig target is "esnext". When my target is "es2019" there is no error.

this one helps!

[bisubus]

It's the same for Vue 3 setup:

@storybook/vue3: 6.4.0-alpha.33 @vue/cli: 4.5.13 babel-loader: 8.2.2 vue-loader: 16.5.0

I assume these are Storybook's own deps that matter. Is there an explanation why this happens? I was under impression that in Storybook webpack config ts-loader is backed by babel-loader which is configured to transform optional chainings.

[gyurielf]

I get this error when my tsconfig target is "esnext". When my target is "es2019" there is no error.

Man, you saved my life :D. Thy!

[b-bika]

Does anyone know about a workaround other than downgrading the es target? :pray:

[The-Code-Monkey]

This one is still happening sporadically on 6.5 beta

[hajimeni]

I found workaround on this page. https://stackoverflow.com/questions/60577517/storybook-config-in-typescript

It is working in my environment.

• npm install --save-dev ts-node
• add .storybook/tsconfig.json

  {
    "extends": "..",
    "compilerOptions": {
      "target": "es2018",
      "module": "esnext"
    }
  }

• change package.json

  "scripts": {
      ...
      "storybook": "TS_NODE_PROJECT=./.storybook/tsconfig.json start-storybook -p 6006",
      ...
  }

• run npm run storybook

[balazsbohonyi]

I tried out @hajimeni's proposed solution but it wasn't working. I've got the following error:

'TS_NODE_PROJECT' is not recognized as an internal or external command,
operable program or batch file.

To fix it I've had to install cross-env too and then change package.json too:

• install cross-env:

npm install cross-env --save-dev

• change package.json

"scripts": {
    ...
    "storybook": "cross-env TS_NODE_PROJECT=./.storybook/tsconfig.json start-storybook -p 6006",
    ...
}

[hajimeni]

Another workaround. I have successfully activated storybook with the project presented in this issue. https://github.com/Lehoczky/storybook-bug-repro

• clone project.
• install @storybook/preset-typescript
  • npm install --save-dev @storybook/preset-typescript
• change main.js

const path = require('path');

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    {
      name: '@storybook/preset-typescript',
      options: {
        forkTsCheckerWebpackPluginOptions: {
          tsconfig: path.resolve(__dirname, './tsconfig.json')
        }
      }
    }
  ]
}

• add .storybook/tsconfig.json

  {
  "extends": "..",
  "compilerOptions": {
  "target": "es2018",
  "module": "esnext"
  }
  }

• run storybook
  • npm run storybook

[shilman]

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid. Please open a new issue referencing this one if:

• this is still a problem in SB 7.x
• you can provide a consistent reproduction in 7.x (at https://storybook.new/ or per repro docs).