From 6587d34e4b422eee0c10ebe2b54d779418e7c1c5 Mon Sep 17 00:00:00 2001 From: Ryan Clark Date: Fri, 14 Apr 2023 10:38:37 +0100 Subject: [PATCH 1/4] Fix Vite production build with react-day-picker --- web/packages/build/vite/config.ts | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/web/packages/build/vite/config.ts b/web/packages/build/vite/config.ts index 0aaea36b4f15b..b08a0c482585d 100644 --- a/web/packages/build/vite/config.ts +++ b/web/packages/build/vite/config.ts @@ -26,7 +26,7 @@ import tsconfigPaths from 'vite-tsconfig-paths'; import { htmlPlugin, transformPlugin } from './html'; import { getStyledComponentsConfig } from './styled'; -import type { UserConfig } from 'vite'; +import type { RollupCommonJSOptions, UserConfig } from 'vite'; export function createViteConfig( rootDirectory: string, @@ -62,6 +62,23 @@ export function createViteConfig( outDir: outputDirectory, assetsDir: 'app', emptyOutDir: true, + commonjsOptions: { + // this fixes an issue with react-day-picker in production builds - https://github.com/vitejs/vite/issues/2139 + defaultIsModuleExports(id) { + try { + const module = require(id); + + if (module?.default) { + return false; + } + + return 'auto'; + } catch { + return 'auto'; + } + }, + transformMixedEsModules: true, + } as RollupCommonJSOptions, }, plugins: [ react({ From f97e62445a0c01f52365c91f33cf18b16186c1f6 Mon Sep 17 00:00:00 2001 From: Ryan Clark Date: Fri, 14 Apr 2023 10:38:43 +0100 Subject: [PATCH 2/4] Fix circular dependency --- web/packages/teleport/src/Discover/Discover.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/packages/teleport/src/Discover/Discover.tsx b/web/packages/teleport/src/Discover/Discover.tsx index 629aa6a754949..691f51e6f18cb 100644 --- a/web/packages/teleport/src/Discover/Discover.tsx +++ b/web/packages/teleport/src/Discover/Discover.tsx @@ -22,7 +22,7 @@ import { Box } from 'design'; import { FeatureBox } from 'teleport/components/Layout'; import { Navigation } from 'teleport/Discover/Navigation/Navigation'; -import { SelectResource } from 'teleport/Discover/SelectResource'; +import { SelectResource } from 'teleport/Discover/SelectResource/SelectResource'; import cfg from 'teleport/config'; import { findViewAtIndex } from './flow'; From 9ce65783d5e28cb361d9b0a37838ec506b1c1ea9 Mon Sep 17 00:00:00 2001 From: Ryan Clark Date: Fri, 14 Apr 2023 10:45:58 +0100 Subject: [PATCH 3/4] Remove unneeded typings --- web/packages/build/vite/config.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/packages/build/vite/config.ts b/web/packages/build/vite/config.ts index b08a0c482585d..6b9b4c53fc486 100644 --- a/web/packages/build/vite/config.ts +++ b/web/packages/build/vite/config.ts @@ -26,7 +26,7 @@ import tsconfigPaths from 'vite-tsconfig-paths'; import { htmlPlugin, transformPlugin } from './html'; import { getStyledComponentsConfig } from './styled'; -import type { RollupCommonJSOptions, UserConfig } from 'vite'; +import type { UserConfig } from 'vite'; export function createViteConfig( rootDirectory: string, @@ -78,7 +78,7 @@ export function createViteConfig( } }, transformMixedEsModules: true, - } as RollupCommonJSOptions, + }, }, plugins: [ react({ From 1133d7c96a2c851e699615ec4f9240441bdc0689 Mon Sep 17 00:00:00 2001 From: Ryan Clark Date: Fri, 14 Apr 2023 11:53:44 +0100 Subject: [PATCH 4/4] Use an esmodule interop instead of Vite config --- web/packages/build/vite/config.ts | 17 ----------------- .../EventRangePicker/Custom/Custom.jsx | 10 ++++++++-- 2 files changed, 8 insertions(+), 19 deletions(-) diff --git a/web/packages/build/vite/config.ts b/web/packages/build/vite/config.ts index 6b9b4c53fc486..0aaea36b4f15b 100644 --- a/web/packages/build/vite/config.ts +++ b/web/packages/build/vite/config.ts @@ -62,23 +62,6 @@ export function createViteConfig( outDir: outputDirectory, assetsDir: 'app', emptyOutDir: true, - commonjsOptions: { - // this fixes an issue with react-day-picker in production builds - https://github.com/vitejs/vite/issues/2139 - defaultIsModuleExports(id) { - try { - const module = require(id); - - if (module?.default) { - return false; - } - - return 'auto'; - } catch { - return 'auto'; - } - }, - transformMixedEsModules: true, - }, }, plugins: [ react({ diff --git a/web/packages/teleport/src/components/EventRangePicker/Custom/Custom.jsx b/web/packages/teleport/src/components/EventRangePicker/Custom/Custom.jsx index 775659404b96c..846c72182e7c5 100644 --- a/web/packages/teleport/src/components/EventRangePicker/Custom/Custom.jsx +++ b/web/packages/teleport/src/components/EventRangePicker/Custom/Custom.jsx @@ -17,11 +17,17 @@ limitations under the License. import React from 'react'; import { isAfter, endOfDay, startOfDay, isSameDay, subMonths } from 'date-fns'; import styled from 'styled-components'; -import DayPicker, { DateUtils } from 'react-day-picker'; +import dayPicker from 'react-day-picker/DayPicker'; import 'react-day-picker/lib/style.css'; import { Flex } from 'design'; import { Close as CloseIcon } from 'design/Icon'; +// There is a vite issue with react-day-picker in production builds +// https://github.com/vitejs/vite/issues/2139 +// TODO(ryan): After node v18 upgrade, swap to the Vite config approach instead of this one +// also, we should look into upgrading react-day-picker +const DayPicker = dayPicker.default || dayPicker; + export default class CustomRange extends React.Component { constructor(props) { super(); @@ -51,7 +57,7 @@ export default class CustomRange extends React.Component { this.startSelecting = true; } - const range = DateUtils.addDayToRange(day, { from, end }); + const range = dayPicker.DateUtils.addDayToRange(day, { from, end }); if (range.from) { range.from = startOfDay(range.from);