Using amCharts in a React Module (Missing version constraints)

2021-06-18T06:51:17Z

Hello everybody,

I created a simple React Portlet Module which should show a simple chart generated via amCharts, and in general, I followed this tutorial and this example. Currently, I'm using Liferay DXP 7.1.10 GA 1 (dxp-23-7110) on my local development machine.

As a simple "Hello world" portlet, everything works as expected. I can also add amCharts as a devDependency to my package.json:

{
	"dependencies": {
		"react": "16.8.6",
		"react-dom": "16.8.6"
	},
	"devDependencies": {
		"babel-cli": "^6.26.0",
		"babel-preset-env": "^1.7.0",
		"babel-preset-react": "6.24.1",
		"liferay-npm-bundler": "2.19.4",
		"liferay-npm-bundler-loader-json-loader": "^2.20.0",
		"@amcharts/amcharts4": "^4.10.19"
	},
	"main": "lib/index.es.js",
	"name": "net-kex-visualization-tagcloud-web",
	"scripts": {
		"build": "babel --source-maps -d build/resources/main/META-INF/resources src/main/resources/META-INF/resources && liferay-npm-bundler"
	},
	"version": "1.0.0"
}

Building and deploying works as expected, amCharts appears inside my node_modules folder. And my "Hello World" application still works without any issues.

Now, I import amCharts into my TagCloud.es.js component (in this example I'd like to create a simple tag cloud):

import React, { Component } from 'react';

import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";


class TagCloud extends Component {
  render() {
      return (
        <h1>Hello world</h1>
      );
    }
}

export { TagCloud };

I don't change anything else, just import amCharts to start using it afterwards. But now my portlet stops working and I receive this error message within my browser console:

development:4485 Error: The following problems where detected while resolving modules:
Missing version constraints for @net-kex-visualization-tagcloud-web$amcharts/amcharts4 in package.json of net-kex-visualization-tagcloud-web@1.0.0/core
Missing version constraints for @net-kex-visualization-tagcloud-web$amcharts/amcharts4 in package.json of net-kex-visualization-tagcloud-web@1.0.0/charts

The "resolved modules" list of the AMD Loader shows these entries:

74: ":ERROR:Missing version constraints for @net-kex-visualization-tagcloud-web$amcharts/amcharts4 in package.json of net-kex-visualization-tagcloud-web@1.0.0/core"

75: ":ERROR:Missing version constraints for @net-kex-visualization-tagcloud-web$amcharts/amcharts4 in package.json of net-kex-visualization-tagcloud-web@1.0.0/charts"

Of course, I tried to google this error message, and I found some Liferay related discussions, but nothing helpful except the notice, that there was a bug some time ago in the AMD loader, which is already fixed. This is why I switched my Liferay docker image I'm using locally from -sp4 to -sp6, but with no change.

Next, I used CodeSandbox to try creating a little amCharts app with React outside of Liferay: https://codesandbox.io/s/mutable-dream-w637m (no TagCloud, I just copied an amCharts React example).

This works like a charm, no errors, quick building, etc. - but with one difference: Here, amCharts is added to dependencies instead of devDependencies. Makes sense to me, because amCharts should be available in the user's client browser. So, I just tried to move it to dependencies, but then my module does not start anymore.

But, because of this, I also had a closer look at the node_modules, which contains more than 20.000 files... That seems very strange to me. And so I wonder if we might be mixing server-side and client-side modules here... because basically I just want to load and use a simple library in my user's browser, and don't get why this causes such issues.

Any support would be greatly appreciated. Somehow I can't get rid of the feeling that I'm overlooking something very basic...!