Uncaught TypeError: Cannot set properties of undefined (setting 'format')

[Ymil]

Hi, i have a problem when tried use the react-live-clock.

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>
    </>
  )
}

I did not find clues or possible solutions and I wanted to see if it was a problem that they already knew about.

[anthony0030]

Good morning!

Thankyou for bringing this to our attention. I have never used Vite so I don't know how helpful I can be. Please try installing react-moment manually in your package.json file. Please also try deleting your node_modules folder and reinstalling them.

If you find a solution please let us know.

[Axolem]

Hi, I am experiencing the same issue @anthony0030 even after performing the above suggested steps.

@Ymil have you found a solution?

[anthony0030]

Hi @Axolem, are you also using Vite? Could you let me know if you are using the latest version f the packages? Please provide a minimal code pen example that causes this error.

[Ymil]

Hello, I did not solve the problem, sorry.

Maybe it's typescript that's the problem? @Axolem you are using typescript too?

[anthony0030]

Hi @Ymil and @Axolem, Please provide a simple code example that causes this bug and I will be happy to help.

[anthony0030]

Closing due to inactivity.

[gmadharh]

I'm currently facing this issue as well, I'll post the code I'm trying to run with the Clock component.

Time.tsx:

import Clock from 'react-live-clock'

export default function Time() {
  return <Clock format={'HH:mm:ss'} ticking={true} />
}

App.tsx:

import './App.css'
import Quote from './components/quote/Quote'
import Time from './components/time/Time'
function App() {
  return (
    <div>
      <Quote />
      <Time />
    </div>
  )
}

export default App

[anthony0030]

Do you only have this problem with typescript?

[gmadharh]

I'm using Typescript for this project yeah, but I haven't tried it with Javascript. Using Vite + TS + React.

[anthony0030]

I am not good with TS. I started maintaining this package but others have helped me with the TS. If you could please review the source code for any bugs in TS. I wish I had knowledge of vite to help debug. There might need to be some adjustments for the package to be vite compatible.

[gmadharh]

My best guess is it has to be something with how Vite bundles and minifies it. Don't think it's Typescript related.

[anthony0030]

I found this for you. https://github.com/vitejs/vite/issues/7376

This package relies on react moment. Possibly one of the workarounds in the above thread will work. Please keep me posted.

[gmadharh]

To be honest I just ended up using this instead. If anyone wants to try the solution above can go ahead.

[anthony0030]

Hi @gmadharh, Thanks for the update!

I will be re-closing this issue since it seems to be a problem with Moment and Vite combo.

Thank you for considering react-live-clock in your project.