Lit components do not automatically request an update on property change (problem only in my storybook)

This is really odd: I'm using lit in a storybook (using @storybook/html). I do not know why, but in my environment lit does not update the component automatically when a property has been changed. If I call requestUpdate explicitly, it is indeed updating. This happens with every component, even this very simple demo component (shows 'waiting...' first, and after 3 seconds it should show 'done') ... working obviously in this codesandbox ... but not working in my storybook :-( https://codesandbox.io/s/weathered-river-087wz?file=/src/index.ts

Is there by any change anybody who might have an idea what could be the reason for this strange issue? TYVMIA

[EDIT]: This might be the reason: https://lit.dev/msg/class-field-shadowing You should use "useDefineForClassFields": false in tsconfig.json. Actually I indeed had set it to true, but after changing to false I still have the above issue.

PS: I'm using the latest versions of lit (2.1.1) and storybook (6.4.13)

PPS: Removing directory node_modules and file yarn.lock and running yarn install did not solve the problem

Solution

I'm unable to edit Natacha response,

I have the same issue and the following fixed my issue

In tsconfig.json add "useDefineForClassFields": false, in compilerOptions
yarn add -D ts-loader@8.3.0
Add the following to .storybook/main.js:

const path = require('path')

module.exports = {
  //...
  webpackFinal: async (config) => {
    //...
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      include: path.resolve(__dirname, '../src'),
      loader: require.resolve('ts-loader'),
    })

    return config
  },
}