timlrx / tailwind-nextjs-starter-blog

This is a Next.js, Tailwind CSS blogging starter template. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.
https://tailwind-nextjs-starter-blog.vercel.app/
MIT License
8.56k stars 1.99k forks source link

After upgrading to version 13.5.3, building fails with errors when using Korean in MDX files #721

Closed korECM closed 11 months ago

korECM commented 11 months ago

Describe the bug

718

As shown in the PR, if you upgrade next.js to version 13.5.3 and use Korean for title in the mdx file inside the data/blog folder, an error occurs during yarn run build.

To Reproduce Steps to reproduce the behavior:

  1. clone that repo or import the project via the npx degit 'timlrx/tailwind-nextjs-starter-blog' command.
  2. install the required dependencies via the yarn command.
  3. Attempt to build next.js using the yarn run build command. You can see that it builds normally.
  4. Change the title in the data/blog/github-markdown-guide.mdx file to markdown guide in Korean.
  5. Try the yarn run build command. The following error occurs.

You can find this issue in the following repo. https://github.com/korECM/tailwind-nextjs-starter-blog/tree/reproduce-bug

$ y run build

successCallback /Users/korecm/Programming/tailwind-nextjs-starter-blog/.contentlayer
(node:20396) ExperimentalWarning: Import assertions are not a stable feature of the JavaScript language. Avoid relying on their current behavior and syntax as those might change in a future version of Node.js.
(Use `node --trace-warnings ...` to show where the warning was created)
(node:20396) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
Local search index generated...
Generated 13 documents in .contentlayer
 ✓ Creating an optimized production build
 ✓ Compiled successfully
   Linting and checking validity of types  . ⚠ TypeScript project references are not fully supported. Attempting to build in incremental mode.
 ✓ Linting and checking validity of types
   Collecting page data  ..SyntaxError: Unexpected token '크', ..."\"\\uB9C8\크\\uB2E4\\"... is not valid JSON
    at JSON.parse (<anonymous>)
    at 6179 (/Users/korecm/Programming/tailwind-nextjs-starter-blog/.next/server/chunks/179.js:1:125)
    at t (/Users/korecm/Programming/tailwind-nextjs-starter-blog/.next/server/webpack-runtime.js:1:128)
    at 3035 (/Users/korecm/Programming/tailwind-nextjs-starter-blog/.next/server/app/blog/[...slug]/page.js:1:4493)
    at Function.t (/Users/korecm/Programming/tailwind-nextjs-starter-blog/.next/server/webpack-runtime.js:1:128)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async collectGenerateParams (/Users/korecm/Programming/tailwind-nextjs-starter-blog/node_modules/next/dist/build/utils.js:858:17)

> Build error occurred
Error: Failed to collect page data for /blog/[...slug]
    at /Users/korecm/Programming/tailwind-nextjs-starter-blog/node_modules/next/dist/build/utils.js:1178:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'Error'
}
   Collecting page data  .%  

Expected behavior I expect it to build normally.

Screenshots image

System Info (if dev / build issue):

Browser Info (if display / formatting issue):

Additional context I'm not a front-end developer, and I lack knowledge about Next.js, so I'm having difficulty resolving this error. I would appreciate it if you could inform me of any additional information needed or point out areas I should look into to solve this issue. Thank you if you can guide me on what to examine for solving this problem.

korECM commented 11 months ago

While testing by replacing the dependencies of Next.js, it appears that starting from version v13.4.20-canary.19, build errors occur.

InhwanCho commented 11 months ago

I have the same issue. Did you solve it using a method other than downgrading the version?

korECM commented 11 months ago

@InhwanCho

I'm still having the same problem, but I've noticed the following: if I disable the minify feature of swc, the build works fine, so I'm assuming it's a problem with the swc version going up.

// next.config.js
module.exports = () => {
    // ...
    swcMinify: false,
    // ...
}
timlrx commented 11 months ago

Thanks for the report, might be worth posting on next.js / swc github issues as well. In the meantime, feel free to downgrade - there are no changes that require 13.5.

korECM commented 11 months ago

I have confirmed that the build issue is resolved starting from v13.5.4-canary.8, which is the Canary version of Next.js. It appears that the issue was resolved with the swc_core version being updated to v0.83.28.

If you are experiencing the same build issue, you can either downgrade Next.js to version 13.4.19 or upgrade to the latest Canary version, v13.5.4-canary.9, which should likely solve the problem.

@timlrx, I'm not sure how this repository manages Next.js versions, but if Next.js version v13.5.4 is officially released, could this blog repository align its Next.js version to v13.5.4? This repository provides an excellent template for starting a blog, and it would be great if Korean users didn't face difficulties due to build errors.

timlrx commented 11 months ago

@korECM thanks for confirming that the latest canary build works. Yes, we will upgrade to the next version when it is out. In the meantime, I will leave this issue here so that others are aware about it and can upgrade to the canary version as a workaround.

timlrx commented 11 months ago

The upgrade should solve the issue. But feel free to re-open if it still persists, thanks!