Using Wasp with @fontsource (Solution for the "The request url * is outside of Vite serving allow list" issue)

main.wasp

app fontsTest {
  wasp: {
    version: "^0.12.3"
  },
  title: "fontsTest",
  client: {
    rootComponent: import { App } from "@src/App.jsx"
  }
}

route RootRoute { path: "/", to: MainPage }
page MainPage {
  component: import { MainPage } from "@src/MainPage"
}

package.json

{
  "name": "fontsTest",
  "dependencies": {
    "@fontsource/bebas-neue": "^5.0.19",
    "@fontsource/roboto": "^5.0.12",
    "react": "^18.2.0",
    "wasp": "file:.wasp/out/sdk/wasp"
  },
  "devDependencies": {
    "@types/react": "^18.0.37",
    "prisma": "4.16.2",
    "typescript": "^5.1.0",
    "vite": "^4.3.9"
  }
}

src-App.jsx

import '@fontsource/roboto/300.css'
import '@fontsource/roboto/400.css'
import '@fontsource/roboto/500.css'
import '@fontsource/roboto/700.css'

import '@fontsource/bebas-neue/400.css'

export const App = ({children}) => {
  return (
    <>
      {children}
    </>
  )
}

src-Main.jsx

import waspLogo from './waspLogo.png'
import './Main.css'

export const MainPage = () => {
  return (
    <div className="container">
      <main>
        <div className="logo">
          <img src={waspLogo} alt="wasp" />
        </div>

        <h2 className="welcome-title">
          Welcome to Wasp - you just started a new app!
        </h2>
        <h3 className="welcome-subtitle">
          This is page <code>MainPage</code> located at route <code>/</code>.
          Open <code>src/MainPage.jsx</code> to edit it.
        </h3>

        <div className="buttons">
          <a
            className="button button-filled"
            href="https://wasp-lang.dev/docs/tutorial/create"
            target="_blank"
            rel="noreferrer noopener"
          >
            Take the Tutorial
          </a>
          <a
            className="button button-outline"
            href="https://discord.com/invite/rzdnErX"
            target="_blank"
            rel="noreferrer noopener"
          >
            Chat on Discord
          </a>
        </div>
      </main>
    </div>
  )
}

vite.config.ts

import { resolveProjectPath } from 'wasp/dev'
import { defineConfig, searchForWorkspaceRoot } from 'vite'

export default defineConfig({
  server: {
    open: true,
    fs: {
      allow: [
        // Keeping the original behaviour how Vite searches for the workspace root
        // https://vitejs.dev/config/server-options#server-fs-allow
        searchForWorkspaceRoot(process.cwd()),
        // Allow serving files from the node_modules/@fontsource directory
        // (using Wasp's helper to resolve project path)
        resolveProjectPath('./node_modules/@fontsource'),
      ]
    }
  },
})