Turbo

[haydenbleasel]

This pull request includes updates to the dev scripts in various package.json files to enable Turbopack for faster development builds.

Changes to dev scripts:

• apps/_docs/package.json: Updated dev script to include --turbopack option.
• apps/api/package.json: Updated dev script to include --turbopack option.
• apps/app/package.json: Updated dev script to include --turbopack option.
• apps/web/package.json: Updated dev script to include --turbopack option.

Summary by CodeRabbit

• New Features

  • Introduced a new RootLayout component for improved layout management.
  • Enhanced module resolution with new path mappings in TypeScript configuration.

• Improvements

  • Updated development scripts across applications to include the --turbopack flag for better performance.
  • Added several new dependencies across applications to expand functionality, including image processing and module handling capabilities.

• Bug Fixes

  • No specific bug fixes were noted in this release.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
next-forge	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 15, 2024 5:28pm

[haydenbleasel]

api - looks like root layouts are mandatory with turbopack even if there's no pages.

[haydenbleasel]

app is throwing a bunch of external-related errors

app:dev:  ✓ Compiled / in 7.3s
app:dev:  ⚠ ./node_modules/.pnpm/@[email protected][email protected]/node_modules/.prisma/client
app:dev: Package @prisma/client can't be external
app:dev: The request @prisma/client/runtime/library.js matches serverExternalPackages (or the default list).
app:dev: The request could not be resolved by Node.js from the project directory.
app:dev: Packages that should be external need to be installed in the project directory, so they can be resolved from the output files.
app:dev: Try to install it into the project directory by running npm install @prisma/client from the project directory.
app:dev:
app:dev:
app:dev:  ⚠ ./packages/database
app:dev: Package @prisma/client can't be external
app:dev: The request @prisma/client matches serverExternalPackages (or the default list).
app:dev: The request could not be resolved by Node.js from the project directory.
app:dev: Packages that should be external need to be installed in the project directory, so they can be resolved from the output files.
app:dev: Try to install it into the project directory by running npm install @prisma/client from the project directory.
app:dev:
app:dev:
app:dev:  ⚠ ./node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@opentelemetry/instrumentation/build/esm/platform/node
app:dev: Package import-in-the-middle can't be external
app:dev: The request import-in-the-middle matches serverExternalPackages (or the default list).
app:dev: The request could not be resolved by Node.js from the project directory.
app:dev: Packages that should be external need to be installed in the project directory, so they can be resolved from the output files.
app:dev: Try to install it into the project directory by running npm install import-in-the-middle from the project directory.
app:dev:
app:dev:
app:dev:  ⚠ ./node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@opentelemetry/instrumentation/build/esm/platform/node
app:dev: Package import-in-the-middle can't be external
app:dev: The request import-in-the-middle matches serverExternalPackages (or the default list).
app:dev: The request could not be resolved by Node.js from the project directory.
app:dev: Packages that should be external need to be installed in the project directory, so they can be resolved from the output files.
app:dev: Try to install it into the project directory by running npm install import-in-the-middle from the project directory.
app:dev:
app:dev:
app:dev:  ⚠ ./node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@opentelemetry/instrumentation/build/esm/platform/node
app:dev: Package import-in-the-middle can't be external
app:dev: The request import-in-the-middle matches serverExternalPackages (or the default list).
app:dev: The request could not be resolved by Node.js from the project directory.
app:dev: Packages that should be external need to be installed in the project directory, so they can be resolved from the output files.
app:dev: Try to install it into the project directory by running npm install import-in-the-middle from the project directory.
app:dev:

[haydenbleasel]

web is doing the same, but also complaining about content-collections:

