[turborepo] with-nextjs example - outdated next.config.js

[bibblebabl]

What version of Turborepo are you using?

1.7.0

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

Yarn v1

What operating system are you using?

Mac

Describe the Bug

Running yarn build in the repo we are getting following output:

➜  with-docker git:(main) yarn build
yarn run v1.22.19
$ turbo run build
• Packages in scope: api, eslint-config-custom, eslint-config-custom-server, jest-presets, logger, tsconfig, ui, web
• Running build in 8 packages
• Remote caching disabled
web:build: cache miss, executing b34dec01510f1d21
logger:build: cache hit, replaying output 4e5a1d77328cdb6f
logger:build: $ tsc
api:build: Skipping cache check for api#build, outputs have not changed since previous run.
api:build: cache hit, replaying output 6ca19da0ceb56e5f
api:build: $ tsc
web:build: $ next build
web:build: warn  - Invalid next.config.js options detected:
web:build:   - The root value has an unexpected property, transpilePackages, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, staticPageGenerationTimeout, swcMinify, trailingSlash, typescript, useFileSystemPublicRoutes, webpack).
web:build:
web:build: See more info here: https://nextjs.org/docs/messages/invalid-next-config
web:build: warn  - You have enabled experimental feature (outputFileTracingRoot) in next.config.js.
web:build: warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
web:build:
web:build: info  - Linting and checking validity of types...
web:build: info  - Creating an optimized production build...
web:build: Failed to compile.
web:build:
web:build: ../../packages/ui/Button.tsx
web:build: Module parse failed: The keyword 'interface' is reserved (3:0)
web:build: You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
web:build: | import * as React from "react";
web:build: |
web:build: > interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
web:build: |   children: React.ReactNode;
web:build: | }
web:build:
web:build: Import trace for requested module:
web:build: ../../packages/ui/Button.tsx
web:build: ../../packages/ui/index.tsx
web:build:
web:build:
web:build: > Build failed because of webpack errors
web:build: error Command failed with exit code 1.
web:build: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
web:build: ERROR: command finished with error: command (/Users/igorbelogurov/code/with-docker/apps/web) yarn run build exited (1)

Expected Behavior

All with-nextjs examples are using outdated next.config.js.

Instead of:

module.exports = {
  transpilePackages: ["ui"],
  experimental: {},
};

Need to refactor to this:

module.exports = {
  experimental: {
    transpilePackages: ["ui"],
  },
};

To Reproduce

Clone any nextjs example and try to build it.

Reproduction Repo

No response

[tknickman]

This should have been fixed with #3167

Can you make sure you're using next@latest?

This is no longer an experimental config option.

[bibblebabl]

This should have been fixed with #3167

Can you make sure you're using next@latest?

This is no longer an experimental config option.

Hm. Here is the output 🤔

➜  code npx degit vercel/turbo/examples/with-docker with-docker-example
> cloned vercel/turbo#HEAD to with-docker-example
➜  code cd with-docker-example
➜  with-docker-example yarn install
yarn install v1.22.19
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
[3/5] 🚚  Fetching packages...
[4/5] 🔗  Linking dependencies...
warning "eslint-config-custom > eslint-config-prettier@8.5.0" has unmet peer dependency "eslint@>=7.0.0".
warning "eslint-config-custom > eslint-plugin-react@7.28.0" has unmet peer dependency "eslint@^3 || ^4 || ^5 || ^6 || ^7 || ^8".
warning "eslint-config-custom > eslint-config-turbo@0.0.4" has unmet peer dependency "eslint@^7.23.0 || ^8.0.0".
warning "eslint-config-custom > eslint-config-turbo > eslint-plugin-turbo@0.0.4" has unmet peer dependency "eslint@^7.23.0 || ^8.0.0".
warning "eslint-config-custom > eslint-config-next@13.1.4" has unmet peer dependency "eslint@^7.23.0 || ^8.0.0".
warning "eslint-config-custom > eslint-config-next > eslint-plugin-import@2.26.0" has unmet peer dependency "eslint@^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8".
warning "eslint-config-custom > eslint-config-next > eslint-plugin-jsx-a11y@6.6.1" has unmet peer dependency "eslint@^3 || ^4 || ^5 || ^6 || ^7 || ^8".
warning "eslint-config-custom > eslint-config-next > eslint-plugin-react@7.31.11" has unmet peer dependency "eslint@^3 || ^4 || ^5 || ^6 || ^7 || ^8".
warning "eslint-config-custom > eslint-config-next > eslint-plugin-react-hooks@4.6.0" has unmet peer dependency "eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0".
warning "eslint-config-custom > eslint-config-next > eslint-import-resolver-typescript@3.5.3" has unmet peer dependency "eslint@*".
warning "eslint-config-custom > eslint-config-next > @typescript-eslint/parser@5.48.2" has unmet peer dependency "eslint@^6.0.0 || ^7.0.0 || ^8.0.0".
warning "eslint-config-custom > eslint-config-next > @typescript-eslint/parser > @typescript-eslint/typescript-estree > tsutils@3.21.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
warning "workspace-aggregator-1c784d45-4b7b-4787-9d90-9e8d495a3e5c > jest-presets > ts-jest@26.5.6" has unmet peer dependency "jest@>=26 <27".
warning "workspace-aggregator-1c784d45-4b7b-4787-9d90-9e8d495a3e5c > jest-presets > ts-jest@26.5.6" has unmet peer dependency "typescript@>=3.8 <5.0".
[5/5] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 5.13s.
➜  with-docker-example cat apps/web/package.json
{
  "name": "web",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "lint": "next lint",
    "start": "next start"
  },
  "dependencies": {
    "next": "latest",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "ui": "*"
  },
  "devDependencies": {
    "@types/node": "^17.0.12",
    "@types/react": "^18.0.22",
    "@types/react-dom": "^18.0.7",
    "eslint": "7.32.0",
    "eslint-config-custom": "*",
    "tsconfig": "*",
    "typescript": "^4.5.3"
  }
}
➜  with-docker-example

[tknickman]

Looks like we missed a lock, PR is up to fix the example, but in the meantime this can be fixed in the with-docker example by running yarn add next@latest in apps/web