provincial-silver

React Fluent Icons not being loaded/throwing an error

Hi all, I'm currently migrating from Next.js to Tanstack Start. I have fully completed the migration, and changed all of my routes, per the doc for the migration. I'm sure there is still a lot of work to do (fixing small bugs, rewriting my server actions, etc) but I can't even get there because of a very puzzling error:

An error occured while server rendering /index.html:

    Cannot find module '/@fluentui/react-icons/lib/icons/chunk-0' imported from /@fluentui/react-icons/lib/index.js

An error occured while server rendering /index.html:

    Cannot find module '/@fluentui/react-icons/lib/icons/chunk-0' imported from /@fluentui/react-icons/lib/index.js

I use @fluentui/react-icons on my project and am getting this error. I have tried 1) Doing a fresh install of the package 2) Deleting my node_modules and running npm i 3) Running npm i --legacy-peer-deps and npm i --force 4) Creating a new start project with a minimal build. 5) Creating a "ForceClient" component, which runs a useEffect, and only renders children once the effect runs (which should force it to only run on the client side) -Wrapped my __root in this -Wrapped all the icons in it 6) Modifying my vite.config.ts to include the CommonJS path as an alias 7) Downgrading the package to several older versions Can someone please help me make sense of this? Thank you.

30 Replies

other-emerald•3mo ago

is this error occuring when running the dev server? can you share a reproducer please?

provincial-silverOP•3mo ago

yes it is occuring when i run the dev server reproducer? im sorry im not exactly sure what you mean to reproduce the error, use the @fluentui/react-icons package with a start project

other-emerald•3mo ago

can you share a complete example repository ? so I can just clone and run

provincial-silverOP•3mo ago

sure! its a fairly large repo with env vars as well for secrets obviously env vars dont get committed to git would it work to share my minimal example with you?

other-emerald•3mo ago

absolutely. a minimal example would be best

provincial-silverOP•3mo ago

okay. i can send you the repo, but honestly it may be easiest if you created it. i obviously dont mind sending it to you but here is all it is. i have reduced my minimal example down to the following code -a fresh tanstack start project -using a fluent icon hey, i actually think i figured it out by messing with my minimum example i need a bit of help though fixing it so, i think the error is: using a fluent icon in the layout i have components that use fluent icons in the layout, not directly but inside of the component itself. like a navbar that has icons on it that wraps all of the pages. how can i create the same "layout" functionality while moving these components out of __root.tsx ?

other-emerald•3mo ago

can you share the minimal example still? i am not sure what is going on here

provincial-silverOP•3mo ago

yes i will share so im trying to use fluent icons on my project, and it works when they are on the individual page (like index) but not when they're in the __root which makes sense my only question now is how i can get a component that is used in a layout to use these icons, which is kinda paramount

other-emerald•3mo ago

it works when they are on the individual page (like index) but not when they're in the __root which makes sense

why does this make sense?

provincial-silverOP•3mo ago

apologies im not doing a very good job of explaining for some reason, inside of next js, using these icons i always had to run them inside of a client component. i think under the hood they use some kind of context provider for some reason so when they render on the server, it causes issues. to solve that, inside of next, i just made a client component and put THAT in the layout. also here is the link

provincial-silverOP•3mo ago

https://github.com/mason-randall/start-fluent-minimal-example

GitHub

GitHub - mason-randall/start-fluent-minimal-example

Contribute to mason-randall/start-fluent-minimal-example development by creating an account on GitHub.

provincial-silverOP•3mo ago

if you call the icon in the __root or inside of a layout (i made a pathless layout) it wont build. in my actual project, i have navbars and such (which i would traditionally place inside of a "layout") that use said icons. i also have a provider that uses them inside of the provider itself. how can i put them inside of a layout without it breaking? do i have to abandon the layout approach for navbars and such?

other-emerald•3mo ago

i have never used nextjs. but is a client component not SSRed?

provincial-silverOP•3mo ago

i dont believe so well actually it looks like they do -- but i did not see this error inside of next, it actually is a fully functional application in use right now

other-emerald•3mo ago

you need this in the vite config ssr: {noExternal: ['@fluentui/react-icons']}

import { defineConfig } from 'vite'
import tsConfigPaths from 'vite-tsconfig-paths'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'

export default defineConfig({
    server: {
        port: 3000,
    },
    plugins: [tsConfigPaths(), tanstackStart()],
    ssr: {noExternal: ['@fluentui/react-icons']}
})

import { defineConfig } from 'vite'
import tsConfigPaths from 'vite-tsconfig-paths'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'

export default defineConfig({
    server: {
        port: 3000,
    },
    plugins: [tsConfigPaths(), tanstackStart()],
    ssr: {noExternal: ['@fluentui/react-icons']}
})

apparently this package is not a correct ESM package with this config you can instruct vite to transpile it

provincial-silverOP•3mo ago

dude you're a life saver thank you so much can i buy you a coffee or anything?

other-emerald•3mo ago

if you want, you can always use github sponsors 😉

provincial-silverOP•3mo ago

link plz

other-emerald•3mo ago

https://github.com/sponsors/schiller-manuel

GitHub

Sponsor @schiller-manuel on GitHub Sponsors

Support schiller-manuel's open source work

provincial-silverOP•3mo ago

sent ty for your help

other-emerald•3mo ago

sure! have fun with start

provincial-silverOP•3mo ago

thank you 🙂 could you help me with one more thing? im sure its small but i cant quite figure out how to use <Outlet /> -- essentially i dont have content rendering on the page now maybe more of a router question

other-emerald•3mo ago

what's the issue ?

provincial-silverOP•3mo ago

essentially no routes are returning any content or loading any console logs from the route where should outlet actually go? in root, right? should it also go in index?

other-emerald•3mo ago

it goes in all routes that have children index is a leaf, so it does not have children hence no outlet

provincial-silverOP•3mo ago

okay gotcha does it only go in routes? or components too

other-emerald•3mo ago

it goes in a component that is rendered by a route as its "route component"

provincial-silverOP•3mo ago

right, since all routes are components

other-emerald•3mo ago

have a look at one of our examples https://tanstack.com/router/latest/docs/framework/react/examples/kitchen-sink-file-based

React TanStack Router Kitchen Sink File Based Example | TanStack Ro...

An example showing how to implement Kitchen Sink File Based in React using TanStack Router.

provincial-silverOP•3mo ago

ohh this is awesome thanks again for all your help. take care 🙂

Gaming

Programming

React Fluent Icons not being loaded/throwing an error

Did you find this page helpful?