React lazy loading is throwing errors

App Platform
, , ,
1

Hi team,

We are currently developing custom app using FDK React application. Our application would be running in several different places as well as we want to have a bunch of Modals.

Our implementation relies on having the same index.html as a value of url property for every location in the manifest.json file and uses a custom router approach similar to the one described here

Based on that we thought that it would make sense to use React.lazy() to load dynamically parts of the application that are expected to be run in this particular location. Some code examples will be at the end of this post.

My question is: does it make sense to use React.lazy in such cases or Freshdesk SDK already has mechanisms of ensuring that apps are running as performant as possible?

Here is simplified version of what we try to make work:

import React, { useEffect, useState, lazy, Suspense } from "react";

const TicketSidebarModule = lazy(() => import("./modules/TicketSidebarModule"));

const Router = () => {
  ...
  return (
    ...
      <Suspense fallback={<span>LOADING...</span>}>
        <TicketSidebarModule />
      </Suspense>
    ...
  );
};
3

As a quick follow-up, we weren’t able to make React lazy loading work along with FDK out of the box. Some weird errors are appearing both in fdk run console and in the browser console:

Shortened version of error from fdk run console:

TypeError: Invalid template! Template should be a "string" but "object" was given as the first argument for mustache#render(template, view, partials)
    at Object.render (/Users/vsukhostavskyi/.nvm/versions/node/v18.15.0/lib/node_modules/fdk/node_modules/mustache/mustache.js:753:13)
    at Object.injectAppClient (/Users/vsukhostavskyi/.nvm/versions/node/v18.15.0/lib/node_modules/fdk/lib/utils/inject.js:13:43)
    at /Users/vsukhostavskyi/.nvm/versions/node/v18.15.0/lib/node_modules/fdk/lib/routes/iframe.js:165:29
    at Layer.handle [as handle_request] (/Users/vsukhostavskyi/.nvm/versions/node/v18.15.0/lib/node_modules/fdk/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/Users/vsukhostavskyi/.nvm/versions/node/v18.15.0/lib/node_modules/fdk/node_modules/express/lib/router/index.js:328:13)
    at /Users/vsukhostavskyi/.nvm/versions/node/v18.15.0/lib/node_modules/fdk/node_modules/express/lib/router/index.js:286:9
...

Shortened version of error from browser console: (for this error I spotted that for some reason path to script does not have / after http://localhost:10001/iframe/agent/scripts part of url)

Uncaught ChunkLoadError: Loading chunk node_modules_stencil_core_internal_client_lazy_recursive_entry_js_include_entry_js_exclude_sy-955e6b failed.
(error: http://localhost:10001/iframe/agent/scriptsnode_modules_stencil_core_internal_client_lazy_recursive_entry_js_include_entry_js_exclude_sy-955e6b.3d312895.js)
    at __webpack_require__.f.j (jsonp chunk loading:27:1)
    at ensure chunk:6:1
    at Array.reduce (<anonymous>)
    at __webpack_require__.e (ensure chunk:5:1)
    at Router.js:13:40
    at lazyInitializer (react.development.js:1275:1)
    at mountLazyComponent (react-dom.development.js:17662:1)
    at beginWork (react-dom.development.js:19055:1)
    at beginWork$1 (react-dom.development.js:23940:1)
    at performUnitOfWork (react-dom.development.js:22779:1)

Are those errors that mustache.js throwing are familiar to anybody and maybe any ideas on how to fix that?

For browser error: maybe some webpack tweaks need to be done to make everything work?
P.S. We use custom webpack.config.js that is 95% similar to default one!

4

Public use of Chatbot has only been permitted in these Categories: #product-apis, #customize-workflows

5

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.