Using amCharts in a React Module (Missing version constraints)Using amCharts in a React Module (Missing version constraints)https://liferay.dev/en/c/message_boards/find_thread?p_l_id=119785333&threadId=1208316552024-03-19T11:28:05Z2024-03-19T11:28:05ZUsing amCharts in a React Module (Missing version constraints)André Bräklinghttps://liferay.dev/en/c/message_boards/find_message?p_l_id=119785333&messageId=1208316542021-06-18T06:51:17Z2021-06-17T13:07:05Z<p>Hello everybody,</p>
<p>I created a simple React Portlet Module which should show a simple
chart generated via amCharts, and in general, I followed <a
href="https://help.liferay.com/hc/en-us/articles/360017888032-Using-React-in-Your-Portlets">this
tutorial</a> and <a
href="https://github.com/liferay/liferay-blade-samples/tree/7.0/gradle/apps/npm/react-npm-portlet">this
example</a>. Currently, I'm using Liferay DXP 7.1.10 GA 1
(dxp-23-7110) on my local development machine.</p>
<p>As a simple "Hello world" portlet, everything works as
expected. I can also add amCharts as a devDependency to my package.json:</p>
<pre><code class="language-java">{
"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"
}
</code></pre>
<p>Building and deploying works as expected, amCharts appears inside my
node_modules folder. And my "Hello World" application still
works without any issues.</p>
<p>Now, I import amCharts into my TagCloud.es.js component (in this
example I'd like to create a simple tag cloud):</p>
<pre><code class="language-java">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 };</code></pre>
<p>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:</p>
<blockquote>
<p>development:4485 Error: The following problems where detected while
resolving modules:<br />Missing version constraints for
@net-kex-visualization-tagcloud-web$amcharts/amcharts4 in
package.json of
net-kex-visualization-tagcloud-web@1.0.0/core<br />Missing version
constraints for
@net-kex-visualization-tagcloud-web$amcharts/amcharts4 in
package.json of net-kex-visualization-tagcloud-web@1.0.0/charts</p></blockquote>
<p>The "resolved modules" list of the AMD Loader shows these entries:</p>
<blockquote>
<ol>
<li>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"</li>
<li>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"</li></ol></blockquote>
<p>Of course, I tried to google this error message, and I found some
Liferay related discussions, but nothing helpful except the notice,
that <a
href="https://github.com/liferay/liferay-amd-loader/issues/166">there
was a bug some time ago in the AMD loader</a>, 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.</p>
<p>Next, I used CodeSandbox to try creating a little amCharts app with
React outside of Liferay: <a
href="https://codesandbox.io/s/mutable-dream-w637m">https://codesandbox.io/s/mutable-dream-w637m</a> (no
TagCloud, I just copied an amCharts React example).</p>
<p>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.</p>
<p>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.</p>
<p>Any support would be greatly appreciated. Somehow I can't get rid of
the feeling that I'm overlooking something very basic...!<