From 6927c506a5aa0f1c8fb445ffe7591c446605facf Mon Sep 17 00:00:00 2001 From: Martijn Russchen Date: Fri, 19 Dec 2025 17:26:47 +0100 Subject: [PATCH 1/3] fix: resolve webpack warning for optional date-fns-tz dependency MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Use __non_webpack_require__ to load the optional date-fns-tz module. This tells webpack to use the native Node.js require at runtime instead of trying to bundle/analyze the module, eliminating the "Critical dependency: the request of a dependency is an expression" warning. Fixes #6181 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- src/date_utils.ts | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/src/date_utils.ts b/src/date_utils.ts index 2d28949e1..293d083f9 100644 --- a/src/date_utils.ts +++ b/src/date_utils.ts @@ -99,6 +99,10 @@ export function __setDateFnsTzNull(): void { dateFnsTzLoadAttempted = true; } +// Declare webpack's special require function that bypasses bundling +// This is used to avoid webpack warnings for optional dependencies +declare const __non_webpack_require__: typeof require | undefined; + /** * Attempts to load date-fns-tz module. * Returns null if the module is not installed. @@ -111,13 +115,15 @@ function getDateFnsTz(): DateFnsTz | null { dateFnsTzLoadAttempted = true; try { - // Dynamic require for date-fns-tz - // Use a variable to prevent webpack from statically analyzing the require - // and showing warnings when the optional dependency is not installed - // See: https://github.com/Hacker0x01/react-datepicker/issues/6154 - const dateFnsTzModuleName = "date-fns-tz"; + // Use __non_webpack_require__ to tell webpack to use native require + // and avoid bundling warnings for this optional dependency + // See: https://github.com/Hacker0x01/react-datepicker/issues/6181 // eslint-disable-next-line @typescript-eslint/no-require-imports - dateFnsTz = require(dateFnsTzModuleName) as DateFnsTz; + const requireFn = + typeof __non_webpack_require__ !== "undefined" + ? __non_webpack_require__ + : require; + dateFnsTz = requireFn("date-fns-tz") as DateFnsTz; } catch { /* istanbul ignore next - only executes when date-fns-tz is not installed */ dateFnsTz = null; From b06237b4898defb461bdb1e0f351d760ddb50079 Mon Sep 17 00:00:00 2001 From: Martijn Russchen Date: Fri, 19 Dec 2025 17:36:11 +0100 Subject: [PATCH 2/3] test: add coverage for __non_webpack_require__ branch MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds a test that simulates a webpack environment by defining __non_webpack_require__ globally, ensuring the branch that uses webpack's native require bypass is covered. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- src/test/timezone_test.test.tsx | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/src/test/timezone_test.test.tsx b/src/test/timezone_test.test.tsx index c9819f15d..4057786ba 100644 --- a/src/test/timezone_test.test.tsx +++ b/src/test/timezone_test.test.tsx @@ -761,3 +761,31 @@ describe("Timezone fallback behavior (when date-fns-tz is not installed)", () => consoleSpy.mockRestore(); }); }); + +describe("Webpack __non_webpack_require__ support", () => { + beforeEach(() => { + __resetDateFnsTzCache(); + }); + + afterEach(() => { + // Clean up the global + // @ts-expect-error - cleaning up test global + delete globalThis.__non_webpack_require__; + __resetDateFnsTzCache(); + }); + + it("should use __non_webpack_require__ when available in webpack environment", () => { + const testDate = new Date("2024-06-15T12:00:00Z"); + + // Simulate webpack environment by defining __non_webpack_require__ + // @ts-expect-error - simulating webpack global + globalThis.__non_webpack_require__ = require; + + // This should use __non_webpack_require__ and successfully load date-fns-tz + const result = toZonedTime(testDate, "America/New_York"); + + // Should convert the date (not return original), proving date-fns-tz loaded + expect(result).toBeInstanceOf(Date); + expect(result.getHours()).toBe(8); // 12:00 UTC = 08:00 EDT + }); +}); From f492f037b5a61b5e10e61be98e6f4061bea6ad3d Mon Sep 17 00:00:00 2001 From: Martijn Russchen Date: Mon, 5 Jan 2026 12:04:57 +0100 Subject: [PATCH 3/3] fix: handle ESM environments where require is not available (Vite) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Added a check for `typeof require !== "undefined"` before attempting to use require(). This prevents runtime errors in Vite and other ESM-only bundlers where require is not polyfilled. Note: Vite users who want timezone support will need to configure their bundler to pre-bundle date-fns-tz. See issue #6204 for details. Fixes #6204 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- src/date_utils.ts | 14 ++++++++++++-- src/test/timezone_test.test.tsx | 5 +++++ 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/date_utils.ts b/src/date_utils.ts index 293d083f9..7ed5de367 100644 --- a/src/date_utils.ts +++ b/src/date_utils.ts @@ -118,12 +118,22 @@ function getDateFnsTz(): DateFnsTz | null { // Use __non_webpack_require__ to tell webpack to use native require // and avoid bundling warnings for this optional dependency // See: https://github.com/Hacker0x01/react-datepicker/issues/6181 + // + // For Vite and other ESM-only bundlers, require is not available. + // In those environments, users need to configure their bundler to + // pre-bundle date-fns-tz or use the optimizeDeps option. + // See: https://github.com/Hacker0x01/react-datepicker/issues/6204 // eslint-disable-next-line @typescript-eslint/no-require-imports const requireFn = typeof __non_webpack_require__ !== "undefined" ? __non_webpack_require__ - : require; - dateFnsTz = requireFn("date-fns-tz") as DateFnsTz; + : typeof require !== "undefined" + ? require + : /* istanbul ignore next - only executes in ESM-only environments like Vite */ null; + + if (requireFn) { + dateFnsTz = requireFn("date-fns-tz") as DateFnsTz; + } } catch { /* istanbul ignore next - only executes when date-fns-tz is not installed */ dateFnsTz = null; diff --git a/src/test/timezone_test.test.tsx b/src/test/timezone_test.test.tsx index 4057786ba..032ea69f0 100644 --- a/src/test/timezone_test.test.tsx +++ b/src/test/timezone_test.test.tsx @@ -789,3 +789,8 @@ describe("Webpack __non_webpack_require__ support", () => { expect(result.getHours()).toBe(8); // 12:00 UTC = 08:00 EDT }); }); + +// Note: The Vite ESM environment case (where require is not available) cannot be +// tested in Jest because require is always available in Node.js module scope. +// The code path is covered by an istanbul ignore comment and verified manually +// in actual Vite environments. See: https://github.com/Hacker0x01/react-datepicker/issues/6204