[Bug]: Jsx disapear from chrome dev tools source after migration to storybook 7

[danyquestel]

Describe the bug

I made a storybook migration from 6.5.16 to 7.6.16 with the command npx [email protected] upgrade and applying all the proposed migration scripts.
Then I run storybook and tried to find my jsx components in the chrome source dev tools and can unfortunately can not find them.

To Reproduce

Reproduced with a simple project https://stackblitz.com/edit/stackblitz-starters-vjugfk?file=src%2FMyButton.style.js
in storybook 6.5.16 we can find MyButton.jsx in the source dev tools.
After migration to 7.6.16 we can only see MyButton.style.js

By comparing the source maps between the 2 cases :

• in version 6 we have a single main.iframe.bundle.js
• in version 7 there is a bundle specific for MyButton stories-MyButton-stories.iframe.bundle.js and its seems the chrome dev tools can not fully interpret it.

find attached the generated bundle.
main.iframe.bundle.js.txt
stories-MyButton-stories.iframe.bundle.js.txt

System

No response

Additional context

No response

[psychobolt]

I have a similar issue with Storybook 7 with react-webpack5 framework using babel. I know since version 7, the new virtual module plugin is creating a iframe bundle per story. I manage to get my setup somewhat working with some patches to core-webpack. I am not a webpack expert, so I can't really say what is the real issue. All I can speculate is that the loaders transpiles my original source and webpack handles the source map. However the devtool is unable to match the chunk request the for jsx source map (without the patch). Removing that magic comment, I am able to display the module under webpack:// space in Chrome devtools. You can try importing a css file and that will resolve correctly though, even with using devtool: 'source-map'. To get around the issue for jsx, I added my own config...

Include in webpack plugin:

devtool: false, // handle by plugin
plugins: [
  new webpack.SourceMapDevToolPlugin({
      test: /jsx?.iframe.bundle.js$/,
      exclude: /^vendors-.+$/, // optimization
      filename: '[file].map', // can be omitted for inline source maps
      moduleFilenameTemplate: 'webpack://[namespace]/[absolute-resource-path]', // can be omitted as above
      module: false, // required, for some reason
    }),
]

core-webpack patch:

diff --git a/dist/index.js b/dist/index.js
index a1ca362e78c4abf50b73c6c567fd09175be9153e..6ad88f42f9fc3e897acbb85e28f8df04dbdd31a4 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -14,7 +14,6 @@
 
         const pathRemainder = path.substring(${directory.length+1});
         return import(
-          /* webpackChunkName: "[request]" */
           /* webpackInclude: ${webpackIncludeRegexp(specifier)} */
           '${directory}/' + pathRemainder
         );
diff --git a/dist/index.mjs b/dist/index.mjs
index 5af8560bd8fd4d66d66ea0af4fdf14af19e99b14..836ed5dc335fce56fd9f604edecb650f02b616ba 100644
--- a/dist/index.mjs
+++ b/dist/index.mjs
@@ -19,7 +19,6 @@ var webpackConfigs=["webpack.config","webpackfile"],loadCustomWebpackConfig=conf
 
         const pathRemainder = path.substring(${directory.length+1});
         return import(
-          /* webpackChunkName: "[request]" */
           /* webpackInclude: ${webpackIncludeRegexp(specifier)} */
           '${directory}/' + pathRemainder
         );

After I can set break points in devtools, although the sourcescontent isn't exactly original.

[aliking]

Many moving parts here, but I'm also in middle of a migration from storybook 6.5.13 to 7.6.17 and have the same issue. I think I've narrowed it to being related to an interaction with either addon-controls or addon-docs.

I'm using addon-essentials 7.6.17 and if I set this in main.js

...
    {
      name    : '@storybook/addon-essentials',
      options : {
        controls : false,
        docs     : false
      }
    },
...

then sourcemaps are found as I expect. If i include one or both of those addons, e.g.

...
    {
      name    : '@storybook/addon-essentials',
      options : {
        controls : true,
        docs     : false
      }
    },
...

sourcemaps are missing in devtools

[danyquestel]

Thanks for the feedback, unfortunately it does work with my project.

[ankitprahladsoni]

I'm facing the same problem with Storybook 8, and disabling both controls and docs as per @aliking
worked for me

[ankitprahladsoni]

It could potentially be a problem with reactDocgen. I got the source maps to work with the below configuration

const config = { 
    addons: [
        {
            name: '@storybook/addon-essentials',
            options: {
                docs: false,
            },
        },
        '@storybook/addon-interactions',
    ],
    typescript: {
        reactDocgen: 'react-docgen-typescript', // Adding this worked for sourcemaps
    },
// rest of the config
};

[jd-carroll]

FYI: I am still missing source maps after upgrading to 8.0.5

I even tried updating my config with: (as suggested above)

    typescript: {
      check: false,
      skipCompiler: false,
      reactDocgen: 'react-docgen-typescript' as const, // Adding this worked for sourcemaps
      reactDocgenTypescriptOptions: {}
    },

But that still did not work.

Not really sure how to debug this or what I could provide, may well be something I am doing.

However, if I downgrade to 7.6.17 all of the source maps come back (with no other changes).

[valentinpalkovic]

The fix in #26676 isn’t released yet and will be part of the 8.0.6 release.

[jd-carroll]

Awesome, thank you for that clarification

[danyquestel]

Thanks @valentinpalkovic,
I successfully tested it with 8.0.8