[turborepo] Dockerizing - @types/react version mismatch issue

[lunaticscode]

What version of Turborepo are you using?

turbo 1.7.2

What package manager are you using / does the bug impact?

Yarn v1

What operating system are you using?

Mac

Describe the Bug

If proceed with dockerizing after proceeding with the turborepo installation guide npx create-turbo@latest on the current official website, an error occurs due to @types/react version mismatch.

/apps/web/

  "devDependencies": {
    "@types/react": "^18.0.22",
  }

/packages/ui/package.json

"devDependencies": {
     "@types/react": "^17.0.37",
}

Expected Behavior

Due to this version mismatch, an error occurs while looking for ReactNode in @types/react/index.d.ts.

#22 1.843 web:build: info  - Linting and checking validity of types...
#22 6.933 web:build: Failed to compile.
#22 6.933 web:build: 
#22 6.933 web:build: ./pages/_app.tsx:3:11
#22 6.933 web:build: Type error: 'Component' cannot be used as a JSX component.
#22 6.933 web:build:   Its element type 'Component<any, any, any> | ReactElement<any, any> | null' is not a valid JSX element.
#22 6.933 web:build:     Type 'Component<any, any, any>' is not assignable to type 'Element | ElementClass | null'.
#22 6.933 web:build:       Type 'Component<any, any, any>' is not assignable to type 'ElementClass'.
#22 6.933 web:build:         The types returned by 'render()' are incompatible between these types.
#22 6.933 web:build:           Type 'React.ReactNode' is not assignable to type 'import("/app/apps/web/node_modules/@types/react/index").ReactNode'.
#22 6.933 web:build:             Type '{}' is not assignable to type 'ReactNode'.
#22 6.933 web:build: 
#22 6.933 web:build:   1 | import type { AppProps } from "next/app";
#22 6.934 web:build:   2 | function WebApp({ Component, pageProps }: AppProps) {
#22 6.934 web:build: > 3 |   return <Component {...pageProps} />;
#22 6.934 web:build:     |           ^
#22 6.934 web:build:   4 | }
#22 6.934 web:build:   5 | export default WebApp;
#22 6.934 web:build:   6 | 
#22 7.008 web:build: error Command failed with exit code 1.

Need to update https://github.com/vercel/turbo/blob/main/examples/basic repository

To Reproduce

1. Install turborepo files.

npx create-turbo@latest

2. Make _app.tsx file in /apps/web/pages

import type { AppProps } from "next/app";
function WebApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}
export default WebApp;

2. Make Dockerfile.web. (https://turbo.build/repo/docs/handbook/deploying-with-docker)

FROM node:alpine AS builder
RUN apk add --no-cache libc6-compat
RUN apk update
# Set working directory
WORKDIR /app
RUN yarn global add turbo
COPY . .
RUN turbo prune --scope=web --docker
 
# Add lockfile and package.json's of isolated subworkspace
FROM node:alpine AS installer
RUN apk add --no-cache libc6-compat
RUN apk update
WORKDIR /app
 
# First install the dependencies (as they change less often)
COPY .gitignore .gitignore
COPY --from=builder /app/out/json/ .
COPY --from=builder /app/out/yarn.lock ./yarn.lock
RUN yarn install
 
# Build the project
COPY --from=builder /app/out/full/ .
RUN yarn turbo run build --filter=web...
 
FROM node:alpine AS runner
WORKDIR /app
 
# Don't run production as root
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs
USER nextjs
 
COPY --from=installer /app/apps/web/next.config.js .
COPY --from=installer /app/apps/web/package.json .
 
# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --from=installer --chown=nextjs:nodejs /app/apps/web/.next/standalone ./
COPY --from=installer --chown=nextjs:nodejs /app/apps/web/.next/static ./apps/web/.next/static
 
CMD node apps/web/server.js

3. docker build -t turbowebapp -f Dockerfile.web .

4. Check build log.

Reproduction Repo

No response

[paulwongx]

I think this blog is really helpful as I encounted this exact issue with different dependency versions which broke my whole app. Namely, upgrading @types/react in one workspace broke all the other workspaces. If I did it right from the start, it would've been less of a headache.

The Solution

Essentially.... for dependencies that are global across your app, install it globally so it shows up in your root package.json. For example

$ yarn add next react react-dom -W
$ yarn add -D @tpyes/react @types/node @types/react-dom -W

* The -W flag is needed to force installing in the root since by default it warns you if you don't have the -W flag
** -W is short for --ignore-workspace-root-check

You do not need to add it in the local package.json again. The compiler will look up your monorepo tree and find the root package.json with the dependency and it's version. If you're converted to this method, you can delete the packages in the local package.json and rely on the global version.

For packages that are local to a package, install it with

$ yarn workspace <workspace_name> add <package_name>

# For example
$ yarn workspace @core/ui add framer-motion

This fixes the issue OP mentioned.