Skip to content

fix: use esm-env instead of import.meta.env.MODE #1770

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 25, 2025
Merged

fix: use esm-env instead of import.meta.env.MODE #1770

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
68a2d5e
fix: use esm-env instead of import.meta.env
teemingc Sep 25, 2025
ec98f6e
fix: remove import.meta.env.MODE
teemingc Sep 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,7 @@
"apexcharts": "^5.3.5",
"clsx": "^2.1.1",
"date-fns": "^4.1.0",
"esm-env": "^1.2.2",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major

🧩 Analysis chain

LGTM on adding esm-env; verify usages are updated and add a changeset

Good call moving away from import.meta.env.MODE. Please:

  • Replace all import.meta.env.MODE checks with import { dev } from 'esm-env' (or prod/test as needed).
  • Add a Changeset (patch) noting the fix for REPL/Playground compatibility.

Run this script to confirm there are no lingering import.meta.env usages and that esm-env is actually imported:

Also verify the chosen version is current:

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "1) Searching for import.meta.env.MODE"
rg -nP -C2 '\bimport\.meta\.env\.MODE\b' || echo "OK: none found"

echo -e "\n2) Searching for any import.meta.env usage"
rg -nP -C2 '\bimport\.meta\.env\b' || echo "OK: none found"

echo -e "\n3) Confirming esm-env imports exist"
rg -nP -C2 "(?:from|import)\\s+['\"]esm-env['\"]|from\\s+['\"]esm-env['\"]" || echo "WARN: no esm-env imports found"

echo -e "\n4) Check for a pending Changeset"
fd -H -t f '.changeset' -E '.changeset/README.md' | wc -l | awk '{print "changeset files:", $1}'

Length of output: 1020

🌐 Web query:

What is the latest version of the npm package "esm-env"?

💡 Result:

Latest version: 1.2.2. [1][2] (npmjs.com)

Citations:

Replace remaining import.meta.env.MODE usage with esm-env and add a changeset

  • In src/lib/theme/themeUtils.ts (line 6), remove the import.meta.env.MODE check and instead import { dev } from 'esm-env' (use prod/test as appropriate).
  • Create a new Changeset (patch) documenting the REPL/Playground compatibility fix.
🤖 Prompt for AI Agents 
In package.json (around line 155) and in src/lib/theme/themeUtils.ts (line 6),
replace the runtime check using import.meta.env.MODE with the esm-env export:
remove any import.meta.env.MODE usage and instead import the appropriate flag
from 'esm-env' (e.g., import { dev } from 'esm-env' — or prod/test if that
matches the intended branch) and use that boolean in the existing conditional
logic; then add a new Changeset (patch) describing the REPL/Playground
compatibility fix (one-line summary and bump type patch) so consumers see the
change.

"flowbite": "^3.1.2",
"tailwind-merge": "^3.3.1",
"tailwind-variants": "^3.1.1"
Expand Down
3 changes: 3 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 2 additions & 4 deletions src/lib/theme/themeUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import { type ThemeConfig } from "$lib";
import type { ClassValue } from "clsx";
import { getContext } from "svelte";
// import { dev } from "$app/environment";
// for svelte users not using sveltekit substitute the above line with the following line
const dev = import.meta.env.MODE === "development";
import { DEV } from "esm-env";

export function getTheme<K extends keyof ThemeConfig>(componentKey: K) {
const theme = getContext<ThemeConfig>("theme");
Expand All @@ -25,7 +23,7 @@ export type Classes<T extends { slots: Record<string, unknown> }> = {
* @param replacements - Optional map of deprecated keys to their replacements (e.g., "divClass" → "div").
*/
export function warnThemeDeprecation(component: string, names: Record<string, unknown>, replacements?: Record<string, unknown>): void {
if (!dev) return;
if (!DEV) return;

const nonEmptyNames = Object.keys(names).filter((name) => names[name]);
if (nonEmptyNames.length === 0) return;
Expand Down