Comments (2)
This one is not a bug. The error message is clear: Font loader values must be explicitly written literals
, suggesting that the code you're using to load fonts expects specific literal values and doesn't accept dynamic or computed values.
When you're using template literals (backticks) like this:
const inter = Inter({
subsets: [`latin`],
});
The function Inter expects literal values without any computation or interpolation. Even though 'latin' is a string literal, using it within backticks causes the font loader to interpret it differently.
If you're curious and want to know how and why, here's the source code written in Rust: code
Using backticks is preferred when you need to interpolate variables or expressions or when you want to format a string block. Even if you look at JS style guides, JS coding standards, and so on, most of them recommend using single quotes for regular and simple strings.
from next.js.
I understand the error message; the point I'm making here is that a template literal that doesn't contain interpolated expressions has no dependencies on the runtime, and is thus a static string literal.
In other words, what you're saying here is exactly the bug I'm referencing:
using it within backticks causes the font loader to interpret it differently.
Using it within backticks should not cause the font loader to interpret it differently (as long as it doesn't contain any substitution), simply because there's no reasons to do so. Backtick strings are the most refactoring-friendly ones, and while I agree some stylistic guides favour single quotes, it so happens that others favour backticks.
As an example, TypeScript permits backtick strings in places that only permit literals, as long as they don't contain any substitutions. They even have their own AST node: NoSubstitutionTemplateLiteral
.
from next.js.
Related Issues (20)
- Working fine in lower environment but in production application is not working HOT 1
- App working fine in lower environment but in production application is not working HOT 3
- Docs: useFormState and sensitive data HOT 1
- Link doesn't redirect out of layout.tsx in mozilla 69.0-84.0 (+ demo) HOT 1
- Hovering a prefetch Link causes unnecessary re-render of the error boundary in production HOT 5
- Top-level `import` statements in file dynamically imported are turned into Promises HOT 1
- `Headers.getSetCookie()` returning incorrect value for `fetch` requests initiated by server component/middleware HOT 7
- Client side transition with middleware crashing
- `next build --debug` is breaking the output layout HOT 1
- Inconsistency in Accessing URL Query Parameters Between `pages` and `app` Directories
- SSG pages with route rewrites request wrong files from _next/data HOT 1
- builds are non-deterministic (output file hashes change for no reason) HOT 2
- Next.js inside of Docker (with nginx) causes page to refresh every few minutes HOT 2
- Couldn't find all resumable slots by key/index during replaying. HOT 5
- Absolute Imports and Module Path Aliases not working in production with vercel HOT 6
- Error occurred prerendering page HOT 5
- [next-codemod] allow passing arguments to jscodeshift HOT 1
- The next.js option transpilePackages does not transpile inherited packages with Turbopack (--turbo) HOT 3
- The icon does not appear on the home screen PWA app within startup HOT 2
- HTML children of MathML render in wrong namespace after routing HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from next.js.