Loop only works in production mode and not development mode

I have a similar problem to https://github.com/open-olive/loop-development-kit/issues/450 but the other way around (I am experiencing a breaking error in development mode but do not see that same error in production mode). The specific error is: failed to call callback: failed to call callback: TypeError: Cannot read property 'trim' of undefined or null at flushSyncCallbackQueueImpl (<eval>:374:86(48))

This happens within a couple components throughout my loop, but interestingly, I have discovered that it typically only happens the first time the whisper renders the component. If I close out of the whisper and then reopen it and reach that same component, the error does NOT occur and the component renders as I would expect. While debugging this myself, I added a console.log statement within the component itself and when the error occurs, the log statement always prints twice (as if the component is rendering twice). On subsequent renders of that component (e.g. closing out of the whisper and reopening it and following all of the same steps as before), the log statement only appears once and the component renders properly.

See below for a snippet of my code:

/* eslint-disable react/jsx-fragments */
import { StyleSize } from '@oliveai/ldk/dist/whisper';
import { ClaimsSummaryInfo } from '@src/types/claims_status';
import { max } from 'lodash';
import React, { useState } from 'react';
import { ClaimsSummary } from './claimsSummary';
import { GoBackLink } from '@src/components/common/goBackLink';

const DEFAULT_MONTHS_TO_SHOW = 5;

const MONTH_INDEX_TO_NAME = {
  0: 'January',
  1: 'February',
  2: 'March',
  3: 'April',
  4: 'May',
  5: 'June',
  6: 'July',
  7: 'August',
  8: 'September',
  9: 'October',
  10: 'November',
  11: 'December',
};

interface MonthlyClaimsProps {
  // map from month index (e.g. January = 0) to summary for that month
  monthlySummaryMap: Map<number, ClaimsSummaryInfo>;
}

export const MonthlyClaims = (props: MonthlyClaimsProps) => {
  const [isOpen, setIsOpen] = useState(false);
  const { monthlySummaryMap } = props;

  console.log("HERE");

  // get most recent months
  const mostRecentSummaries = [];
  const months = [...monthlySummaryMap.keys()];
  const maxMonthIndex = max([...monthlySummaryMap.keys()]);
  for (let i = maxMonthIndex; i >= max([maxMonthIndex - DEFAULT_MONTHS_TO_SHOW + 1, 0]); i -= 1) {
    let headerText = MONTH_INDEX_TO_NAME[i];
    if (i === maxMonthIndex) headerText += ' (ongoing)';
    mostRecentSummaries.push(
      <ClaimsSummary
        claimsSummaryInfo={monthlySummaryMap.get(i)}
        headerText={headerText}
        summaryNumber={i}
        bottomMarginSize={StyleSize.Small}
      />
    );
  }

  // get earlier months
  const earlierSummaries = [];
  for (let i = maxMonthIndex - DEFAULT_MONTHS_TO_SHOW; i >= 0; i -= 1) {
    earlierSummaries.push(
      <ClaimsSummary
        claimsSummaryInfo={monthlySummaryMap.get(i)}
        headerText={MONTH_INDEX_TO_NAME[i]}
        summaryNumber={i}
        bottomMarginSize={StyleSize.Medium}
      />
    );
  }

  return (
    // Note: have to use fragment here because we can't have a collapse box within a box
    <>
      <GoBackLink sectionTitle="Monthly overview" />
      {mostRecentSummaries}
      {earlierSummaries.length > 0 ? (
        <oh-collapse-box
          key="view-more-collapse-box"
          open={isOpen}
          label={isOpen ? 'View less' : 'View more'}
          onClick={() => setIsOpen(!isOpen)}
          layout={{ marginTop: StyleSize.Small, marginBottom: StyleSize.Small }}
        >
          {earlierSummaries}
        </oh-collapse-box>
      ) : null}
    </>
  );
};

Also, the command to build in production mode is: webpack --entry ./src/index.tsx and the command to build in development mode is: webpack --entry ./src/index.tsx --watch --mode=development.

The webpack config file is shown below (note: I commented most of it out so that it always just returns the same default config that the LDK uses:

const config = require("@oliveai/ldk/dist/webpack/config");
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
const WebpackShellPluginNext = require("webpack-shell-plugin-next");
const os = require("os");

config.default.resolve.plugins = [new TsconfigPathsPlugin()];

module.exports = (env, argv) => {
  // if (argv.mode !== "development") return config.default;

  // config.default = {
  //   ...config.default,
  //   optimization: {
  //     ...config.default.optimization,
  //     minimize: false,
  //   },
  // };

  // const IS_NOT_MAC = os.platform() !== "darwin";
  // if (env.DISABLE_HMR || IS_NOT_MAC) return config.default;

  // config.default.plugins.push(
  //   new WebpackShellPluginNext({
  //     onAfterDone: {
  //       scripts: [
  //         'pkill -f "Applications/Olive Helps.app" &',
  //         "/Applications/Olive\\ Helps.app/Contents/MacOS/olive-helps &",
  //       ],
  //       blocking: false,
  //       parallel: true,
  //     },
  //   })
  // );

  return config.default;
};

open-olive / loop-development-kit

Loop only works in production mode and not development mode #454