Unable to make chartjs-chart-matrix work within React

[duhmojo]

Hi. I've tried all the tricks from #11 without luck and that issue is closed.

First I'm using:

├── chart.js@3.7.1
├── chartjs-chart-matrix@1.1.1
├── react-chartjs-2@4.0.1

Next I have a functional component that I'm trying to render a basic matrix/heatmap in. Here's my imports:

import React, { useState } from 'react';
import { Chart, registerables } from 'chart.js';
import { MatrixController, MatrixElement } from 'chartjs-chart-matrix';

...

const HeatMapWidget = (props) => {
  Chart.register(MatrixController, MatrixElement, ...registerables);

  ...

  return (
    <>
      <Chart
                type={"matrix"}
                data={ data }
                options={ options } />
    </>
  );

When I load it in my browser:

react-dom.development.js:14803 Uncaught TypeError: Class constructor Chart cannot be invoked without 'new'
    at renderWithHooks (react-dom.development.js:14803)
    at mountIndeterminateComponent (react-dom.development.js:17482)
    at beginWork (react-dom.development.js:18596)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22157)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)

So I tried switching my render to using a constructed Chart:

  const Matrix = new Chart('matrix', {
      type: 'matrix',
      data: data,
      options: options
  })

  return (
    <>
      <Matrix/>
    </>
  );

But then I get:

react-dom.development.js:23965 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `HeatMapWidget`.
    at createFiberFromTypeAndProps (react-dom.development.js:23965)
    at createFiberFromElement (react-dom.development.js:23988)
    at reconcileSingleElement (react-dom.development.js:14233)
    at reconcileChildFibers (react-dom.development.js:14293)
    at reconcileChildren (react-dom.development.js:16762)
    at updateHostComponent (react-dom.development.js:17302)
    at beginWork (react-dom.development.js:18627)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)

I'm at a loss. If anyone has any suggestions it would be great. Thanks.

[duhmojo]

I solved this by literally following jmuela1015's approach here: #11 (comment)

I wanted to avoid messing with my App.jsx and an extra Matrix.jsx component file. I expect trying to webpack Chart twice for different purposes in the same component isn't compatible. I guess I'm not smart enough to sort it out and jmuela1015's approach is working for me.