Problems building custom component

UI Builder
1

I have a functioning custom component, but where I had to comment out a require element to get it to work. It uses 2 external npm modules, chart.js and react-chartjs-2. The problem is how to find/create a bundled version of these that can be run together with my script.

This is what I have going:

import React from 'react';
import {
  Chart as ChartJS,
  RadialLinearScale,
  PointElement,
  LineElement,
  Filler,
  Tooltip,
  Legend,
} from 'chart.js';
import { Radar } from 'react-chartjs-2';

ChartJS.register(
  RadialLinearScale,
  PointElement,
  LineElement,
  Filler,
  Tooltip,
  Legend
);

export default function SpiderDiagramComponent({ component, elRef }) {

  const {classList, display, style, width, height, labels, datasets, minValue, maxValue, stepSize} = component;

  const styles = { ...style, width, height };

  const data = { 
    labels: labels,
    datasets: datasets,
    };
  
    // Define the chart options
  const options = {
    scales: {
      r: {
        beginAtZero: true,
        suggestedMin: minValue,
        suggestedMax: maxValue,
        stepSize: stepSize,
      },
    },
  };

  if (!display) {
    return null;
  }

  return (
    <div 
      ref={ elRef } 
      style={ styles }
      className={ classList }
      >
     { data.datasets ? <Radar data={ data } options={ options } style={{ width: "100%", height: "100%" }} /> : ""}
    </div>
  );
};

I’ve had a look at various posts, including this: Custom UI Component Library Import - #3 by Grace_Young, but I am still not finding out how I can properly package my dependencies together.

For now, I have just added a bunch of files, no minimization, and hacked through the imports and fixed paths, but that clearly is not the way to go… I have tried setting up npm builds with webpack, but those files when uploaded/used does not run at all.

Could anyone possibly help me out here by giving some clear instructions as to what need to be done? I am not experienced with node.js at all, so all this npm stuff is a bit foreign…

My AppID is: DFF48C1B-107F-426C-B45A-5141767DE217

The custom component is called SpiderDiagram within the app-v1 container.

2

@vladimir-upirov Since you were discussing pretty much the same thing in the post I referenced here above, maybe you could shed some light on what I need to do with either my webpack settings or other config change to get something that is working with Backendless.

Is it correctly understood that a fully minimized version of my code plus dependencies does not work? Or is webpack minimized code not supported at all?

3

Hi @Egil_Helland

You can try to use the following webpack config template

Regards,
Vlad