search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.72k stars 9.32k forks source link

[Bug]: Since version 8.4.2 when run npm run storybook it show html code instead of Storybook UI on browser with webpack 5 configruation. #29646

Open aleleba opened 4 days ago

aleleba commented 4 days ago

Describe the bug

Since version 8.4.2 when run npm run storybook it show html code instead of Storybook UI on browser with webpack 5 configruation. Example: Image

Reproduction link

https://github.com/aleleba/create-react-component-library/tree/reproducing-browser-html-issue

Reproduction steps

  1. execute npm run storybook on a webpack 5 configuration storybook app.

Note: to reproduce use this repo and branch: https://github.com/aleleba/create-react-component-library/tree/reproducing-browser-html-issue

System

Storybook Environment Info:

  System:
    OS: Linux 4.4 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
    CPU: (4) x64 AMD Ryzen Embedded R1600
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 22.11.0 - ~/.nvm/versions/node/v22.11.0/bin/node
    npm: 10.9.0 - ~/.nvm/versions/node/v22.11.0/bin/npm <----- active
  Browsers:
    Chrome: 130.0.6723.91
  npmPackages:
    @storybook/addon-actions: ^8.4.4 => 8.4.4 
    @storybook/addon-docs: ^8.4.4 => 8.4.4 
    @storybook/addon-essentials: ^8.4.4 => 8.4.4 
    @storybook/addon-interactions: ^8.4.4 => 8.4.4 
    @storybook/addon-links: ^8.4.4 => 8.4.4 
    @storybook/addon-styling-webpack: ^1.0.1 => 1.0.1 
    @storybook/addon-webpack5-compiler-babel: ^3.0.3 => 3.0.3 
    @storybook/blocks: ^8.4.4 => 8.4.4 
    @storybook/cli: ^8.4.4 => 8.4.4 
    @storybook/mdx2-csf: ^1.1.0 => 1.1.0 
    @storybook/preset-scss: ^1.0.3 => 1.0.3 
    @storybook/react: ^8.4.4 => 8.4.4 
    @storybook/react-webpack5: ^8.4.4 => 8.4.4 
    @storybook/testing-library: ^0.2.2 => 0.2.2 
    eslint-plugin-storybook: ^0.11.0 => 0.11.0 
    storybook: ^8.4.4 => 8.4.4

Additional context

I am upgrading to 8.4 from a 8.3 app of storybook.

To reproduce use this repo and branch: https://github.com/aleleba/create-react-component-library/tree/reproducing-browser-html-issue

shilman commented 3 days ago

I checked out your repro and it serves properly for me. Here's my local config:

Storybook Environment Info:

  System:
    OS: macOS 15.1
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 10.7.0 - /usr/local/bin/npm <----- active
  Browsers:
    Chrome: 131.0.6778.70
    Safari: 18.1
  npmPackages:
    @storybook/addon-actions: ^8.4.4 => 8.4.4 
    @storybook/addon-docs: ^8.4.4 => 8.4.4 
    @storybook/addon-essentials: ^8.4.4 => 8.4.4 
    @storybook/addon-interactions: ^8.4.4 => 8.4.4 
    @storybook/addon-links: ^8.4.4 => 8.4.4 
    @storybook/addon-styling-webpack: ^1.0.1 => 1.0.1 
    @storybook/addon-webpack5-compiler-babel: ^3.0.3 => 3.0.3 
    @storybook/blocks: ^8.4.4 => 8.4.4 
    @storybook/cli: ^8.4.4 => 8.4.4 
    @storybook/mdx2-csf: ^1.1.0 => 1.1.0 
    @storybook/preset-scss: ^1.0.3 => 1.0.3 
    @storybook/react: ^8.4.4 => 8.4.4 
    @storybook/react-webpack5: ^8.4.4 => 8.4.4 
    @storybook/testing-library: ^0.2.2 => 0.2.2 
    eslint-plugin-storybook: ^0.11.0 => 0.11.0 
    storybook: ^8.4.4 => 8.4.4