Failing to parse font in React build
gorazdrajar opened this issue · comments
Description
I've stumbled upon an issue when trying to render troika-three-text
's Text
mesh in a built React app. The problem only occurs in the build (I'm using create-react-app
), and not when serving the React app locally.
This is the thrown error:
Failure loading font https://troika-react-min-example.tiiny.site/Pacifico-Regular.ttf; trying fallback ReferenceError: u is not defined
at fa48ac75-84e7-4ed2-8f92-aa98e4cee473:5:2138
at Array.forEach (<anonymous>)
at t (fa48ac75-84e7-4ed2-8f92-aa98e4cee473:5:2111)
at fa48ac75-84e7-4ed2-8f92-aa98e4cee473:5:2277
at o (fa48ac75-84e7-4ed2-8f92-aa98e4cee473:5:2282)
Here is the working pre-build example:
https://codesandbox.io/s/troika-three-text-minimal-example-22n8sj?file=/src/App.js:257-265
And here is the failing build of this same app (error visible in the console):
https://troika-react-min-example.tiiny.site/
I'm thinking that something goes wrong in the minification process. Looking at this troika issue, it seems possible that this is not actually a problem on troika's end.
I've currently only found the Pacifico font (Google font) to cause this issue, most other fonts work without issues. I'm using the .ttf
file retrieved from the official Pacifico Google Font page. The problem doesn't seem to be font file related, though.
Note: I'm NOT using react-three-fiber
or drei
here.
Versions
- react:
18.2.0
(also reproduced with17.0.1
) - react-scripts:
4.0.0
(also reproduced with4.0.1
,5.0.1
) - three:
0.141.0
- troika-three-text:
0.47.1
Full steps to reproduce:
- Create a new React app using
create-react-app
npx create-react-app myApp
- Add
three
andtroika-three-text
dependencies topackage.json
"three": "0.141.0",
"troika-thre-text": "0.47.1",
- Overwrite contents of the
App.js
with the one found here - Install dependencies, build and serve the built app
yarn
yarn build
serve -s build