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.

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

feat(cli): add warning and docs for react-19 and Next.Js combined #7660

Merged
merged 6 commits into from
Oct 24, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 30 additions & 2 deletions packages/@sanity/cli/src/actions/init-project/initProject.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,13 @@ import path from 'node:path'

import {type DatasetAclMode, type SanityProject} from '@sanity/client'
import {type Framework} from '@vercel/frameworks'
import {type detectFrameworkRecord} from '@vercel/fs-detectors'
import dotenv from 'dotenv'
import execa, {type CommonOptions} from 'execa'
import {deburr, noop} from 'lodash'
import pFilter from 'p-filter'
import resolveFrom from 'resolve-from'
import semver from 'semver'
import {evaluate, patch} from 'silver-fleece'
import which from 'which'

Expand Down Expand Up @@ -55,6 +57,7 @@ import {
promptForNextTemplate,
promptForStudioPath,
} from './prompts/nextjs'
import {readPackageJson} from './readPackageJson'
import {reconfigureV2Project} from './reconfigureV2Project'
import templates from './templates'
import {
Expand Down Expand Up @@ -110,7 +113,9 @@ export interface ProjectOrganization {
// eslint-disable-next-line max-statements, complexity
export default async function initSanity(
args: CliCommandArguments<InitFlags>,
context: CliCommandContext & {detectedFramework: Framework | null},
context: CliCommandContext & {
detectedFramework: Awaited<ReturnType<typeof detectFrameworkRecord>>
},
): Promise<void> {
const {
output,
Expand All @@ -128,6 +133,8 @@ export default async function initSanity(
const cliFlags = args.extOptions
const unattended = cliFlags.y || cliFlags.yes
const print = unattended ? noop : output.print
const warn = (msg: string) => output.warn(chalk.yellow.bgBlack(msg))

const intendedPlan = cliFlags['project-plan']
const intendedCoupon = cliFlags.coupon
const reconfigure = cliFlags.reconfigure
Expand Down Expand Up @@ -298,7 +305,8 @@ export default async function initSanity(
}

let initNext = false
if (detectedFramework?.slug === 'nextjs') {
const isNextJs = detectedFramework?.slug === 'nextjs'
if (isNextJs) {
initNext = await prompt.single({
type: 'confirm',
message:
Expand Down Expand Up @@ -327,6 +335,26 @@ export default async function initSanity(
// Ensure we are using the output path provided by user
outputPath = answers.outputPath

if (isNextJs) {
const packageJson = readPackageJson(`${outputPath}/package.json`)
const reactVersion = packageJson?.dependencies?.react

if (reactVersion) {
const isUsingReact19 = semver.coerce(reactVersion)?.major === 19
const isUsingNextJs15 = semver.coerce(detectedFramework?.detectedVersion)?.major === 15

if (isUsingNextJs15 && isUsingReact19) {
warn('╭────────────────────────────────────────────────────────────╮')
warn('│ │')
warn('│ It looks like you are using Next.js 15 and React 19 │')
warn('│ Please read our compatibility guide. │')
warn('│ https://www.sanity.io/help/react-19 │')
warn('│ │')
warn('╰────────────────────────────────────────────────────────────╯')
}
}
}

if (initNext) {
const useTypeScript = unattended ? true : await promptForTypeScript(prompt)
trace.log({step: 'useTypeScript', selectedOption: useTypeScript ? 'yes' : 'no'})
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import fs from 'node:fs'
pedrobonamin marked this conversation as resolved.
Show resolved Hide resolved

import {type PackageJson} from '../../types'

/**
* Read the `package.json` file at the given path
*
* @param filePath - Path to package.json to read
* @returns The parsed package.json
*/
export function readPackageJson(filePath: string): PackageJson | undefined {
try {
// eslint-disable-next-line no-sync
return JSON.parse(fs.readFileSync(filePath, 'utf8'))
} catch (err) {
return undefined
}
}
Loading