Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Ymil opened this issue Jul 21, 2023 · 14 comments
Closed

Comments

@Ymil
Copy link

Ymil commented Jul 21, 2023

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
Copy link
Collaborator

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
Copy link

Axolem commented Aug 9, 2023

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

@Ymil have you found a solution?

@anthony0030
Copy link
Collaborator

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
Copy link
Author

Ymil commented Aug 11, 2023

Hello, I did not solve the problem, sorry.

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

@anthony0030
Copy link
Collaborator

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

@anthony0030
Copy link
Collaborator

Closing due to inactivity.

@gmadharh
Copy link

gmadharh commented Mar 7, 2024

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
Copy link
Collaborator

Do you only have this problem with typescript?

@anthony0030 anthony0030 reopened this Mar 7, 2024
@gmadharh
Copy link

gmadharh commented Mar 7, 2024

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

@anthony0030
Copy link
Collaborator

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
Copy link

gmadharh commented Mar 7, 2024

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

@anthony0030
Copy link
Collaborator

I found this for you.
vitejs/vite#7376

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

@gmadharh
Copy link

gmadharh commented Mar 7, 2024

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

@anthony0030
Copy link
Collaborator

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants