Error in new Next.js 15 version

[TheCukitoDev]

I've got an error when I upgraded to Next 15. This is the next.config.ts file I used:

import type { NextConfig } from 'next'

await import('@/env')

const config: NextConfig = {}

And i just received this error:

C:\Users\Gabriel\Workspace\Proyectos\next-blog\next.config.compiled.js:53
await Promise.resolve().then(function() {
^^^^^

SyntaxError: await is only valid in async functions and the top level bodies of modules
    at wrapSafe (node:internal/modules/cjs/loader:1281:20)
    at Module._compile (node:internal/modules/cjs/loader:1321:27)
    at requireFromString (C:\Users\Gabriel\Workspace\Proyectos\next-blog\node_modules\.pnpm\next@15.0.1_@babel+core@7.26.0_@opentelemetry+api@1.9.0_react-dom@19.0.0-rc-69d4b800-20241021_5lakrbqt32k3gsjhjvvzwqmo3u\node_modules\next\dist\build\next-config-ts\require-hook.js:81:7)
    at transpileConfig (C:\Users\Gabriel\Workspace\Proyectos\next-blog\node_modules\.pnpm\next@15.0.1_@babel+core@7.26.0_@opentelemetry+api@1.9.0_react-dom@19.0.0-rc-69d4b800-20241021_5lakrbqt32k3gsjhjvvzwqmo3u\node_modules\next\dist\build\next-config-ts\transpile-config.js:63:51)
    at async loadConfig (C:\Users\Gabriel\Workspace\Proyectos\next-blog\node_modules\.pnpm\next@15.0.1_@babel+core@7.26.0_@opentelemetry+api@1.9.0_react-dom@19.0.0-rc-69d4b800-20241021_5lakrbqt32k3gsjhjvvzwqmo3u\node_modules\next\dist\server\config.js:763:36)
    at async Module.nextDev (C:\Users\Gabriel\Workspace\Proyectos\next-blog\node_modules\.pnpm\next@15.0.1_@babel+core@7.26.0_@opentelemetry+api@1.9.0_react-dom@19.0.0-rc-69d4b800-20241021_5lakrbqt32k3gsjhjvvzwqmo3u\node_modules\next\dist\cli\next-dev.js:189:14)

Node.js v20.15.1
 ELIFECYCLE  Command failed with exit code 1.

I don't know what to do...

[TheCukitoDev]

Now i tried changing the import('@/env') to 'import('@/env.ts')' and now this is the error:

C:\Users\Gabriel\Workspace\Proyectos\next-blog\src\env.ts:1
import { createEnv } from '@t3-oss/env-nextjs'
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (node:internal/modules/cjs/loader:1281:20)
    at Module._compile (node:internal/modules/cjs/loader:1321:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
    at Module.load (node:internal/modules/cjs/loader:1208:32)
    at Module._load (node:internal/modules/cjs/loader:1024:12)
    at Module.require (node:internal/modules/cjs/loader:1233:19)
    at mod.require (C:\Users\Gabriel\Workspace\Proyectos\next-blog\node_modules\.pnpm\next@15.0.1_@babel+core@7.26.0_@opentelemetry+api@1.9.0_react-dom@19.0.0-rc-69d4b800-20241021_5lakrbqt32k3gsjhjvvzwqmo3u\node_modules\next\dist\server\require-hook.js:65:28)
    at require (node:internal/modules/helpers:179:18)
    at C:\Users\Gabriel\Workspace\Proyectos\next-blog\next.config.compiled.js:188:76

Node.js v20.15.1
 ELIFECYCLE  Command failed with exit code 1.

[Sparticuz]

According to https://nextjs.org/docs/app/building-your-application/configuring/typescript#type-checking-nextconfigts , next.config.ts is currently CJS only

[TheCukitoDev]

So what should I do?? Change it to a .js??

[TheCukitoDev]

I tried it changing it to a next.config.mjs and changing the env.ts to env.js and again the error:

C:\Users\Gabriel\Workspace\Proyectos\starter\src\env.js:1
import { createEnv } from "@t3-oss/env-nextjs";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (node:internal/modules/cjs/loader:1281:20)
    at Module._compile (node:internal/modules/cjs/loader:1321:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
    at Module.load (node:internal/modules/cjs/loader:1208:32)
    at Module._load (node:internal/modules/cjs/loader:1024:12)
    at cjsLoader (node:internal/modules/esm/translators:348:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:297:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at async loadConfig (C:\Users\Gabriel\Workspace\Proyectos\starter\node_modules\.pnpm\next@15.0.1_@babel+core@7.26.0_@opentelemetry+api@1.9.0_react-dom@19.0.0-rc-69d4b800-20241021_5lakrbqt32k3gsjhjvvzwqmo3u\node_modules\next\dist\server\config.js:768:36)

Node.js v20.15.1
 ELIFECYCLE  Command failed with exit code 1.

[Sparticuz]

I think until it supports ESM, you'll need to continue using jiti https://env.t3.gg/docs/nextjs#validate-schema-on-build-(recommended)

[TheCukitoDev]

I solved it temporaly by using this code:

import { NextConfig } from "next";

import { createJiti } from "jiti";
import { fileURLToPath } from "url";
const jiti = createJiti(fileURLToPath(import.meta.url));

async function loadEnv() {
	await jiti.import("./src/env.js");
}

loadEnv().catch((e) => {
	console.error(e);
	process.exit(1);
});

const nextConfig: NextConfig = {};

export default withSentryConfig(nextConfig, {
	org: "my-org",
	project: "project",

	silent: !process.env.CI,

	widenClientFileUpload: true,

	reactComponentAnnotation: {
		enabled: true,
	},
});

which also works with sentry

[DimitarY]

Can you give us more information about how you fix it?

[TheCukitoDev]

I just used jiti anc created an async function to be executable. You must use env.js instead of env.ts because if you don't you are going to get many errors and it doesen't make any sense because the typesafety became from zod not from ts.

Also, make sure you have the "type": "module" in your package.json to make it know how to treat files. If you don't you're going to get some other errors.

I have a repo https://github.com/TheCukitoDev/old-starter where you can see it

[Sparticuz]

It seems that maybe 15.0.2 or 15.0.3 fixed next.config.ts to be able to use ESM. I've successfully dropped jiti from my project.

First, rename next.config.js to next.config.ts, then do this

-// @ts-check
-import createJiti from "jiti";
-import { fileURLToPath } from "node:url";
-const jiti = createJiti(fileURLToPath(import.meta.url));
-
-// Import env here to validate during build. Using jiti we can import .ts files :)
-await jiti("./src/env");
-
-/**
- * @type {import("next").NextConfig}
- **/
+import "~/env";

Also, make sure you are using esm exports instead of module.export. Then you can drop jiti from your package.json

Also, see #282

[juliusmarminge]

if you don't have type: module, all .js files will be CJS which cannot use import. Either use .mjs or set type: module in your package.json