Webpack Error when building perspective module

I am trying to follow the demo project outlined here: Inductive Automation Account however I’m running into issues when trying to build the perspective module via the gradlew.bat buildModule command.

I’ve added the apexchart dependencies to the package.json in the web/packages/client directory:

image

I’ve then created the ApexChart.tsx component and can now successfully build the demo module with my added file.

import * as React from 'react';
import {
    Component,
    ComponentMeta,
    ComponentProps,
    PComponent,
    PropertyTree,
    SizeObject
} from '@inductiveautomation/perspective-client';
import Chart from 'react-apexcharts';

export const COMPONENT_TYPE = "rad.display.apexchart";

export interface ApexChartProps {
    type: any;
    options: any;
    series: any;
}

export class ApexChart extends Component<ComponentProps<ApexChartProps>, any> {
    render() {
        const { props } = this.props;
        return (
            < div {...this.props.emit()}>
                <Chart options={props.options} series={props.series} type={props.type} />
            </div>
        );
    }
}


// This is the actual thing that gets registered with the component registry.
export class ApexChartMeta implements ComponentMeta {

    getComponentType(): string {
        return COMPONENT_TYPE;
    }

    // the class or React Type that this component provides
    getViewComponent(): PComponent {
        return ApexChart;
    }

    getDefaultSize(): SizeObject {
        return ({
            width: 360,
            height: 360
        });
    }

    // Invoked when an update to the PropertyTree has occurred,
    // effectively mapping the state of the tree to component props.
    getPropsReducer(tree: PropertyTree): ApexChartProps {
        return {
            type: tree.readString("type"),
            options: tree.read("options", {}),
            series: tree.read("series", [])
        };
    }
}

The issue comes from when I try to register the component in the rad-client-components.ts file.

After adding the component to be registered and running gradlew.bat buildModule I get the following error:

ERROR in ./typescript/components/ApexChart.tsx
Module not found: Error: Can’t resolve ‘react-apexcharts’ in ‘C:\Users\Andrew\Desktop\TAS Modules\perspective-component\web\packages\client\typescript\components’

  • @ ./typescript/components/ApexChart.tsx 9:27-54*
  • @ ./typescript/rad-client-components.ts*
    Child mini-css-extract-plugin …/…/…/…/…/TAS Modules\perspective-component\web\node_modules\css-loader\dist\cjs.js??ref–5-1!../…/…/…/…/TAS Modules\perspective-component\web\node_modules\sass-loader\lib\loader.js??ref–5-2!../…/…/…/…/TAS Modules\perspective-component\web\packages\client\scss\main.scss:
  • Entrypoint mini-css-extract-plugin = **
  • […/…/node_modules/css-loader/dist/cjs.js?!../…/node_modules/sass-loader/lib/loader.js?!./scss/main.scss] C:/Users/Andrew/Desktop/TAS Modules/perspective-component/web/node_modules/css-loader/dist/cjs.js??ref–5-1!C:/Users/Andrew/Desktop/TAS Modules/perspective-component/web/node_modules/sass-loader/lib/loader.js??ref–5-2!./scss/main.scss 1 KiB {mini-css-extract-plugin} [built]*
  •    + 1 hidden module*
    

info Visit yarn run | Yarn for documentation about this command.

lerna ERR! yarn run build stderr:
warning package.json: License should be a valid SPDX license expression
warning package.json: License should be a valid SPDX license expression
warning package.json: License should be a valid SPDX license expression
(node:42696) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead
error Command failed with exit code 2.

lerna ERR! yarn run build exited 2 in ‘@myCompanyNamespace/example-client’

However, the module exists in the node_modules folder under web/packages/client/node_modules

Any help at all on this would be greatly appreciated. I have been going in circles trying to find a culprit on what’s causing the build to fail as soon as I try to register the component.

Hi. I’m having a similar issue but with a custom React Component (can’t resolve the import). Did you find a solution?
Regards,
Ted.

First thing - take a look at the perspective example at ignition-sdk-examples/perspective-component at master · inductiveautomation/ignition-sdk-examples, and make sure you have the correct versions (they were recently updated to be consistent with the perspective module). One of the updates included webpack, and the configuration in the webpack.config.js changed a tad as a result - it was brought up to date with required API changes in webpack’s more recent versions.

If that all looks correct/consistent, then it seems likely to be an error in tsconfig (the ts compiler configurations) and/or the webpack module resolution configuration. One important thing to note is that you may be effectively dealing with 2 parallel import resolution systems: one for the TS compiler, one for the nodejs tooling (webpack, babel, etc). It’s not uncommon for that to be the case (nor is it necessarily incorrect), but it’s very dependent on the configuration of those tools.

The interaction and resolution behavior of those two can be a challenge, but if you post the webpack config and tsconfig, we might be able to sort it out. In addition, it could be that typedefs (type definitions, aka .d.ts files) are not found for the react-apex chart, so typescript can’t apply typedefs.

I’d definitely suggest checking out the documentation for webpack and typescript.

I actually did a resolution to this that worked for myself. My issue was actually caused by my react-apexchart library import in my react component.

Switching “import Chart from ‘react-apexcharts’” to “import Chart from ‘…/…/node_modules/react-apexcharts’” resolved the build error for me.