[Bug]: React Router 7 / Remix .

[antonius-ivan]

Component

Nav (Preview)

Package version

"@fluentui/react-list-preview": "^0.4.4", "@fluentui/react-components": "^9.56.3",

React version

"react": "^18.3.1",

Environment

{
  "name": "combust",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "react-router dev",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },

Current Behavior

When try React-Components library and (React-Nav-Preview Or React-List-Preview).

i think style leak and looping. this is my code import { Text, Button, Drawer, DrawerBody, DrawerHeader, DrawerHeaderTitle, DrawerProps, Label, makeResetStyles, makeStyles, Radio, RadioGroup, Switch, ToggleButton, tokens, Tooltip, useId, useRestoreFocusSource, useRestoreFocusTarget } from '@fluentui/react-components'; import { List, ListItem } from '@fluentui/react-list-preview'; import { Board20Filled, Board20Regular, BoxMultiple20Filled, BoxMultiple20Regular, bundleIcon, DataArea20Filled, DataArea20Regular, Dismiss24Regular, DocumentBulletListMultiple20Filled, DocumentBulletListMultiple20Regular, HeartPulse20Filled, HeartPulse20Regular, MegaphoneLoud20Filled, MegaphoneLoud20Regular, NotePin20Filled, NotePin20Regular, People20Filled, People20Regular, PeopleStar20Filled, PeopleStar20Regular, Person20Filled, Person20Regular, PersonCircle32Regular, PersonLightbulb20Filled, PersonLightbulb20Regular, PersonSearch20Filled, PersonSearch20Regular, PreviewLink20Filled, PreviewLink20Regular } from '@fluentui/react-icons'; import { AppItem, Hamburger, NavCategory, NavCategoryItem, NavDivider, NavDrawer, NavDrawerBody, NavDrawerHeader, NavItem, NavSectionHeader, NavSubItem, NavSubItemGroup } from '@fluentui/react-nav-preview'; import React from 'react'; import { useState } from 'react'; const useTextStyle = makeResetStyles({ color: tokens.colorNeutralForeground1, }); const Person = bundleIcon(Person20Filled, Person20Regular); const Dashboard = bundleIcon(Board20Filled, Board20Regular); const Announcements = bundleIcon(MegaphoneLoud20Filled, MegaphoneLoud20Regular); const EmployeeSpotlight = bundleIcon( PersonLightbulb20Filled, PersonLightbulb20Regular ); const Search = bundleIcon(PersonSearch20Filled, PersonSearch20Regular); const PerformanceReviews = bundleIcon( PreviewLink20Filled, PreviewLink20Regular ); const JobPostings = bundleIcon(NotePin20Filled, NotePin20Regular); const Interviews = bundleIcon(People20Filled, People20Regular); const HealthPlans = bundleIcon(HeartPulse20Filled, HeartPulse20Regular); const TrainingPrograms = bundleIcon(BoxMultiple20Filled, BoxMultiple20Regular); const CareerDevelopment = bundleIcon(PeopleStar20Filled, PeopleStar20Regular); const Analytics = bundleIcon(DataArea20Filled, DataArea20Regular); const Reports = bundleIcon( DocumentBulletListMultiple20Filled, DocumentBulletListMultiple20Regular ); type DrawerType = Required["type"]; function App() { const textStyle = useTextStyle(); return ( Asia Africa Europe North America South America Australia/Oceania Antarctica ); } export default App D: \NodeJS006FluentUIRemix\Enigma\combust\vite.config.ts import { reactRouter } from "@react-router/dev/vite"; import { defineConfig } from "vite"; import tsconfigPaths from "vite-tsconfig-paths"; import { cjsInterop } from "vite-plugin-cjs-interop"; import griffel from "@griffel/vite-plugin"; export default defineConfig(({ command }) => ({ plugins: [ reactRouter(), tsconfigPaths(), // Add CJS interop plugin for Fluent UI packages, // as they are CommonJS modules cjsInterop({ dependencies: ["@fluentui/react-components", "@fluentui/react-nav-preview", "@fluentui/react-list-preview"], }), // Add Griffel plugin for production optimization command === "build" && griffel(), ], // Required for Fluent UI icons in SSR ssr: { noExternal: ['@fluentui/react-icons'], }, }));

Expected Behavior

normal Usage. No Looping and Crash

Reproduction

okay

Steps to reproduce

follow this. https://react.fluentui.dev/?path=/docs/concepts-developer-server-side-rendering-react-router-7-and-remix-setup--docs

but also add a preview package.

Are you reporting an Accessibility issue?

None

Suggested severity

High - No workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[antonius-ivan]