[Bug]: App is not compiling.

[mattveraldi]

Summary

I wanted to contribute to the Italian translation of this website but at the time I am writing this issue it is not possible to compile the app.

I followed the guidelines mentioned in the README.md to fork, clone and run the app on my local environment. The only thing I have different is my node version because engines in package.json are greater than 12. I tried with versions: 20 and 18, both LTS.

I am able to install dependencies with yarn but when I try to run the app with yarn dev I get these compilation errors:

> Ready on http://localhost:3000
- wait compiling /[[...markdownPath]] (client and server)...
- error ./src/components/Layout/Page.tsx
Error:
  × Expression expected
     ╭─[/home/matteoveraldi/dev/it.react.dev/src/components/Layout/Page.tsx:109:1]
 109 │   }
 110 │
 111 │   return (
 112 │     <>
     ·      ─
 113 │       <Seo
 114 │         title={title}
 115 │         titleForTitleTag={meta.titleForTitleTag}
     ╰────

  × Expression expected
     ╭─[/home/matteoveraldi/dev/it.react.dev/src/components/Layout/Page.tsx:117:1]
 117 │         image={`/images/og-` + section + '.png'}
 118 │         searchOrder={searchOrder}
 119 │       />
 120 │       <SocialBanner />
     ·                      ─
 121 │       <TopNav
 122 │         section={section}
 123 │         routeTree={routeTree}
     ╰────

  × Expression expected
     ╭─[/home/matteoveraldi/dev/it.react.dev/src/components/Layout/Page.tsx:125:1]
 125 │       />
 126 │       <div
 127 │         className={cn(
 128 │           hasColumns &&
     ·                      ──
 129 │             'grid grid-cols-only-content lg:grid-cols-sidebar-content 2xl:grid-cols-sidebar-content-toc'
 130 │         )}>
 131 │         {showSidebar && (
     ╰────

  × Expression expected
     ╭─[/home/matteoveraldi/dev/it.react.dev/src/components/Layout/Page.tsx:127:1]
 127 │         className={cn(
 128 │           hasColumns &&
 129 │             'grid grid-cols-only-content lg:grid-cols-sidebar-content 2xl:grid-cols-sidebar-content-toc'
 130 │         )}>
     ·         ─
 131 │         {showSidebar && (
 132 │           <div className="lg:-mt-16">
 133 │             <div className="fixed top-0 py-0 shadow lg:pt-16 lg:sticky start-0 end-0 lg:shadow-none">
     ╰────

Caused by:
    Syntax Error

Import trace for requested module:
./src/components/Layout/Page.tsx
- wait compiling /_error (client and server)...
- error ./src/components/Layout/Page.tsx
Error:
  × Expression expected
     ╭─[/home/matteoveraldi/dev/it.react.dev/src/components/Layout/Page.tsx:109:1]
 109 │   }
 110 │
 111 │   return (
 112 │     <>
     ·      ─
 113 │       <Seo
 114 │         title={title}
 115 │         titleForTitleTag={meta.titleForTitleTag}
     ╰────

  × Expression expected
     ╭─[/home/matteoveraldi/dev/it.react.dev/src/components/Layout/Page.tsx:117:1]
 117 │         image={`/images/og-` + section + '.png'}
 118 │         searchOrder={searchOrder}
 119 │       />
 120 │       <SocialBanner />
     ·                      ─
 121 │       <TopNav
 122 │         section={section}
 123 │         routeTree={routeTree}
     ╰────

  × Expression expected
     ╭─[/home/matteoveraldi/dev/it.react.dev/src/components/Layout/Page.tsx:125:1]
 125 │       />
 126 │       <div
 127 │         className={cn(
 128 │           hasColumns &&
     ·                      ──
 129 │             'grid grid-cols-only-content lg:grid-cols-sidebar-content 2xl:grid-cols-sidebar-content-toc'
 130 │         )}>
 131 │         {showSidebar && (
     ╰────

  × Expression expected
     ╭─[/home/matteoveraldi/dev/it.react.dev/src/components/Layout/Page.tsx:127:1]
 127 │         className={cn(
 128 │           hasColumns &&
 129 │             'grid grid-cols-only-content lg:grid-cols-sidebar-content 2xl:grid-cols-sidebar-content-toc'
 130 │         )}>
     ·         ─
 131 │         {showSidebar && (
 132 │           <div className="lg:-mt-16">
 133 │             <div className="fixed top-0 py-0 shadow lg:pt-16 lg:sticky start-0 end-0 lg:shadow-none">
     ╰────

I tried to fix these myself but I can't find the reason why the compiler is complaining about these lines, I can't see anything wrong with those.

Are you also experiencing the same problem?

Page

https://localhost:3000/

Details

OS: Debian 12 Bookworm NodeJS versions: 18, 20 LTS with Yarn installed.

[4ndrs]

Are you also experiencing the same problem?

I'm unable to reproduce. It compiles on my end without errors after cloning, yarn, then yarn dev.

Node: v16.20.2, v18.19.1, and v20.11.1 Yarn: 1.22.19

[mattia-sanfilippo]

Hi @mattveraldi 👋 Please try now, I solved the conflics which were causing the problem you were facing. Thanks!

[mattveraldi]

It works now, thank you!