Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

State:
Created 2 years ago
Reactions:19
Comments:11 (2 by maintainers)

Top GitHub Comments

7reactions

kahea-hendrickson-vnlcommented, Aug 24, 2021

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

2reactions

bisubuscommented, Sep 16, 2021

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.

Top Results From Across the Web

Error while importing a module with optional chaining

I imported the NPM module that has been causing my grief (@vime/vue-next 5.0.31 BTW), ran the serve script and got the Unexpected token...

Changelog - Cypress Documentation

In Cypress 12, we enforce running tests in a clean browser context through test isolation. This option is configurable, but is enabled by...

Avoiding those dang cannot read property of undefined errors

The future: optional chaining operator evaluates to null or undefined , the entire expression will evaluate to undefined and the...

NativeScript 6.3, 6.4, 6.5 Releases Add Svelte, WebAssembly ...

This new parser became the default with the NativeScript 6.4 release. ... support for optional chaining and the nullish coalescing operator.

Become a ninja with Vue (free sample)

Types as in TypeScript; 5.2. Enums; 5.3. Return types; 5.4. Interfaces; 5.5. Optional arguments; 5.6. Functions as property; 5.7. Classes; 5.8. Working with...