[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<DrawerProps>["type"];  function App() {   const textStyle = useTextStyle();   return (     <List>       <ListItem>         <Text className={textStyle}>Asia</Text>       </ListItem>       <ListItem>         <Text className={textStyle}>Africa</Text>       </ListItem>       <ListItem>         <Text className={textStyle}>Europe</Text>       </ListItem>       <ListItem>         <Text className={textStyle}>North America</Text>       </ListItem>       <ListItem>         <Text className={textStyle}>South America</Text>       </ListItem>       <ListItem>         <Text className={textStyle}>Australia/Oceania</Text>       </ListItem>       <ListItem>         <Text className={textStyle}>Antarctica</Text>       </ListItem>     </List>   ); }  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]

[sopranopillow]

Hi @antonius-ivan, could you provide a stackblitz with the code you mentioned showing the error? Thanks!

[dmytrokirpa]

Hey @antonius-ivan, please check out this example - https://stackblitz.com/edit/github-mqmg5koj?file=app%2Froutes%2Fhome.tsx and let us know if you run into any other issues.

[it950]

@dmytrokirpa
First, render success:

but a few mintes later:

[dmytrokirpa]

@it950, could you please specify the steps that lead to the error you mentioned? The example I shared earlier works well on my end. Additionally, please verify that the issue is not caused by a third-party browser extension by checking it in incognito mode.