Message Boards
Using amCharts in a React Module (Missing version constraints)
Using amCharts in a React Module (Missing version constraints)
Junior Member Posts: 30 Join Date: 7/8/13 Recent PostsHello 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...!