Storybook: Breakpoints or Source Maps not working properly in Chrome

[mindjuice]

I'm using Storybook for some components, but breakpoints are not working correctly in Chrome Dev Tools.

I was able to reproduce the same issue in thekadira-samples/react-storybook-demo app with no modifications (the Todos app sample). Just clone it from github, do npm i and npm run storybook and open your browser to localhost:9001.

If I open TodoItem.js in the Chrome Dev Tools "Source" tab, and put a breakpoint on the first line of render(), then make a change in Storybook that causes a TodoItem to need to re-render (e.g., mark one as complete), the debugger "breaks", but the file that Chrome Dev Tools shows has the name ?d41d, and the contents of the file is just the following:

undefined


/** WEBPACK FOOTER **
 ** 
 **/

Switching over to TodoItem.js has no effect, and single stepping just continues execution.

Anyone else have debugging working in Storybook?

[arunoda]

I've also seen this issue.
Would love to work on this.

[jennylia]

@arunoda Could you please add this feature, it would help me (and others) so much to learn React. <3

[nikhilbaradwaj]

https://github.com/FountainJS/generator-fountain-webapp/issues/129

[nikhilbaradwaj]

https://github.com/webpack/webpack/issues/2145 has the discussion and temporary fix.

[arunoda]

@nikhilbaradwaj Thanks for the reference.

[jennylia]

@nikhilbaradwaj Thanks but this did not fix the problem of being able to stop on debug points, but not being able to see which javascript line the code is "breaks" on for me. I still see @mindjuice error earlier.

[jennylia]

@arunoda I changed node_modules/@kadira/storybook/dist/server/webpack.config.js to use devtool: 'inline-source-map' instead of devtool: '#cheap-module-eval-source-map' and this problem was resolved. Technically, I don't like to change config files in node_modules. I think maybe we can do something to the webpack.config file? Changing it in node_module not the best idea, it usually gets gitignored.

[ndelangen]

If you are still experiencing this issue please re-open 👍

[knaos]

I am having this issue when developing a react storybook.

[ndelangen]

What version are you using @knaos ?

[dagatsoin]

Still an issue on 4.1.6

[markov00]

@dagatsoin I'm currently on 4.1.11 and it's just a matter of adding the following on your storybook webpack config:

  config.devtool = 'inline-source-map';

[trianta2]

Thanks @markov00 , your solution worked for me. For those like me who are still new to storybook, follow this example to update the storybook webpack config.