vercel / vercel/next.js

Provide an esm build for `@next/env`

Open
#68,091 1 comment 27 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug linear: next
Dominant language
JavaScript
Stars
142k
Forks
32.5k
Avg merge
2d 14h
Merged PRs (30d)
351

Description

Link to the code that reproduces this issue

https://github.com/AhmedBaset/next-env-repro-esm

To Reproduce
  1. Run node script.js
  2. Run node script.mjs
Current vs. Expected behavior

@next/env doesn't work correctly with esm.

This cjs works as expected

require("@next/env").loadEnvConfig(process.cwd());
console.log(process.env.TEST);

But this doesn't

import { loadEnvConfig } from "@next/env";
loadEnvConfig(process.cwd());

console.log(process.env.TEST);

It throws:

import { loadEnvConfig } from "@next/env";
         ^^^^^^^^^^^^^
SyntaxError: Named export 'loadEnvConfig' not found. The requested module '@next/env' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@next/env';
const { loadEnvConfig } = pkg;

Let's try both cjs and esm in REPL

Welcome to Node.js v20.12.2.
Type ".help" for more information.

> require("@next/env")
Object [Module] {
  initialEnv: [Getter],
  updateInitialEnv: [Getter],
  processEnv: [Getter],
  resetEnv: [Getter],
  loadEnvConfig: [Getter]
}

> require("@next/env").default
undefined

> await import("@next/env")
[Module: null prototype] {
  default: Object [Module] {
    initialEnv: [Getter],
    updateInitialEnv: [Getter],
    processEnv: [Getter],
    resetEnv: [Getter],
    loadEnvConfig: [Getter]
  }
}
Provide environment information
Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Home Single Language
  Available memory (MB): 15774
  Available CPU cores: 12
Binaries:
  Node: 20.12.2
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.4 // There is a newer version (14.2.5) available, upgrade recommended!
  eslint-config-next: N/A
  react: 18.3.0-canary-14898b6a9-20240318
  react-dom: 18.3.0-canary-14898b6a9-20240318
  typescript: 5.4.5
Next.js Config:
  output: N/A
Which area(s) are affected? (Select all that apply)

@next/env

Which stage(s) are affected? (Select all that apply)

ESM modules

Additional context

No response

As a stopgap workaround, we use esm/cjs conditionally

import nextEnv from "@next/env";
import type { Config } from "drizzle-kit";

if (nextEnv && "loadEnvConfig" in nextEnv) {
  nextEnv.loadEnvConfig(process.cwd());
} else {
  // eslint-disable-next-line
  require("@next/env").loadEnvConfig(process.cwd());
}

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the reproduction repository at https://github.com/AhmedBaset/next-env-repro-esm and run node script.js and node script.mjs to compare CommonJS and ESM behavior. Investigate the @next/env package entry points and build configuration; done means the named ESM import of loadEnvConfig works while the existing CommonJS usage continues to work.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, nextjs, nodejs
Domain
build-system
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.