What are the recommended configurations for using Reactime with React 18 + Vite?

[mark-veryawesome]

Below is my current project package.json and my vite configuration. I am unable to get the extension to record any actions on the app. Note, I can confirm that the app runs in development mode, i.e. ( console.log(process.env.NODE_ENV) = 'development') and I can confirm I have React Dev Tools installed.

Also, the Reactime script does get loaded into the app HTML because when I press "Launch Reactime" button, my app browser tab refreshes as well.

Any information on whether or not this is expected behavior would be appreciated, as well as any recommendations on modifying the vite build configuration in order to get Reactime working with my app. Thanks

{
"name": "frontend",
"version": "v0.7.6",
"description": "",
"type": "module",
"scripts": {
"data-provider": "cd .. && npm run build:data-provider",
"build:file": "cross-env NODE_ENV=production vite build --debug > vite-output.log 2>&1",
"build": "cross-env NODE_ENV=production vite build",
"build:ci": "cross-env NODE_ENV=development vite build --mode ci",
"dev": "cross-env NODE_ENV=development vite",
"preview-prod": "cross-env NODE_ENV=development vite preview",
"test": "cross-env NODE_ENV=development jest --watch",
"test:ci": "cross-env NODE_ENV=development jest --ci",
"b:test": "NODE_ENV=test bunx jest --watch",
"b:build": "NODE_ENV=production bun --bun vite build",
"b:dev": "NODE_ENV=development bunx vite"
},
"repository": {
"type": "git",
"url": "git+https://github.com/danny-avila/LibreChat.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
},
"dependencies": {
"@ariakit/react": "^0.4.11",
"@sanity/client": "^6.27.1",
"@sanity/image-url": "^1.1.0",
"@tanstack/react-query": "^4.28.0",
"@tanstack/react-table": "^8.11.7",
"class-variance-authority": "^0.6.0",
"clsx": "^1.2.1",
"copy-to-clipboard": "^3.3.3",
"cross-env": "^7.0.3",
"date-fns": "^3.3.1",
"downloadjs": "^1.4.7",
"export-from-json": "^1.7.2",
"filenamify": "^6.0.0",
"framer-motion": "^11.5.4",
"html-to-image": "^1.11.11",
"i18next": "^24.2.2",
"js-cookie": "^3.0.5",
"librechat-data-provider": "*",
"lodash": "^4.17.21",
"lucide-react": "^0.394.0",
"match-sorter": "^6.3.4",
"msedge-tts": "^1.3.4",
"qrcode.react": "^4.2.0",
"rc-input-number": "^7.4.2",
"react": "^18.2.0",
"react-avatar-editor": "^13.0.2",
"react-dnd": "^16.0.1",
"react-dnd-html5-backend": "^16.0.1",
"react-dom": "^18.2.0",
"react-flip-toolkit": "^7.1.0",
"react-gtm-module": "^2.0.11",
"react-hook-form": "^7.43.9",
"react-i18next": "^15.4.0",
"react-lazy-load-image-component": "^1.6.0",
"react-markdown": "^9.0.1",
"react-resizable-panels": "^2.1.1",
"react-router-dom": "^6.11.2",
"react-speech-recognition": "^3.10.0",
"react-textarea-autosize": "^8.4.0",
"react-transition-group": "^4.4.5",
"react-virtualized": "^9.22.6",
"recoil": "^0.7.7",
"regenerator-runtime": "^0.14.1",
"rehype-highlight": "^6.0.0",
"rehype-katex": "^6.0.3",
"remark-directive": "^3.0.0",
"remark-gfm": "^4.0.0",
"remark-math": "^6.0.0",
"remark-supersub": "^1.0.0",
"sse.js": "^2.5.0",
"tailwind-merge": "^1.9.1",
"tailwindcss-animate": "^1.0.5",
"tailwindcss-radix": "^2.8.0",
"zod": "^3.22.4"
},
"devDependencies": {
"@babel/plugin-transform-runtime": "^7.22.15",
"@babel/preset-env": "^7.22.15",
"@babel/preset-react": "^7.22.15",
"@babel/preset-typescript": "^7.22.15",
"@tanstack/react-query-devtools": "^4.29.0",
"@testing-library/dom": "^9.3.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.4.3",
"@types/jest": "^29.5.14",
"@types/js-cookie": "^3.0.6",
"@types/node": "^20.3.0",
"@types/react": "^18.2.11",
"@types/react-dom": "^18.2.4",
"@types/react-tree-graph": "^8.0.0",
"@vitejs/plugin-react": "^4.2.1",
"autoprefixer": "^10.4.20",
"babel-plugin-replace-ts-export-assignment": "^0.0.2",
"babel-plugin-root-import": "^6.6.0",
"babel-plugin-transform-import-meta": "^2.3.2",
"babel-plugin-transform-vite-meta-env": "^1.0.3",
"eslint-plugin-jest": "^28.11.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^29.7.0",
"jest-canvas-mock": "^2.5.2",
"jest-environment-jsdom": "^29.7.0",
"jest-file-loader": "^1.0.3",
"jest-junit": "^16.0.0",
"postcss": "^8.4.31",
"postcss-loader": "^7.1.0",
"postcss-preset-env": "^8.2.0",
"react-render-tracker": "^0.7.0",
"react-tree-graph": "^8.0.3",
"reactotron-react-js": "^3.3.16",
"tailwindcss": "^3.4.1",
"ts-jest": "^29.2.5",
"typescript": "^5.3.3",
"vite": "^5.4.14",
"vite-plugin-node-polyfills": "^0.17.0",
"vite-plugin-pwa": "^0.21.1"
}
}

