TypeError: Cannot set properties of undefined when using react-live-clock with React and Vite

[kavindunilshan]

Description:
I encountered an issue when using react-live-clock in my React project that is built with Vite. When I import and use the Clock component from react-live-clock, it causes a TypeError.

This issue is same as what has been described in this Stack Overflow question: Problem using react-live-clock and react-moment.

Steps to Reproduce:

1. Install dependencies:
   npm install --save react react-live-clock

2.Import and use the Clock component in a React component.

import React from 'react';
import Clock from 'react-live-clock';

const MyComponent = () => (
  <div>
    <Clock format={'HH:mm:ss'} ticking={true} timezone={'US/Pacific'} />
  </div>
);

export default MyComponent;

3. Run the project using vite
   npm run dev

Environment:

React version: 18.2.0
Vite version: 5.2.0
react-live-clock version: 6.1.22 (also checked with 6.1.16 but both didn't work)

The error seems to be related to the internal implementation of the react-live-clock component or its interaction with the Vite build process. Any insights or workarounds for this issue would be greatly appreciated.

[thesilhouettes]

I am not the author of this repository, but could you try adding the resolve field in vite.config.js?

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    mainFields: [],
  },
});

I hope this solves your problem.

[anthony0030]

Hi @kavindunilshan, Thanks for the feedback. I don't know how VITE works.
Here are some similar problems to yours:
#150
#220
#275
Maybe you can use a solution from there or reach out to the other developers to give you a hand.

[anthony0030]

Also, Thanks @thesilhouettes for the response. I can't verify if it works, but still tanks :D

[kavindunilshan]

@thesilhouettes Thank you!, Adding the resolve field in vite.config.js solved my issue perfectly. Much appreciated!

[kavindunilshan]

@anthony0030 Thanks! I really appreciate your help!

[anthony0030]

Happy to help @kavindunilshan.
@thesilhouettes will the config modification be needed in all cases?
Is there a change I can make to the project to make it compatible without the mod? Would this mod be good to add in the documentation?

Thanks again for the solution @thesilhouettes