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

Question

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

Answer 1

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
},
}

Answer 2

In tsconfig.json you have to set option useDefineForClassFields to false to make lit run properly. For more information please see
https://lit.dev/msg/class-field-shadowing .
To fully solve the issue with Storybook/Webpack I also had to do the following:
yarn add -D ts-loader#8.3.0 (version 9.x does not work with Webpack4)
[EDIT: Please check Vince's answer below ... his solution (= main.js + webpackFinal) seems to be the preferred way]
Adding the following to .storybook/webpack.config.json (not really sure why):
config.module.rules.push({
test: /\.(ts|tsx)$/,
include: path.resolve(__dirname, '../src'),
loader: require.resolve('ts-loader')
})