search

culturecreates / footlight-calendar-widget

Footlight's listing-widget built with React
https://cms.footlight.io
0 stars 0 forks source link

Listing Widget ChunkLoadError #48

Closed saumier closed 1 day ago

saumier commented 1 week ago

@SyamBabu-M I received this email from Andrea at Verb Interative.

Moreover we’re getting an error including the new js file: Image

I don't know what the ChunkLoadError is. Can you help me by explaining to me what the problem is and how we can fix it? Thx.

Here is the html calling the div.

<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DIV Example</title>
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css2?family=Helvetica&display=swap" rel="stylesheet">

  <!-- Footlight widget -->
  <script defer="defer" src="https://listing-widget.footlight.io/static/js/main.6865d62c.js"></script>
  <link href="https://listing-widget.footlight.io/static/css/main.bf1be2a3.css" rel="stylesheet">
</head>

<body style="margin:20px">
  <h1>Destination Canada Test</h1>

  <div id="calendar-widget" data-api="api.footlight.io" data-calendar="nac" data-locale="fr" data-color="#fc6060"
    data-limit="6" data-height="600px" data-search-events-filter="" data-font="Roboto">
  </div>

  <footer>
    <p>Destination Canada Footer</p>
  </footer>
</body>

</html>
SyamBabu-M commented 4 days ago

I don't know what the ChunkLoadError is. Can you help me by explaining to me what the problem is and how we can fix it? Thx. @saumier This error happens when the app is not able to load a js chunk. This chunk in this case seems to be related to the locale part that we are dynamically importing from dayjs.

The fix I am currently implementing is to remove the dynamic import and import the locales statically.

SyamBabu-M commented 4 days ago

Please test this using staging widget and if all looks good the here is the PR for production release

SyamBabu-M commented 3 days ago

@saumier Earlier, we were dynamically importing only the required locale from Day.js based on the user’s language settings to optimize the bundle size. However, when embedding the widget via the div method, we encountered an issue where the dynamic import was failing.

To resolve this, I switched to statically importing both English (en) and French (fr) locales from Day.js regardless of the user's choice of language. While this approach increases the initial bundle size slightly by loading both locales upfront, it ensures that the necessary locale data is always available, preventing the chunk load error.

I did some research and I found that it may be possible to still have the dynamic import but that may require installing the additional package. So we will have to increase the bundle size either way. Please note that I haven't tried this method, I just read about this on StackOverflow.

saumier commented 2 days ago

@SyamBabu-M Thanks for your explanation. I think we should use your current solution which is to statically import both en and fr locales. We can close this issue. In the future when we look at maybe adding Japanese we can reconsider a dynamic import then.