web:dev:  ✓ Compiled / in 9.5s
web:dev:  ⨯ ./node_modules/.pnpm/@[email protected]/node_modules/@esbuild/darwin-arm64/README.md
web:dev: Unknown module type
web:dev: This module doesn't have an associated type. Use a known file extension, or register a loader for it.
web:dev:
web:dev: Read more: https://nextjs.org/docs/app/api-reference/next-config-js/turbo#webpack-loaders
web:dev:
web:dev:
web:dev:
web:dev: ./node_modules/.pnpm/@[email protected]/node_modules/@esbuild/darwin-arm64/bin/esbuild
web:dev: Reading source code for parsing failed
web:dev: An unexpected error happened while trying to read the source code to parse: failed to convert rope into string
web:dev:
web:dev: Caused by:
web:dev: - invalid utf-8 sequence of 1 bytes from index 0
web:dev:
web:dev:
web:dev:
web:dev: ./apps/web/app/(home)/components/hero.tsx:3:1
web:dev: Export allPosts doesn't exist in target module
web:dev:   1 | import { Button } from '@repo/design-system/components/ui/button';
web:dev:   2 | import { env } from '@repo/env';
web:dev: > 3 | import { allPosts } from 'content-collections';
web:dev:     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
web:dev:   4 | import { MoveRight, PhoneCall } from 'lucide-react';
web:dev:   5 | import Link from 'next/link';
web:dev:   6 |
web:dev:
web:dev: The export allPosts was not found in module [project]/apps/web/content-collections.ts [app-rsc] (ecmascript).
web:dev: Did you mean to import default?
web:dev: All exports of the module are statically known (It doesn't have dynamic exports). So it's known statically that the requested export doesn't exist.
web:dev:
web:dev:
web:dev:  ⚠ ./node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@opentelemetry/instrumentation/build/esm/platform/node
web:dev: Package import-in-the-middle can't be external
web:dev: The request import-in-the-middle matches serverExternalPackages (or the default list).
web:dev: The request could not be resolved by Node.js from the project directory.
web:dev: Packages that should be external need to be installed in the project directory, so they can be resolved from the output files.
web:dev: Try to install it into the project directory by running npm install import-in-the-middle from the project directory.

[timneutkens]

api - looks like root layouts are mandatory with turbopack even if there's no pages.

Root layout was always required, e.g. for the 404 page which you were requesting there. With Turbopack we can't auto-generate a root layout like it does when running webpack as mentioned in the documentation: https://nextjs.org/docs/architecture/turbopack#unsupported-features

[timneutkens]

but also complaining about content-collections:

This error looks correct, looking at the content-collections.ts file it only has a default export export default defineConfig({ and no allPosts

[timneutkens]

Package <packagename> can't be external are warnings, not errors, that are highlighting cases where packages are being used but are not installed so it can fail when running in production. This was already an issue when you were using webpack, it just never warned you that it was missing. This can be fixed by installing the external packages into the project itself.

[timneutkens]

web:dev:  ⨯ ./node_modules/.pnpm/@[email protected]/node_modules/@esbuild/darwin-arm64/README.md
web:dev: Unknown module type
web:dev: This module doesn't have an associated type. Use a known file extension, or register a loader for it.
web:dev:
web:dev: Read more: https://nextjs.org/docs/app/api-reference/next-config-js/turbo#webpack-loaders
web:dev:
web:dev:
web:dev:
web:dev: ./node_modules/.pnpm/@[email protected]/node_modules/@esbuild/darwin-arm64/bin/esbuild
web:dev: Reading source code for parsing failed
web:dev: An unexpected error happened while trying to read the source code to parse: failed to convert rope into string
web:dev:
web:dev: Caused by:
web:dev: - invalid utf-8 sequence of 1 bytes from index 0

This seems to be caused by importing esbuild somewhere, seems you're running a compiler on code at runtime, which means you're also running eval on untrusted code, sounds unexpected and a potential security vulnerability 🤔

Edit: Did some further digging, it's using mdx-bundler at runtime.

[timneutkens]

Tried to reproduce it by running mdx-bundler but that works fine:

import { bundleMDX } from "mdx-bundler";

const mdxSource = `
---
title: Example Post
published: 2021-02-13
description: This is some description
---

# Wahoo

import Demo from './demo'

Here's a **neat** demo:

<Demo />
`.trim();

export default async function MdxBundler() {
  const result = await bundleMDX({
    source: mdxSource,
    files: {
      "./demo.tsx": `
  import * as React from 'react'
  
  function Demo() {
    return <div>Neat demo!</div>
  }
  
  export default Demo
      `,
    },
  });

  const { code, frontmatter } = result;

  return (
    <div>
      <h1>My MDX Blog</h1>
      <pre>{JSON.stringify(frontmatter, null, " ")}</pre>
      <pre>{code}</pre>
    </div>
  );
}

Only way I can reproduce the error is adding "use client" which causes mdx-bundler to be bundled for the browser and it'll fail on that given that it's not a dependency that works in the browser, so that failure is expected:

[haydenbleasel]

Hey @timneutkens, thanks for taking a look!

1. I've added a root layout, thanks for the link.
2. content-collections refers to the alias, not the file. It's working in webpack.
3. I'll look into installing the external deps, thanks for the info.

[timneutkens]

Wrt 2. I'll take a look at reproducing the alias not applying, might be related to the extends or that a file called content-collections.ts exists in the root of the project.

[coderabbitai[bot]]

📝 Walkthrough

Walkthrough

The changes introduced in this pull request include the addition of a new React component named RootLayout in layout.tsx, which provides a basic structure for rendering children components. Additionally, the package.json files for the api, app, and web applications have been updated to include the --turbopack flag in their respective development scripts. New dependencies have also been added to the app and web applications, while the tsconfig.json for the web application has been modified to include new path mappings for improved module resolution.

Changes

File Path	Change Summary
apps/api/app/layout.tsx	Added new component RootLayout which accepts a children prop and renders basic HTML structure.
apps/api/package.json	Modified next script to include --turbopack flag.
apps/app/package.json	Updated dev script to include --turbopack flag; added dependencies: @prisma/client, import-in-the-middle, require-in-the-middle.
apps/web/package.json	Updated dev script to include --turbopack flag; added dependencies: import-in-the-middle, mdx-bundler, require-in-the-middle, sharp, shiki.
apps/web/tsconfig.json	Added new paths configuration for module resolution: @/*, @repo/*, content-collections.

Possibly related PRs

• #235: The changes in the package.json files across multiple applications (api, app, web) in both the main PR and the retrieved PR involve modifications to the scripts section, specifically the removal of the "lint" script. This indicates a related focus on the build process and script management within the project.

Suggested labels

patch

---

📜 Recent review details

Configuration used: .coderabbit.yaml Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 7af30261249e3c47a9da50ce595e45bb4972a80c and fae303682af5817111a8747a877d165d0567b726.

⛔ Files ignored due to path filters (4)

• docs/faq.mdx is excluded by none and included by none
• packages/typescript-config/nextjs.json is excluded by none and included by none
• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml and included by none
• splash/package.json is excluded by none and included by none

📒 Files selected for processing (5)

• apps/api/app/layout.tsx (1 hunks)
• apps/api/package.json (1 hunks)
• apps/app/package.json (2 hunks)
• apps/web/package.json (2 hunks)
• apps/web/tsconfig.json (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (5)

• apps/api/app/layout.tsx
• apps/api/package.json
• apps/app/package.json
• apps/web/package.json
• apps/web/tsconfig.json

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[haydenbleasel]

@timneutkens All seems to be working now with your recommendations. Feels a bit weird adding dependencies that I'm not directly importing or using + will make it hard to figure out which dependencies are actually needed (can't use depcheck anymore) - is there any other way to deal with this issue?

[TheCukitoDev]

@haydenbleasel I had that error when using the Sentry SDK with turbopack in the new Next 15. It first ask me for the import-in-the-middle when using react 19 RC but when i used the react 18 it asked me for the require-in-the-middle package. You can check the full conversation in https://github.com/getsentry/sentry-javascript/issues/8105

[github-actions[bot]]

:rocket: PR was released in v2.15.0 :rocket: