2

这真的很奇怪：我lit在故事书中使用（使用@storybook/html）。我不知道为什么，但是在我的环境lit中，当属性更改时不会自动更新组件。如果我requestUpdate明确调用，它确实在更新。每个组件都会发生这种情况，即使是这个非常简单的演示组件（首先显示“等待...”，然后 3 秒后应该显示“完成”）......在这个代码框中显然可以工作......但在我的故事书中没有工作:-( https://codesandbox.io/s/weathered-river-087wz?file=/src/index.ts

是否有任何人可能知道这个奇怪问题的原因是什么？特维米亚

[编辑]：这可能是原因： https ://lit.dev/msg/class-field-shadowing 您应该"useDefineForClassFields": false在 tsconfig.json 中使用。实际上我确实已经将它设置为true，但是在更改为之后false我仍然有上述问题。

PS：我正在使用最新版本的 lit (2.1.1) 和 storybook (6.4.13)

PPS：删除目录node_modules和文件yarn.lock并运行yarn install并没有解决问题

4

2 回答 2

1

在tsconfig.json您必须设置选项useDefineForClassFields才能false正确lit运行。有关更多信息，请参阅 https://lit.dev/msg/class-field-shadowing。

为了完全解决 Storybook/Webpack 的问题，我还必须执行以下操作：

  • yarn add -D ts-loader@8.3.0（9.x 版不适用于 Webpack4）

  • [编辑：请检查下面文斯的答案......他的解决方案（= main.js + webpackFinal）似乎是首选方式]

    添加以下内容.storybook/webpack.config.json（不确定为什么）：

    config.module.rules.push({
   test: /\.(ts|tsx)$/,
   include: path.resolve(__dirname, '../src'),
   loader: require.resolve('ts-loader')
})
于 2022-01-19T16:05:11.683 回答
1

我无法编辑 Natacha 的回复，

我有同样的问题，以下解决了我的问题

  • 在tsconfig.json添加"useDefineForClassFields": false,_compilerOptions
  • 纱线添加 -D ts-loader@8.3.0
  • 将以下内容添加到.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
  },
}
于 2022-01-26T13:46:15.323 回答