storybookjs/storybook

[Bug]: next/font/local is not worked in storybook with vanilla Extract

Open

#26845 opened on Apr 15, 2024

View on GitHub
 (4 comments) (3 reactions) (0 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
bugcompatibility with other toolshelp wantednextjssev:S3

Description

Describe the bug

I'm going to proceed with the project using NextJS and Storybook. When I try to apply font using localfont, SyntaxError occurs. There seems to be no problem when excluding 'predentardClassname', so that part seems to be the problematic code.

image

but, This problem is not visible when vanilla extract is removed.

To Reproduce

https://github.com/Zero-1016/storybook-playground

System

System:
    OS: Windows 11 10.0.22621
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
  Binaries:
    Node: 20.12.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD <----- active
    pnpm: 8.6.6 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (123.0.2420.97)
  npmPackages:
    @storybook/addon-essentials: ^8.0.8 => 8.0.8
    @storybook/addon-interactions: ^8.0.8 => 8.0.8
    @storybook/addon-links: ^8.0.8 => 8.0.8
    @storybook/addon-onboarding: ^8.0.8 => 8.0.8
    @storybook/blocks: ^8.0.8 => 8.0.8
    @storybook/nextjs: ^8.0.8 => 8.0.8
    @storybook/react: ^8.0.8 => 8.0.8
    @storybook/test: ^8.0.8 => 8.0.8
    @storybook/testing-library: ^0.2.2 => 0.2.2
    eslint-plugin-storybook: ^0.8.0 => 0.8.0
    storybook: ^8.0.8 => 8.0.8

Additional context

No response

Contributor guide

Tech stack
typescriptreactnextjsstorybook
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Next.js setupStorybook configuration
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
50
Research direction
Investigate the interaction between next/font/local and @storybook/nextjs when vanilla extract is used. Check the reproduction repository at https://github.com/Zero 1016/storybook playground to identify the root cause. Look into how Next.js font preloads work with Storybook's webpack configuration and how vanilla extract overrides class names. Focus on the 'predentardClassname' aspect mentioned in the bug report, and compare the configuration with and without vanilla extract to isolate the problematic code.