Problem using react-live-clock and react-moment

Question

hi i have a problem with react-live-clock and react-moment

I found out yesterday that create-react-app was deprecated and took vite to create a simple app.

The problem is when I try to use the react-live-clock library, when I run, on the server I have no errors but it doesn't show the site in the browser and in the console I see the following message.

index.js:11 Uncaught TypeError: Cannot set properties of undefined (setting 'format')
    at F (index.js:11:13125)
    at Object.l (index.js:11:13816)
    at Object.<anonymous> (index.js:11:13871)
    at n (index.js:1:447)
    at Module.<anonymous> (index.js:11:14085)
    at n (index.js:1:447)
    at index.js:1:1246
    at index.js:1:1254
    at index.js:1:81
    at node_modules/react-moment/dist/index.js (index.js:1:310)

The error doesn't tell me anything, and I can't debug the javascript file without compiling it for vite, the problem I think is in react-moment.

This is my json package

{
  "name": "react-ts",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@fontsource/roboto": "^5.0.5",
    "@mui/icons-material": "^5.14.1",
    "@mui/material": "^5.14.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-live-clock": "^5.10.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.14",
    "@types/react-dom": "^18.2.6",
    "@typescript-eslint/eslint-plugin": "^5.62.0",
    "@typescript-eslint/parser": "^5.61.0",
    "@vitejs/plugin-react": "^4.0.1",
    "typescript": "^5.1.6",
    "vite": "^4.4.0"
  }
}

Code implemented:

import { Box } from '@mui/material'
import { Typography } from '@mui/material'
import { Paper } from '@mui/material'
import Clock from 'react-live-clock';

function LiveClock() {
  return (
    <>
      <Box p={1}>
        <Paper elevation={3}>
          <Box p={2}>
            <Typography variant="h5">Formulario de Cronometraje</Typography>
            <Clock />
          </Box>
        </Paper>
      </Box>
    </>
  )
}

Answer 1

the issue has been resolved in github issues post:

https://github.com/pvoznyuk/react-live-clock/issues/319

try adding the resolve field in vite.config.js ->

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
export default defineConfig({
  plugins: [react()],
  resolve: {
    mainFields: [],
  },
});