Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]:When use '@storybook/addon-coverage' addon, The "DevTools"(Chrome)can not load Sourcemap correctly #35

Open
liuxian496 opened this issue Dec 11, 2023 · 7 comments
Labels
bug Something isn't working

Comments

@liuxian496
Copy link

liuxian496 commented Dec 11, 2023

Describe the bug

I upgrade Storybook to "7.6.4 ", then "DevTools"(Chrome)can not load source maps correctly. I created a new project try to reappear.

  1. The new project works correctly.

P1

  1. Then I add '@storybook/addon-coverage' addon to the project. The "DevTools"(Chrome)can not load source maps again.

P2

This is “man.ts”
main

  1. When I delete "@storybook/addon-coverage" from "man.ts". The "DevTools" works correctly again.

`
import type { StorybookConfig } from "@storybook/react-webpack5";

const config: StorybookConfig = {
stories: ["../src//*.mdx", "../src//*.stories.@(js|jsx|mjs|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/preset-create-react-app",
"@storybook/addon-onboarding",
"@storybook/addon-interactions",
// '@storybook/addon-coverage'
],
framework: {
name: "@storybook/react-webpack5",
options: {
builder: {
useSWC: true,
},
},
},
docs: {
autodocs: "tag",
},
staticDirs: ["../public"],
};
export default config;

`

The “name” component is used by Button component.

name组件使用方式

To Reproduce

No response

System

Storybook Environment Info:

  System:
    OS: macOS 13.6.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.6.7 - /usr/local/bin/npm <----- active
  Browsers:
    Safari: 17.1
  npmPackages:
    @storybook/addon-coverage: ^1.0.0 => 1.0.0 
    @storybook/addon-essentials: ^7.6.4 => 7.6.4 
    @storybook/addon-interactions: ^7.6.4 => 7.6.4 
    @storybook/addon-links: ^7.6.4 => 7.6.4 
    @storybook/addon-onboarding: ^1.0.9 => 1.0.9 
    @storybook/blocks: ^7.6.4 => 7.6.4 
    @storybook/preset-create-react-app: ^7.6.4 => 7.6.4 
    @storybook/react: ^7.6.4 => 7.6.4 
    @storybook/react-webpack5: ^7.6.4 => 7.6.4 
    @storybook/test: ^7.6.4 => 7.6.4 
    @storybook/test-runner: ^0.16.0 => 0.16.0 
    eslint-plugin-storybook: ^0.6.15 => 0.6.15 
    storybook: ^7.6.4 => 7.6.4

Additional context

No response

@liuxian496 liuxian496 added the bug Something isn't working label Dec 11, 2023
@valentinpalkovic valentinpalkovic transferred this issue from storybookjs/storybook Dec 12, 2023
@liuxian496
Copy link
Author

I change ”storybook/addon-coverage“ to version 0.0.9. The "DevTools"(chrome) worked correctly.

@r1m
Copy link

r1m commented Mar 8, 2024

I tried downgrading to 0.0.8. I still have issues with incorrect sourcemaps.
I'm using Webcomponents+vite. If I remove the addon, sourcemap is correct.

@r1m
Copy link

r1m commented Mar 20, 2024

Same with storybook/addon-coverage 1.0.1, storybook 8.0.0 and vite.
My current workaround is to remove coverage on storybook dev

// in package.json scripts
"storybook": "VITE_COVERAGE=false storybook dev -p 6006",

@liuxian496
Copy link
Author

I upgrade storybook to the v8.0.4, and the 『@storybook/addon-coverage』 version is "1.0.1", the problem is still not solved. Changed "storybook/addon-coverage“ to version 0.0.9 is not worked in storybook v8.0.4.

@liuxian496
Copy link
Author

I upgrade the project with vite, the "DevTools"(chrome) worked correctly.
Storybook is 8.0.4.
『@storybook/addon-coverage』 version is "1.0.1".
Uploading new.jpg…

@jaknas
Copy link

jaknas commented May 7, 2024

In my case, with Storybook 8 and @storybook/[email protected] I had to change configuration as pointed in the README:

        {
            name: '@storybook/addon-coverage',
            options: {
                istanbul: {
                    // Fixes https://github.com/storybookjs/addon-coverage/issues/35
                    include: ['**/stories/**'],
                },
            },
        },

After adding it, now sourcemaps are showing up correctly in devtools.

EDIT: nevermind, this actually breaks code coverage collection completely.

@jaknas
Copy link

jaknas commented Jun 27, 2024

This was fixed for me with https://github.com/storybookjs/addon-coverage/releases/tag/v1.0.4 version.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
Status: No status
Development

No branches or pull requests

3 participants