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

user_10725037 0
Viewed 444

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

lit lit-html lit-element
2 Answers

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')
})
user_107250370

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