[Bug]: Next.js next/font/google syntax error on Storybook 8

[muhghazaliakbar]

Describe the bug

I did upgraded my storybook version from v7 to v8 using this migration docs: https://storybook.js.org/docs/migration-guide, everything going well except the next/font/google import.

Here's my font import code:

import React from 'react';
import { Montserrat, Oswald } from 'next/font/google';
import { clsx } from 'clsx';

const montserrat = Montserrat({
  weight: '800',
  subsets: ['latin'],
  display: 'swap',
});

const oswald = Oswald({
  subsets: ['latin'],
  display: 'swap',
});

type EdbThemeProps = {
  project: 'edb' | 'edg';
  theme: 'light' | 'dark';
  children: React.ReactNode;
};

export const ProjectTheme: React.FC<EdbThemeProps> = ({ project, theme, children }) => (
  <div
    className={clsx('p-4', project === 'edg' ? montserrat.className : oswald.className, {
      mainBackground: theme === 'dark',
    })}
  >
    {children}
  </div>
);

And this is my complete error message from terminal:

ERROR in ../../node_modules/.pnpm/next@14.1.3_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/font/google/target.css?{"path":"packages/edx-shared/.storybook/mocks/project-theme.tsx","import":"Montserrat","arguments":[{"weight":"800","subsets":["latin"],"display":"swap","variable":"--font-montserrat"}],"variableName":"montserrat"} (../../node_modules/.pnpm/css-loader@6.10.0_webpack@5.72.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].use[1]!../../node_modules/.pnpm/postcss-loader@7.3.4_postcss@8.4.35_typescript@5.4.2_webpack@5.72.1/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].use[2]!../../node_modules/.pnpm/@storybook+nextjs@8.0.0_esbuild@0.18.20_next@14.1.3_react-dom@18.2.0_react@18.2.0_typescript@5.4.2_webpack@5.72.1/node_modules/@storybook/nextjs/dist/font/webpack/loader/storybook-nextjs-font-loader.js!../../node_modules/.pnpm/next@14.1.3_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/font/google/target.css?{"path":"packages/edx-shared/.storybook/mocks/project-theme.tsx","import":"Montserrat","arguments":[{"weight":"800","subsets":["latin"],"display":"swap","variable":"--font-montserrat"}],"variableName":"montserrat"})
Module build failed (from ../../node_modules/.pnpm/postcss-loader@7.3.4_postcss@8.4.35_typescript@5.4.2_webpack@5.72.1/node_modules/postcss-loader/dist/cjs.js):

SyntaxError

(49:1) /Users/muhghazaliakbar/Projects/MyProject/edx/node_modules/.pnpm/next@14.1.3_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/font/google/target.css Unknown word

  47 |   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  48 | }
> 49 | `;
     | ^
  50 |       const style = document.createElement('style');
  51 |       style.setAttribute('id', 'font-face-13d074');
 @ ../../node_modules/.pnpm/next@14.1.3_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/font/google/target.css?{"path":"packages/edx-shared/.storybook/mocks/project-theme.tsx","import":"Montserrat","arguments":[{"weight":"800","subsets":["latin"],"display":"swap","variable":"--font-montserrat"}],"variableName":"montserrat"} 8:6-786 22:17-24 26:7-21 52:25-39 53:36-47 53:50-64 57:6-67:7 58:54-65 58:68-82 64:42-53 64:56-70 66:21-28 77:0-756 77:0-756 78:22-29 78:33-47 78:50-64 55:4-68:5
 @ ./.storybook/mocks/project-theme.tsx 4:0-268 11:51-70
 @ ./.storybook/preview.js 12:0-53 136:52-64
 @ ./storybook-config-entry.js 11:1700-1818 32:2-35:4 32:1756-35:3

To Reproduce

You can reproduce the error by installing next.js ~14 with storybook 8 and implement next/font/google like I did above.

System

Storybook Environment Info:

  System:
    OS: macOS 14.4
    CPU: (8) arm64 Apple M1
    Shell: 3.6.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 19.3.0 - ~/.nvm/versions/node/v19.3.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.2.0 - ~/.nvm/versions/node/v19.3.0/bin/npm
    pnpm: 8.6.1 - /opt/homebrew/bin/pnpm <----- active
  Browsers:
    Chrome: 122.0.6261.112
    Safari: 17.4
  npmPackages:
    @storybook/addon-actions: ^8.0.0 => 8.0.0
    @storybook/addon-controls: ^8.0.0 => 8.0.0
    @storybook/addon-docs: ^8.0.0 => 8.0.0
    @storybook/addon-essentials: ^8.0.0 => 8.0.0
    @storybook/addon-links: ^8.0.0 => 8.0.0
    @storybook/addon-styling: ^1.3.7 => 1.3.7
    @storybook/addon-toolbars: ^8.0.0 => 8.0.0
    @storybook/addon-viewport: ^8.0.0 => 8.0.0
    @storybook/addons: ^7.6.17 => 7.6.17
    @storybook/nextjs: ^8.0.0 => 8.0.0
    @storybook/react: ^8.0.0 => 8.0.0
    @storybook/storybook-deployer: ^2.8.16 => 2.8.16
    @storybook/theming: ^8.0.0 => 8.0.0
    storybook: ^8.0.0 => 8.0.0
    storybook-addon-apollo-client: ^5.0.0 => 5.0.0

Additional context

No response

[valentinpalkovic]

Hi @muhghazaliakbar,

Thank you for reporting this!

I think it has something to do with the SWC mode because in Storybook 8.0 we will use SWC if Next.js uses it. Please read the migration docs: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#automatic-swc-mode-detection.

Just for testing purposes, could you try to create a .babelrc file with the following content:

{
   presets: ["next/babel"]
}

Then start Storybook, which should run in Babel mode (You will see a message in the terminal). Does the error also occurs in Babel mode?

[muhghazaliakbar]

@valentinpalkovic Thank you for fast response! I did added .babelrc with the config, there is no error about babel mode, but the next font error above still appear.

[colmukrainec]

I am having a similar issue (I believe) with next/font/google. When I import the font and assign it to the className in the preview.tsx it reads <fontName>.className cannot read properties of undefined - target: className. I am unable to provide more details at this time but wanted to make a note of it. I can raise a help discussion later on about it or a bug report if I feel it is the result of a bug.

[muhghazaliakbar]

I just figure it out! I think @storybook/addon-styling doesn't support Storybook 8 anymore, an also it's deprecated. So I've updated to @storybook/addon-styling-webpack and working!

[valentinpalkovic]

@muhghazaliakbar
Thanks for letting everyone know about your solution.

Indeed, @storybook/addon-styling should be replaced by @storybook/addon-styling-webpack.