Production version does not render; reload works

[EdmundsEcho]

Hello --

First and foremost, I have not had the opportunity to visit this resource for a few years. This despite using create-react-app throughout. It has been a real pleasure working with this technology. I have learned so much from the documents and the community's blogs etc. I accomplished a great deal and have many folks I have never met to thank - Thank you.

I have been working on the production version of the app on kubernetes. I'm having a tough time debugging this despite my use of the --profile build flag.

There are times (of course) when part of the app needs to re-render. When a certain component is present, the re-render results in a white screen, with the following error in the console:

TypeError: W is not a function
The error may be correlated with this previous error:
checkForUpdates@https://lucivia.net/static/js/2.ee5a0e50.chunk.js:2:25318
...

// source: react_dev_backend.js
// without dev_tools, useSelector.js

The first bit of the app's code associated with the error is selectionModel in the following component:

const ValueGridFileLevels = ({ getValue, fieldType }) => {
  //
  // baseline selectAll levels
  //
  const selectAll = useMemo(
    () => fileLevelsRequest(getValue, fieldType),
    [fieldType, getValue],
  );

  const selectionModel = useSelector(  // <<< HERE
    (state) => {
      switch (fieldType) {
        case FIELD_TYPES.FILE:
          return getSelectionModelFile(
            state,
            getValue('filename'),
            getValue('header-idx'),
          );

        case FIELD_TYPES.ETL:
          return getSelectionModelEtl(state, getValue('name'));

        case FIELD_TYPES.WIDE:
          return {
            totalCount: getValue('levels').length,
            selectionModel: getValue('levels'),
            type: 'levels',
          };

        default:
          throw new InvalidStateError(`Unreachable`);
      }
    },
    [getValue],
  );

  //
  // group-by-file | wide-to-long-field
  //
  // ⬜ does not consider wide-to-long data in the ETL context
  // ... more generally, unify the wide etl view with what it
  //     the data presents when stacked with RAW
  //
  let isDerivedField =
    (getValue('map-files')?.arrows ?? false) || fieldType === FIELD_TYPES.WIDE;

  console.assert(
    (selectionModel.type === 'levels' && isDerivedField) || !isDerivedField,
    `The assertion failed: levels missing for derived: ${isDerivedField}`,
  );
  isDerivedField = selectionModel.type === 'levels';

  return (
    <div className='stack'>
      <Title fieldType={fieldType} />
      <ValueGridCore
        className={clsx('Luci-ValueGrid-fileLevels')}
        columns={columns}
        // 📖 both FILE and WIDE use the field-alias prop
        identifier={
          fieldType === FIELD_TYPES.ETL
            ? getValue('name')
            : getValue('field-alias')
        }
        purpose={getValue('purpose')}
        baseSelectAll={selectAll}
        fetchFn={fetchLevels}
        normalizer={parseResponse}
        edgeToGridRowFn={edgeToGridRowFn}
        // required to determine the height of the grid
        selectionModel={selectionModel}
        // version of the grid
        feature='LIMIT'
        checkboxSelection={false}
        pageSize={30}
        // when data is a derivedField 📖
        rows={
          isDerivedField
            ? selectionModel.selectionModel.map(rowFromLevel)
            : undefined
        }
        DEBUG={DEBUG}
      />
      <Tools purpose={getValue('purpose')} fieldType={fieldType} />
    </div>
  );
};

My first idea was to ensure the props were valid before rendering. So, the parent component has the guard that returns some "neutral" value in the event either getValue or fieldType are not as required.

I'm posting my question here, and not with useSelector from react-redux to learn what one generally needs to consider when transitioning from the development version and the production build. There is a big black box in all that is baked-in to create-react-app that I would like to first get a sense for. For instance, is there anything to consider going from the dev http server to something like nginx (as is the case for me)? Is there something about caching that might prevent the error in one context versus the other?

Finally, what is the best way to work my way through this in the minified js code?

Thank you in advance to anyone with some guidance here.

- E

[jaketoolson]

I get this same error in production. I think it could be related to the fact the minified filename hash never changes, and with caching, it's not serving the new contents.

#12883