flat-fuchsia

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

correct-apricot•6mo ago

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

flat-fuchsiaOP•6mo 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

correct-apricot•6mo ago

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

flat-fuchsiaOP•6mo 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?

correct-apricot•6mo ago

absolutely. a minimal example would be best

flat-fuchsiaOP•6mo 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 ?

correct-apricot•6mo ago

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

flat-fuchsiaOP•6mo 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

correct-apricot•6mo 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?

flat-fuchsiaOP•6mo 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

flat-fuchsiaOP•6mo 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.

flat-fuchsiaOP•6mo 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?

correct-apricot•6mo ago

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

flat-fuchsiaOP•6mo 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

correct-apricot•6mo 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

flat-fuchsiaOP•6mo ago

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

correct-apricot•6mo ago

if you want, you can always use github sponsors 😉

flat-fuchsiaOP•6mo ago

link plz

correct-apricot•6mo ago

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

GitHub

Sponsor @schiller-manuel on GitHub Sponsors

Support schiller-manuel's open source work

flat-fuchsiaOP•6mo ago

sent ty for your help

correct-apricot•6mo ago

sure! have fun with start

flat-fuchsiaOP•6mo 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

correct-apricot•6mo ago

what's the issue ?

flat-fuchsiaOP•6mo 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?

correct-apricot•6mo ago

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

flat-fuchsiaOP•6mo ago

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

correct-apricot•6mo ago

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

flat-fuchsiaOP•6mo ago

right, since all routes are components

correct-apricot•6mo 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.

flat-fuchsiaOP•6mo 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?