Hello Sascha,

thanks for your reply!

I'll give this a try and see if this will make a difference. But our problems occur not on building the modules, but on using them. Anyway, I'll try and will post my feedback later today! :-)

We create our React Modules within IntelliJ by using the Liferay Module template npm-react-portlet.

Our working package.json files look like this:

{
	"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"
	},
	"main": "lib/index.es.js",
	"name": "our-module-name",
	"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"
}

What we want to do is to load some additional react components from npm modules as dependencies, but just a few work, all other fail because of several error messages (version constraints, additional depenencies, etc.). Anyway, the amcharts, for example, are succesfully downloaded and appear within the node_modules folder, but no chance to import and use them.

We tried as devDependency and as "normal" dependency as well. Yesterday we failed using react-markdown, so we now count five non-exotic react components we are not able to use within a Liferay module, but anywhere else where we use React.

Creating a common library is a nice thing, but first we want to get the dependencies working in just one module before we start sharing them ;-)

Hi Sascha,

thanks again for your help!

Yes, the main file configuration is correct. As I said, our React modules work fine, only as soon as we want to add a component as a dependency, it becomes a gamble.

I wasn't aware that npm-react-portlet was deprecated - thanks for pointing that out. We're migrating to 7.3 right now and haven't encountered any problems so far, but then that's probably just a matter of time. generator-liferay-js I've tested and I'm thrilled at first sight - unlike npm-react-portlet, using React in the frontend feels "right" with it, especially we don't have unnecessary overhead like the Java classes anymore. I really like it!

But our problems still persist. I tried with amcharts again. I create the demo code which was offered by generator-liferay-js, and then just added the dependency for amcharts:

{
	"name": "amcharts-demo",
	"version": "1.0.0",
	"description": "Amcharts Demo",
	"devDependencies": {
		"liferay-npm-bundler": "^2.26.0",
		"liferay-npm-build-support": "^2.26.0",
		"copy-webpack-plugin": "4.6.0",
		"webpack": "4.29.6",
		"webpack-cli": "3.3.0",
		"webpack-dev-server": "3.2.1",
		"@babel/cli": "^7.7.5",
		"@babel/core": "^7.7.5",
		"@babel/preset-env": "^7.7.6",
		"@babel/preset-react": "^7.7.4",
		"@amcharts/amcharts4": "^4.10.19"
	},
	"dependencies": {
		"react": "16.8.6",
		"react-dom": "16.8.6"
	},
	"scripts": {
		"build": "babel --source-maps -d build src && npm run copy-assets && liferay-npm-bundler",
		"copy-assets": "lnbs-copy-assets",
		"translate": "lnbs-translate",
		"deploy": "npm run build && lnbs-deploy",
		"start": "lnbs-start"
	},
	"portlet": {
		"com.liferay.portlet.display-category": "JS Demo",
		"com.liferay.portlet.header-portlet-css": "/css/styles.css",
		"com.liferay.portlet.instanceable": true,
		"javax.portlet.name": "amchartsdemo",
		"javax.portlet.security-role-ref": "power-user,user",
		"javax.portlet.resource-bundle": "content.Language"
	},
	"main": "index.js"
}

Then, I created a small component to use some amCharts demo code:

import React, { useRef, useLayoutEffect } from 'react';
import logo from './logo.svg';
import './App.css';
import * as am4core from "amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";

am4core.useTheme(am4themes_animated);

function Graph(props) {
  const chart = useRef(null);

  useLayoutEffect(() => {
    let x = am4core.create("chartdiv", am4charts.XYChart);

    x.paddingRight = 20;

    let data = [];
    let visits = 10;

    for (let i = 1; i < 366; i++) {
      visits += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
      data.push({ date: new Date(2018, 0, i), name: "name" + i, value: visits });
    }

    x.data = data;

    let dateAxis = x.xAxes.push(new am4charts.DateAxis());
    dateAxis.renderer.grid.template.location = 0;

    let valueAxis = x.yAxes.push(new am4charts.ValueAxis());
    valueAxis.tooltip.disabled = true;
    valueAxis.renderer.minWidth = 35;

    let series = x.series.push(new am4charts.LineSeries());
    series.dataFields.dateX = "date";
    series.dataFields.valueY = "value";
    series.tooltipText = "{valueY.value}";
    x.cursor = new am4charts.XYCursor();

    let scrollbarX = new am4charts.XYChartScrollbar();
    scrollbarX.series.push(series);
    x.scrollbarX = scrollbarX;

    chart.current = x;

    return () => {
      x.dispose();
    };
  }, []);

  return (
    <div id="chartdiv" style={{ width: "100%", height: "500px" }}></div>
  );
}
export { Graph };

(Based on https://www.amcharts.com/docs/v4/getting-started/integrations/using-react/)

But I still receive this error message:

Liferay AMD Loader: Unhandled failure: Error: The following problems where detected while resolving modules:
Missing version constraints for amcharts-demo$amcharts in package.json of amcharts-demo@1.0.0/amcharts4/core
Missing version constraints for @amcharts-demo$amcharts/amcharts4 in package.json of amcharts-demo@1.0.0/charts
Missing version constraints for @amcharts-demo$amcharts/amcharts4 in package.json of amcharts-demo@1.0.0/themes/animated
    at Loader._getResolutionError (loader.js:312)
    at loader.js:200 while resolving modules: ["amcharts-demo@1.0.0/index"]

So, switching to generator-liferay-js seems to be a big step forward (thanks again!), but does not solve our dependency issues. I'll ask my collegues who tried the other components I mentioned - maybe they have more luck, after all, the error messages were also partly very different.