Storybook: build-storybook working not the same as start-storybook cli. It can not read correct value that build from stencil lib

[nqhy]

Describe the bug
I and my team create an app using stencil and we integrated storybook to help us organize ui components.

However, When i try to use start-storybook cli it works totally fine. But when i use build-storybook with the same static file serve and same config .

The mode static it not work like the mode dev. I wonder is any problem when i am not define web-pack.

With dev mode i still get the prop boolean equals false, but in the static mode i got true even when i try define prop value any values still got back true value

(I use npx serve to host the build generated from command build-storybook)

Expected behavior
Get the correct value when stencil complies this line @Prop() isLoading = false

Screenshots
With the dev mode i use command npm run build && start-storybook -p 9001 -c .storybook -s www

With the static mode i use command npm run build && build-storybook -s www -o public

This value got correct in Dev mode. But when static mode (i mean using build-storybook cli, it always return back true value)

[AsherFoster]

Having this exact same issue with Stencil + Storybook. When using start-storybook, @Props work as expected, however when running build-storybook they are all true. My only guess is that webpack has some bad optimizations, but I've had no luck debugging this.

$0.disabled // true
$0.disabled = false
$0.disabled // true

We define the custom elements in preview.js:

import '!style-loader!css-loader!sass-loader!../src/css/prebuilt/theme.scss';
import { defineCustomElements } from '../dist/esm/loader';

defineCustomElements();

Our main.js is relatively simple, just configures typescript

module.exports = {
  addons: [
    '@storybook/preset-typescript',
    '@storybook/addon-actions',
    '@storybook/addon-knobs'
  ],
  stories: ['../src/**/*.stories.ts(|x)']
};

[AsherFoster]

So, after tampering with the webpack config for a while, I found the cause, as well as a workaround. The issue appears to lie within babel-plugin-transform-simplify-comparison-operators, which is responsible for converting === to ==.
This breaks the build. Don't ask me why.

I disabled this in webpackFinal, and the build works as normal again:

// main.js
webpackFinal(config) {
  const jsRule = config.module.rules[0];
  const babelPresets = jsRule.use.find(l => l.loader === 'babel-loader').options.presets;
  const minifyPreset = babelPresets[1];
  minifyPreset[1].simplifyComparisons = false;

  return config;
}

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[nqhy]

So, after tampering with the webpack config for a while, I found the cause, as well as a workaround. The issue appears to lie within babel-plugin-transform-simplify-comparison-operators, which is responsible for converting === to ==.
This breaks the build. Don't ask me why.

I disabled this in webpackFinal, and the build works as normal again:

// main.js
webpackFinal(config) {
  const jsRule = config.module.rules[0];
  const babelPresets = jsRule.use.find(l => l.loader === 'babel-loader').options.presets;
  const minifyPreset = babelPresets[1];
  minifyPreset[1].simplifyComparisons = false;

  return config;
}

@AsherFoster Thanks so much for your support <3 i really appreciate that