And here is vite.config.json

import path, { resolve } from 'path';
import react from '@vitejs/plugin-react';
import { VitePWA } from 'vite-plugin-pwa';
import { defineConfig, createLogger } from 'vite';
import { nodePolyfills } from 'vite-plugin-node-polyfills';
import type { Plugin } from 'vite';

const logger = createLogger();
const originalWarning = logger.warn;
logger.warn = (msg, options) => {
/* Suppresses:
[vite:css] Complex selectors in '.group:focus-within .dark:group-focus-within:text-gray-300:is(.dark *)' can not be transformed to an equivalent selector without ':is()'.
/
if (msg.includes('vite:css') && msg.includes('^^^^^^^')) {
return;
}
/ Suppresses:
(!) Some chunks are larger than 500 kB after minification. Consider:

• Using dynamic import() to code-split the application
• Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
• Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
  */
  if (msg.includes('Use build.rollupOptions.output.manualChunks')) {
  return;
  }
  originalWarning(msg, options);
  };

// https://vitejs.dev/config/
export default defineConfig({
customLogger: logger,
server: {
fs: {
cachedChecks: false,
},
host: 'localhost',
port: 3090,
strictPort: false,
proxy: {
'/api': {
target: 'http://localhost:3080',
changeOrigin: true,
},
'/oauth': {
target: 'http://localhost:3080',
changeOrigin: true,
},
},
},
// All other env variables are filtered out
envDir: '../',
envPrefix: ['VITE_', 'SCRIPT_', 'DOMAIN_', 'ALLOW_'],
plugins: [
react(),
nodePolyfills(),
VitePWA({
injectRegister: 'auto', // 'auto' | 'manual' | 'disabled'
registerType: 'autoUpdate', // 'prompt' | 'autoUpdate'
devOptions: {
enabled: false, // enable/disable registering SW in development mode
},
useCredentials: true,
workbox: {
globPatterns: ['assets//*.{png,jpg,svg,ico}', '/*.{js,css,html,ico,woff2}'],
maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
navigateFallbackDenylist: [/^/oauth/],
},
manifest: {
name: 'LibreChat',
short_name: 'LibreChat',
start_url: '/',
display: 'standalone',
background_color: '#000000',
theme_color: '#009688',
icons: [
{
src: '/assets/favicon-32x32.png',
sizes: '32x32',
type: 'image/png',
},
{
src: '/assets/favicon-16x16.png',
sizes: '16x16',
type: 'image/png',
},
{
src: '/assets/apple-touch-icon-180x180.png',
sizes: '180x180',
type: 'image/png',
},
{
src: '/assets/maskable-icon.png',
sizes: '512x512',
type: 'image/png',
purpose: 'maskable',
},
],
},
}),
sourcemapExclude({ excludeNodeModules: true }),
],
publicDir: './public',
build: {
sourcemap: process.env.NODE_ENV === 'development',
outDir: './dist',
rollupOptions: {
// external: ['uuid'],
output: {
manualChunks: (id) => {
if (id.includes('node_modules/highlight.js')) {
return 'markdown_highlight';
}
if (id.includes('node_modules/hast-util-raw')) {
return 'markdown_large';
}
if (id.includes('node_modules/katex')) {
return 'markdown_large';
}
if (id.includes('node_modules')) {
return 'vendor';
}
},
entryFileNames: 'assets/[name].[hash].js',
chunkFileNames: 'assets/[name].[hash].js',
assetFileNames: (assetInfo) => {
if (assetInfo.name && /.(woff|woff2|eot|ttf|otf)$/.test(assetInfo.name)) {
return 'assets/[name][extname]';
}
return 'assets/[name].[hash][extname]';
},
},
/**
* Ignore "use client" waning since we are not using SSR
* @see {@link TanStack/query#5161 (comment) Preserve 'use client' directives TanStack/query#5161}
*/
onwarn(warning, warn) {
if (
// warning.code === 'MODULE_LEVEL_DIRECTIVE' &&
warning.message.includes('Error when using sourcemap')
) {
return;
}
warn(warning);
},
},
},
resolve: {
alias: {
'~': path.join(__dirname, 'src/'),
$fonts: resolve('public/fonts'),
},
},
});

interface SourcemapExclude {
excludeNodeModules?: boolean;
}
export function sourcemapExclude(opts?: SourcemapExclude): Plugin {
return {
name: 'sourcemap-exclude',
transform(code: string, id: string) {
if (opts?.excludeNodeModules && id.includes('node_modules')) {
return {
code,
// https://github.com/rollup/rollup/blob/master/docs/plugin-development/index.md#source-code-transformations
map: { mappings: '' },
};
}
},
};
}