Support Next 13

[bitabs]

What do you want and why?

Please support Next 13 as Vercel deployment fails due to the following error: The "target" property is no longer supported in next.config.js.. I believe the withBlitz({...}) maps config from Next 12 which has target that is deprecated in Next 13.

Possible implementation(s)

Bump Next 12 to 13

Additional context

[dillondotzip]

@bitabs Ya you're probably right. Will mark this as ready to work on.

[bitabs]

@dillonraphael Sorry - do we have an ETA on this? It's a blocker for us unfortunately 😞

[datner]

@bitabs
as a patch, for now do something like

const config = withBlitz({...stuff})
delete config.target
module.exports = config

it should work

[bitabs]

That's not a bad shout @datner 😅. Works for the time being 🙏🏻

[blakeley]

@bitabs as a patch, for now do something like

const config = withBlitz({...stuff})
delete config.target
module.exports = config

it should work

Thanks for the suggestion! I tried this and I'm still getting the same error as before, unfortunately. I also tried it in a fresh blitz app and got the same outcome. Do you have an example blitz app of this patch working?

[datner]

@blakeley
idk what to tell you, the delete reserved word removes the property from the js object.
If you're still getting the same error then either the deletion missed timing or something else is still setting (re-setting?) that property..

either that or your js runtime is broken (which i doubt hahahah)

[bitabs]

If your running it via Vercel, be sure to invalidate your cache deployment. @blakeley

[osarogie]

Adding reactStrictMode: true, to next.config.js fixed the issue for me

[blakeley]

I ran it with vercel --force to invalidate the cache build, but got the same error.

The last few lines of my next.config.js file are:

delete config.target
console.log(config)
module.exports = config

And the vercel logs show the following:

{
webpack: [Function: webpack],
images: {
domains: [ 'ucarecdn.com', <redacted> ],
loader: 'custom'
},
pageExtensions: [ 'ts', 'tsx', 'js', 'jsx' ],
experimental: { swcMinify: true },
reactStrictMode: true,
output: 'standalone',
redirects: [AsyncFunction: redirects],
onDemandEntries: { maxInactiveAge: 3600000 }
}

which suggests that target was successfully deleted.

How could target possibly still be defined given this output? Is there somewhere else that I should be checking?

[tordans]

Current info on this…

• feature: Next 13 App directory #4079 & https://discord.com/channels/802917734999523368/1075462262363533353/1075462266914353212
• Next 13 App Directory / Server Components #4070

---

Is there anything in this ticket that is not covered by the PR and ticket linke above? – I think it best to close this and maybe create separate tickets for open issues or add it to the todo list in #4070.

[FlorianWendelborn]

@tordans what's missing for me personally is an overview about if we can finally upgrade to next 13. E.g. a documentation entry for migrating

Note that upgrading to next 13 doesn't imply everything must work. For example, I'm not concerned about the optional/experimental app folder personally.

I'd just like to have some sort of official statement/docs entry that upgrading to next 13 is safe and/or recommended even if there's some small caveats like "don't use app folder for now"

[dzcpy]

app folder is a very cool feature though. Hopefully Blitz can support it soon

[flybayer]

closed in #4079

[siddharthsharma94]

I ran it with vercel --force to invalidate the cache build, but got the same error.

The last few lines of my next.config.js file are:

delete config.target
console.log(config)
module.exports = config

And the vercel logs show the following:

{
webpack: [Function: webpack],
images: {
domains: [ 'ucarecdn.com', <redacted> ],
loader: 'custom'
},
pageExtensions: [ 'ts', 'tsx', 'js', 'jsx' ],
experimental: { swcMinify: true },
reactStrictMode: true,
output: 'standalone',
redirects: [AsyncFunction: redirects],
onDemandEntries: { maxInactiveAge: 3600000 }
}

which suggests that target was successfully deleted.

How could target possibly still be defined given this output? Is there somewhere else that I should be checking?

did you ever figure this out? still running into the same issue @blakeley

[ShaharIlany]

Same here, can't deploy Next 13 app to Vercel (Both pages dir and app dir doesn't works).

Log from vercel.com below:

