[Bug] Breaks the nextJs localFonts

[mahesh-fraim]

When the addon is included the story book shows an error localFont is not defined

Steps to reproduce the behavior

1. Configure next/font/local in any of the react component
2. Include the addon '@storybook/addon-coverage',
3. Check the story which includes localFonts
4. See error (Refer to image below)
5. As soon as I remove '@storybook/addon-coverage', storybook works as expected, but coverage is broken!

Expected behavior

It should include the local fonts

Screenshots and/or logs

Environment

• OS: mac
• Node.js version: [e.g. v12.17.0]
• NPM version: v18.15.0
• Browser (if applicable): chrome
• Browser version (if applicable): 113.0.5672.92
• Device (if applicable): macbook

Additional context

package versions
"next": "^13.4.2",
"@storybook/addon-coverage": "^0.0.8",
"@storybook/nextjs": "^7.0.12",

[ovflowd]

Any update on this? This issue still exists 😢

[vrazn]

Same problem. Impossible to run the Storybook / CI tests with Next.js due to this issue.

[yannbf]

Hey everyone! Would you mind providing a reproduction I could take a look at? Thank you!

[conradogarciaberrotaran]

Hello, having the same issue. For reproduction I think it's enough just to start a NextJS project, import some font from @next/font/google, add storybook, add coverage addon and run storybook.

Anyone has a workaround in the mean time'

Thanks!

[nschikora]

Hey everyone! Would you mind providing a reproduction I could take a look at? Thank you!

@yannbf I created a minimal reproduction here: https://github.com/nschikora/next-storybook-coverage

Let me know if I can be of help and thank you a lot for looking into this.

[yannbf]

Thank you so so much for your repro @nschikora! We have to take a look into dozens of issues all the time, so having to create repros ourselves makes things harder to take a look at. Sharing a repro like you did is incredibly helpful.

I took a look at it seems like the local font import is not instrumented:

Nextjs has internal plugins to transform the font imports, it should have looked more like this:
storybook_nextjs_font_loader_source_next_font_local_props_src_Roboto_Roboto_Regular_ttf_fontFamily_localFont_filename_Users_projects__next_storybook_coverage_app_test_tsx_next_font_local__WEBPACK_IMPORTED_MODULE_1___default

It seems like Nextjs just doesn't work with babel based configurations + coverage:
https://nextjs.org/docs/messages/babel-font-loader-conflict
vercel/next.js#30529 (comment)
istanbuljs/babel-plugin-istanbul#285

@storybook/nextjs does have a custom layer to transform fonts, so maybe we can somehow get this to work, although I'm not 100% sure. @valentinpalkovic WDYT?

[conradogarciaberrotaran]

any update on this? I would really like to introduce coverage to my stories.

[kasir-barati]

Any update @yannbf, @valentinpalkovic?

[valentinpalkovic]

Could you all try to use the canary version of @storybook/addon-coverage: 1.0.0-canary.27.12a4851.0. We have replaced the Babel plugin in this case and are now using a Webpack loader to run Istanbul. I could imagine, that things are not conflicting anymore

[kasir-barati]

I tested it with @nschikora's repo: https://github.com/nschikora/next-storybook-coverage

It is resolved I think, but not sure completely since I did not execute npm run test-storybook too but npm run storybook was working smoothly. Thanks a lot @valentinpalkovic

[nschikora]

Can confirm that it works now. Thank you a lot @yannbf and @valentinpalkovic.

[valentinpalkovic]

https://github.com/storybookjs/addon-coverage/releases/tag/v1.0.0 is released and fixes the issue. You can now use it instead of the canary release!