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:
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.