[23:01:22.623] Running build in Washington, D.C., USA (East) – iad1
[23:01:22.668] Cloning github.com/... (Branch: main, Commit: ...)
[23:01:22.973] Previous build cache not available
[23:01:23.123] Cloning completed: 454.062ms
[23:01:23.267] Running "vercel build"
[23:01:23.829] Vercel CLI 28.18.3
[23:01:24.134] Installing dependencies...
[23:01:24.494] yarn install v1.22.17
[23:01:24.587] [1/4] Resolving packages...
[23:01:25.111] [2/4] Fetching packages...
[23:02:10.586] [3/4] Linking dependencies...
[23:02:10.588] warning " > @blitzjs/[email protected]" has unmet peer dependency "@tanstack/[email protected]".
[23:02:10.591] warning "blitz > [email protected]" has unmet peer dependency "@babel/preset-env@^7.1.6".
[23:02:10.591] warning "blitz > ink > [email protected]" has incorrect peer dependency "react@^17.0.2".
[23:02:10.602] warning " > @testing-library/[email protected]" has incorrect peer dependency "react@^16.9.0 || ^17.0.0".
[23:02:10.602] warning " > @typescript-eslint/[email protected]" has unmet peer dependency "@typescript-eslint/parser@^5.0.0".
[23:02:10.603] warning " > @vitejs/[email protected]" has unmet peer dependency "vite@^3.0.0".
[23:02:10.606] warning " > [email protected]" has unmet peer dependency "vite@>2.0.0-0".
[23:02:32.578] [4/4] Building fresh packages...
[23:02:34.017] Done in 69.53s.
[23:02:34.051] Detected Next.js version: 13.2.4
[23:02:34.054] Running "yarn run build"
[23:02:34.312] yarn run v1.22.17
[23:02:34.366] $ blitz build
[23:02:34.498] Loaded env from /vercel/path0/.env
[23:02:34.733] ✔ Routes manifest was successfully generated
[23:02:35.525] 
[23:02:35.526] > Build error occurred
[23:02:35.528] Error: The "target" property is no longer supported in next.config.js.
[23:02:35.528] See more info here https://nextjs.org/docs/messages/deprecated-target-config
[23:02:35.528]     at Object.loadConfig [as default] (/vercel/path0/node_modules/next/dist/server/config.js:121:19)
[23:02:35.529]     at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
[23:02:35.529]     at async /vercel/path0/node_modules/next/dist/build/index.js:78:28
[23:02:35.529]     at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
[23:02:35.529]     at async Object.build [as default] (/vercel/path0/node_modules/next/dist/build/index.js:73:29)
[23:02:35.554] error Command failed with exit code 1.
[23:02:35.555] info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
[23:02:35.577] Error: Command "yarn run build" exited with 1
[23:02:35.861] BUILD_UTILS_SPAWN_1: Command "yarn run build" exited with 1

[Siarune]

I'm still having this problem after moving to the latest version of blitz

Blitz version: 2.0.0-beta.27 (global)
Blitz version: 2.0.0-beta.27 (local)
Linux 6.3 | linux-x64 | Node: v20.2.0


 Package manager: pnpm

  System:
    OS: Linux 6.3 Garuda Linux
    CPU: (4) x64 Intel(R) Core(TM) i5-6300U CPU @ 2.40GHz
    Memory: 6.26 GB / 11.56 GB
    Shell: 0.80.0 - /bin/nu
  Binaries:
    Node: 20.2.0 - /usr/bin/node
    Yarn: Not Found
    npm: 8.19.2 - /usr/bin/npm
  npmPackages:
    @blitzjs/auth: 2.0.0-beta.27 => 2.0.0-beta.27 
    @blitzjs/next: 2.0.0-beta.27 => 2.0.0-beta.27 
    @blitzjs/rpc: 2.0.0-beta.27 => 2.0.0-beta.27 
    @prisma/client: 4.6.1 => 4.6.1 
    blitz: 2.0.0-beta.27 => 2.0.0-beta.27 
    next: ^13.4.3 => 13.4.3 
    prisma: 4.6.1 => 4.6.1 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: ^4.9.5 => 4.9.5

Vercel is still giving me the same error

> Build error occurred
Error: The "target" property is no longer supported in next.config.js.
See more info here https://nextjs.org/docs/messages/deprecated-target-config
    at loadConfig (/vercel/path0/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/next/dist/server/config.js:541:19)
    at async Span.traceAsyncFn (/vercel/path0/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/next/dist/trace/trace.js:103:20)
    at async /vercel/path0/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/next/dist/build/index.js:150:28
    at async Span.traceAsyncFn (/vercel/path0/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/next/dist/trace/trace.js:103:20)
    at async build (/vercel/path0/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/next/dist/build/index.js:145:29)
 ELIFECYCLE  Command failed with exit code 1.
Error: Command "pnpm run build" exited with 1

Here's my next.config.js, and the build fails with and without the delete line

// @ts-check
const { withBlitz } = require("@blitzjs/next")

/**
 * @type {import('@blitzjs/next').BlitzConfig}
 **/
const config = {}
delete config.target

module.exports = withBlitz(config)

[datner]

@Siarune

Here's my next.config.js, and the build fails with and without the delete line

Your're not deleting the target though, you're doing it too early 😅

// @ts-check
const { withBlitz } = require("@blitzjs/next")

const config = withBlitz({}) // withBlitz adds the 'target'
delete config.target

module.exports = config

Not sure if it'll even help, but at least you'll delete the target correctly

[jhonnymichel]

In case someone is still having this issue even after updating to the latest blitz/next versions, for me the issue was that I was still using the blitz preset in the project settings at Vercel's dashboard. Just change it to next and you're good to go.