ExtReact - Including a cartesian chart throws an error in the console

Question

I am trying to build a simple ExtReact application with a cartesian chart. I've found that I can add most ExtReact components (like Container, Grid, Button, etc) but charts are causing me some pain. I've run into the following problem in both Ext frameworks I've tried (ExtReact, Ext Web Components in Vue). The Sencha forums say it is a missing package but I've included both @sencha/ext-react-modern and @sencha/ext-charts packages, plus their Github code imports cartesian charts the same way I am doing it (with the @sencha/ext-react-modern import. Here is my main react class.

import React, {Component} from 'react';
import {Cartesian} from '@sencha/ext-react-modern';

Ext.require([
    'Ext.chart.series.Area',
    'Ext.chart.axis.Numeric',
    'Ext.chart.axis.Category'
]);

export default class Main extends Component {

    store = new Ext.data.Store({
        fields: ['time', 'd1', 'd2', 'd3', 'd4' ],
        data: [ /* list of objects */]
    });

    render() {
        return (
            <Cartesian
                /* chart implementation */
            />
        )
    }
}

The console gives me the following 2 errors:

GET http://localhost:1962/widget/cartesian.js?_dc=1586963634425 404 (Not Found)

Uncaught Error: [Ext.create] Unrecognized class name / alias: widget.cartesian

Clearly my app is not importing the correct packages, but I don't know what packages I am missing (or maybe there is a different issue).

Answer 1

In the end I think this was a package.json issue. I restarted a brand new project following the ExtReact setup tutorial and it worked.