Repository: storybook
Issue: [Bug]: Next.js 14 localFont  + vanilla extract error
Labels: bug,needs triage

### Describe the bug

### Summary

Hello, I am currently using Next.js14 version.

I applied the localFont application method as written in the official document, but the error as shown in the picture continues to occur.

Is the path wrong? Even though I followed the same path as the official document, an error occurred and I don't know where the error is.

Currently, the font is applied normally within the application, but the error occurs only in storybook.

<img width="1267" alt="스크린샷 2024-07-26 오전 7 22 49" src="https://github.com/user-attachments/assets/eba56053-d590-4d8f-afb6-964dca21aca4">


## src/components/fonts/font.ts

```ts
import localFont from 'next/font/local';

export const myFont = localFont({
  src: './BMHANNAAir_ttf.ttf',
  display: 'swap',
});
```

<img width="381" alt="스크린샷 2024-07-26 오전 7 25 22" src="https://github.com/user-attachments/assets/3e7ca6d4-b223-496f-83b7-b3cc5ae6fb30">


<img width="495" alt="스크린샷 2024-07-26 오전 7 27 46" src="https://github.com/user-attachments/assets/003f0fc1-0281-4e1a-b192-e5f4dceec243">




### Additional information

## - main.ts

```ts
import type { StorybookConfig } from '@storybook/nextjs';
import type { PresetValue } from '@storybook/types';
import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import path from 'path';

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-onboarding',
    '@storybook/addon-interactions',
    '@chromatic-com/storybook',
    '@storybook/addon-styling-webpack',
  ],
  framework: {
    name: '@storybook/nextjs',
    options: {},
  },

  docs: {},
  typescript: {
    reactDocgen: 'react-docgen-typescript',
  } as PresetValue<Partial<import('@storybook/types').TypescriptOptions> | undefined>,


// This is the path written in the official document.
  staticDirs: [
    {
      from: '../src/components/fonts',
      to: 'src/components/fonts',
    },
  ],

  webpackFinal(config, options) {
    // Add Vanilla-Extract and MiniCssExtract Plugins
    config.plugins?.push(new VanillaExtractPlugin(), new MiniCssExtractPlugin());

    // Exclude vanilla extract files from regular css processing
    config.module?.rules?.forEach((rule) => {
      if (
        rule &&
        typeof rule !== 'string' &&
        rule.test instanceof RegExp &&
        rule.test.test('test.css')
      ) {
        rule.exclude = /\.vanilla\.css$/i;
      }
    });

    config.module?.rules?.push({
      test: /\.vanilla\.css$/i, // Targets only CSS files generated by vanilla-extract
      use: [
        MiniCssExtractPlugin.loader,
        {
          loader: require.resolve('css-loader'),
          options: {
            url: false, // Required as image imports should be handled via JS/TS import statements
          },
        },
      ],
    });

    config.module?.rules?.push({
      test: /\.(ttf|woff|woff2|eot|otf)$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'fonts/',
          },
        },
      ],
    });

    config.resolve = config.resolve || {};
    config.resolve.alias = config.resolve.alias || {};

    config.resolve.alias['@'] = path.resolve(__dirname, '../src');

    return config;
  },
};

export default config;
```

## - preview.tsx
```tsx
import type { Preview } from '@storybook/react';
import { fn } from '@storybook/test';
import React from 'react';
import { myFont } from '../src/components/fonts/font';

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
  globalTypes: {
    action: fn,
  },
};

export const decorators = [
  (Story) => (
    <div className={myFont.className}>
      <Story />
    </div>
  ),
];

export default preview;
```

<img width="242" alt="스크린샷 2024-07-26 오전 7 29 38" src="https://github.com/user-attachments/assets/6b2c5d2d-9463-4e26-8b79-ee7b332bc759">

<img width="513" alt="스크린샷 2024-07-26 오전 7 30 10" src="https://github.com/user-attachments/assets/4613482a-1c78-47dd-8112-10b3e4b7f56a">



### Create a reproduction

_No response_

### Reproduction link

https://github.com/brgndyy/BEING_JAZZER/blob/main/front/.storybook/main.ts

### Reproduction steps

_No response_

### System

```bash
{
  "devDependencies": {
    "@chromatic-com/storybook": "^1.5.0",
    "@storybook/addon-essentials": "^8.1.9",
    "@storybook/addon-interactions": "^8.1.9",
    "@storybook/addon-links": "^8.1.9",
    "@storybook/addon-mdx-gfm": "^8.1.9",
    "@storybook/addon-onboarding": "^8.1.9",
    "@storybook/blocks": "^8.1.9",
    "@storybook/nextjs": "^8.1.9",
    "@storybook/react": "^8.1.9",
    "@storybook/test": "^8.1.9",
    "storybook": "^8.1.9"
  },
}
```


### Additional context

_No response_