Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

An error occurred in next/font. TypeError: Cannot read properties of undefined (reading 'ascent') #69748

Closed
chris-garrett opened this issue Sep 5, 2024 · 3 comments · Fixed by #69806
Closed

An error occurred in next/font. TypeError: Cannot read properties of undefined (reading 'ascent') #69748

chris-garrett opened this issue Sep 5, 2024 · 3 comments · Fixed by #69806
Labels
bug Issue was opened via the bug report template. create-next-app Related to our CLI tool for quickly starting a new Next.js application. locked

Comments

@chris-garrett
Copy link

Link to the code that reproduces this issue

https://github.com/chris-garrett/next-font-issue

To Reproduce

Create a new app and run pnpm dev

npx -y create-next-app@latest \
  next-font-issue \
  --yes \
  --typescript \
  --app \
  --eslint \
  --import-alias "@acme/*" \
  --src-dir \
  --use-pnpm \
  --turbo \
  --tailwind

Current vs. Expected behavior

I would expect a new app created with create-next-app and unmodified to run without errors.

Provide environment information

$ npx --no-install next info

Operating System:
  Platform: linux
  Arch: x64
  Version: #40~22.04.3-Ubuntu SMP PREEMPT_DYNAMIC Tue Jul 30 17:30:19 UTC 2
  Available memory (MB): 64212
  Available CPU cores: 24
Binaries:
  Node: 21.5.0
  npm: 10.2.4
  Yarn: 1.22.22
  pnpm: 9.8.0
Relevant Packages:
  next: 14.2.8 // Latest available version is detected (14.2.8).
  eslint-config-next: 14.2.8
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.5.4
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

create-next-app

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

An error occurred in `next/font`.

TypeError: Cannot read properties of undefined (reading 'ascent')
    at get ascent [as ascent] (/home/chris/projects/next-font-issue/node_modules/.pnpm/next@14.2.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/@next/font/dist/fontkit/index.js:1:797933)
    at getFallbackMetricsFromFontFile (/home/chris/projects/next-font-issue/node_modules/.pnpm/next@14.2.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/@next/font/dist/local/get-fallback-metrics-from-font-file.js:73:13)
    at nextFontLocalFontLoader (/home/chris/projects/next-font-issue/node_modules/.pnpm/next@14.2.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/@next/font/dist/local/loader.js:63:114)
    at async Span.traceAsyncFn (/home/chris/projects/next-font-issue/node_modules/.pnpm/next@14.2.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/trace/trace.js:154:20)
    at async /home/chris/projects/next-font-issue/node_modules/.pnpm/next@14.2.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js:76:87
    at async Span.traceAsyncFn (/home/chris/projects/next-font-issue/node_modules/.pnpm/next@14.2.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/trace/trace.js:154:20)
 GET / 500 in 1703ms
@chris-garrett chris-garrett added the bug Issue was opened via the bug report template. label Sep 5, 2024
@github-actions github-actions bot added the create-next-app Related to our CLI tool for quickly starting a new Next.js application. label Sep 5, 2024
@Frexuz

This comment has been minimized.

Sign in to view
lubieowoce added a commit that referenced this issue Sep 6, 2024
@lubieowoce
test: add failing test for issue #69748
6be9ecf
lubieowoce added a commit that referenced this issue Sep 6, 2024
@lubieowoce
test: add failing test for issue #69748
e551f35
@lubieowoce lubieowoce mentioned this issue Sep 6, 2024
Closed
@ztanner ztanner mentioned this issue Sep 6, 2024
Merged
ztanner added a commit that referenced this issue Sep 6, 2024
@ztanner @lubieowoce
create-next-app: fix font file corruption when using import alias (#6…
ef2decf 
…9806)

There's code that uses `glob` to find all template files and replaces
the default import alias with whatever is specified during CNA. This
does so without excluding fonts, and so we're unintentionally corrupting
these `woff` files.

This wasn't a problem in previous versions because we didn't use
`localFont` in the default template, just `Inter`. The files were
technically still being corrupted it just never manifested unless you
went to actually use them.

