reactjs - Load bm-font in react-three-fiber and NextJS

Question

I'm trying to get bitmap fonts working in react-three-fiber on a NextJS app but I'm having trouble figuring out how to get it working. This is the package I'm trying to use: https://github.com/Jam3/three-bmfont-text

As you can see, both of the required packages three-bmfont-text and load-bmfont use CommonJS require() syntax which to be honest has always given me nothing but trouble when using NextJS. I went down the path of trying to use this in getServerSideProps since that only runs on the server, but that only runs in the pages/ folder, which I need this in a global canvas component. Also, I don't think that was the right idea.

I also found a three-bmfont package for react-three-fiber but it threw encoding errors when trying to import the PNG file for the font texture. I had no idea how to troubleshoot this, so I decided maybe that package was not the answer.

I'm sure there is a way to do this and I apologize for maybe a slightly opinionated question, but I have went down a few paths that led me nowhere in how to implement this and I am stuck. Any help would be appreciated.

question from:https://stackoverflow.com/questions/65833291/load-bm-font-in-react-three-fiber-and-nextjs

Answer 1

three-bmfont-text expects a global THREE object. You can provide it like this in next.config.js:

config.plugins.push(
 new webpack.ProvidePlugin({
  THREE: 'three',
 })
)