[Bug]: Next13 aliased imports of @next/font/google fonts break the storybook

[andreymaslovru]

Describe the bug

When using Next13 Google fonts ('@next/font/google'), the storybook breaks. I can't use the font not in styled-components, not in the global materialUI theme. In the first case, I see an error: "Couldn't find story matching 'ui-atoms-texts-actions-textactionmiddle--common'", and in the second, an endless loader on the storybook.

To Reproduce

//styles.ts
import { Roboto_Flex as fontRobotoFlex } from '@next/font/google'

const robotoFlex = fontRobotoFlex({
  subsets: ['cyrillic', 'cyrillic-ext', 'latin', 'latin-ext'],
  weight: ['400', '500', '600', '700']
})

export const useStyles = makeStyles({
  text: { ...robotoFlex.style }
})

//BaseText.tsx
const BaseText = () => {
  const styles = useStyles()

  return (
    <div styles={styles.text}>{text}</div
  )
}

//BaseText.stories.tsx
export default {
  title: 'UI/Atoms/Texts',
  component: BaseText
} as ComponentMeta<typeof BaseText>

const Template: ComponentStory<typeof BaseText> = (args) => (
  <BaseText {...args} />
)

export const Common = Template.bind({})

Common.args = {
  children: 'Base text'
}


OR USING FONTS WITH MUI: 
const robotoFlex = fontRobotoFlex({
  subsets: ['cyrillic', 'cyrillic-ext', 'latin', 'latin-ext'],
  weight: ['400', '500', '600', '700']
})

//theme.ts
const theme = createTheme({
  typography: {
    ...robotoFlex.style
  }
})

System

System:
    OS: macOS 12.4
    CPU: (8) arm64 Apple M1
  Binaries:
    Node: 16.15.1 - /usr/local/bin/node
    Yarn: 1.22.19 - ~/node_modules/.bin/yarn
    npm: 8.11.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 109.0.5414.119
    Firefox: 109.0
    Safari: 15.5
  npmPackages:
    @storybook/addon-actions: 6.5.13 => 6.5.13 
    @storybook/addon-essentials: 6.5.13 => 6.5.13 
    @storybook/addon-interactions: 6.5.13 => 6.5.13 
    @storybook/addon-links: 6.5.13 => 6.5.13 
    @storybook/builder-webpack5: 6.5.13 => 6.5.13 
    @storybook/manager-webpack5: 6.5.13 => 6.5.13 
    @storybook/react: 6.5.13 => 6.5.13 
    @storybook/testing-library: 0.0.13 => 0.0.13

Additional context

Please note that the problem is not with local fonts - '@next/fonts/local', but with '@next/fonts/google'
How can I properly use this with a storybook? Components that are used in the storybook refer to global materialUI styles, but not working without MUI

depends: {
"next": "13.0.7",
"storybook": "^7.0.0-beta.36"
}

[yannbf]

Hey @andreymaslovru thanks for reporting this issue! Could you please setup a reproduction so we can better assist you?

npx storybook@next repro nextjs/default-ts --output next-repro

[andreymaslovru]

I used the command above, and everything works fine, but I found what was the reason for the breakdown...

be careful when calling a function
import {Roboto_Flex as fontRobotoFlex} from '@next/font/google' NOT WORKING!

call directly -> import {Roboto_Flex} from '@next/font/google'

I close this issue, @yannbf thank you!

[yannbf]

Thanks for reporting further @andreymaslovru! I think that is a limitation and we should probably work on fixing that.

@valentinpalkovic this might be related to the logic in here, given that the AST structure might be slightly different with aliased imports? https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/src/font/babel/helpers.ts#L284

[valentinpalkovic]

@yannbf i am not sure, whether aliased imports of Google Fonts are even working in Next.js. Can you give us a feedback @andreymaslovru, whether the alias import works in Next.js directly?

[andreymaslovru]

@valentinpalkovic Hey google fonts work next13 when calling alias so you can check it out i created a new commit (andreymaslovru/storybookWithNext13Issue@25ffcbb) and attach screenshots below

as you can see, the font works, but the storybook doesn't start
you can try change this import import { Source_Code_Pro as sourceCodeProFunc } from '@next/font/google' to import { Source_Code_Pro } from '@next/font/google' and work it

[andreymaslovru]

It would be logical if next13 would not launch the font, but it does (

[valentinpalkovic]

Closing. Fixed by #24406