This is a quick fix to introduce minimal changes but ideally in a
follow-up we should figure out a better solution for replacing aliases,
ie by using an allowlist rather than an exclude list.

h/t to @lubieowoce for the thorough test cases

Fixes #69748

---------

Co-authored-by: Janka Uryga <lolzatu2@gmail.com>
lubieowoce added a commit that referenced this issue Sep 7, 2024
@lubieowoce
test: add failing test for issue #69748
3a86827
ztanner added a commit that referenced this issue Sep 9, 2024
@ztanner @lubieowoce
create-next-app: fix font file corruption when using import alias (#6…
0b89af0 
…9806)

There's code that uses `glob` to find all template files and replaces
the default import alias with whatever is specified during CNA. This
does so without excluding fonts, and so we're unintentionally corrupting
these `woff` files.

This wasn't a problem in previous versions because we didn't use
`localFont` in the default template, just `Inter`. The files were
technically still being corrupted it just never manifested unless you
went to actually use them.

This is a quick fix to introduce minimal changes but ideally in a
follow-up we should figure out a better solution for replacing aliases,
ie by using an allowlist rather than an exclude list.

h/t to @lubieowoce for the thorough test cases

Fixes #69748

---------

Co-authored-by: Janka Uryga <lolzatu2@gmail.com>
lubieowoce added a commit that referenced this issue Sep 9, 2024
@ztanner @lubieowoce
create-next-app: fix font file corruption when using import alias (#6…
4bd3849 
…9806)

There's code that uses `glob` to find all template files and replaces
the default import alias with whatever is specified during CNA. This
does so without excluding fonts, and so we're unintentionally corrupting
these `woff` files.

This wasn't a problem in previous versions because we didn't use
`localFont` in the default template, just `Inter`. The files were
technically still being corrupted it just never manifested unless you
went to actually use them.

This is a quick fix to introduce minimal changes but ideally in a
follow-up we should figure out a better solution for replacing aliases,
ie by using an allowlist rather than an exclude list.

h/t to @lubieowoce for the thorough test cases

Fixes #69748

---------

Co-authored-by: Janka Uryga <lolzatu2@gmail.com>
@Frexuz
Copy link

Frexuz commented Sep 10, 2024 •
edited
Loading

Looks like it was backported to 14.2.9, but i still have the same error

image

image

I have also tried to remove ./next folder 🤔


  "dependencies": {
    "next": "14.2.9",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-select": "5.8.0"
  },
  "devDependencies": {
    "@playwright/test": "1.47.0",
    "@storybook/addon-essentials": "8.2.9",
    "@storybook/addon-interactions": "8.2.9",
    "@storybook/addon-links": "8.2.9",
    "@storybook/addon-onboarding": "8.2.9",
    "@storybook/blocks": "8.2.9",
    "@storybook/nextjs": "8.2.9",
    "@storybook/react": "8.2.9",
    "@storybook/test": "8.2.9",
    "@types/node": "22.5.4",
    "@types/react": "18.3.5",
    "@types/react-dom": "18.3.0",
    "eslint": "8.56.0",
    "eslint-config-next": "14.2.9",
    "eslint-config-prettier": "9.1.0",
    "eslint-plugin-10x": "1.5.2",
    "eslint-plugin-prettier": "5.2.1",
    "eslint-plugin-simple-import-sort": "12.1.1",
    "eslint-plugin-storybook": "0.8.0",
    "eslint-plugin-typescript-sort-keys": "3.2.0",
    "postcss": "8.4.45",
    "prettier": "3.3.3",
    "storybook": "8.2.9",
    "tailwindcss": "3.4.1",
    "typescript": "5.5.4"
  }

Edit

My bad, I had to do a new create-next-app and copy the new font files over, not just updating the package version.

🎉 👌

@github-actions GitHub Actions
Copy link
Contributor

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Sep 26, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
bug Issue was opened via the bug report template. create-next-app Related to our CLI tool for quickly starting a new Next.js application. locked
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

create-next-app: fix font file corruption when using import alias vercel/next.js
2 participants
@Frexuz @chris-garrett