Ask Questions and Find Answers
Important:
Ask is now read-only. You can review any existing questions and answers, but not add anything new.
But - don't panic! While ask is no more, we've replaced it with discuss - the new Liferay Discussion Forum! Read more here here or just visit the site here:
discuss.liferay.com
RE: Liferay npm React portlet - problem using npm libraries
Hi All,
I have a problem thats bugging my head for awhile now. I want to use React in portlets but it seems insanely hard. Without adding libraries such as react-bootstrap-table portlet loads fine.
As soon as I want to use npm libraries such as react-bootstrap-table or datatables.net (i guess libraries that use jquery) I get missing constraints problems. Browser console error is:
Missing version constraints for react-npm-portlet$events in package.json of react-npm-portlet$react-bootstrap-table@4.3.1"
jQuery 2
_getResolutionError
require
And I get blank portlet. No table shown. Importing other npm libraries such as moment etc work fine. It is only these table related libraries that dont compile well.
I have tried other npm libraries but same errors. What am I doing wrong. How do I import and use npm libraries that do tables into liferay.
I am using blade sample liferay npm react (https://github.com/liferay/liferay-blade-samples/tree/7.1/gradle/apps/npm/react-npm-portlet) here is my index.es.js (i have only changed index.es.js and package.json in the sample)
import React from 'react';
import ReactDOM from 'react-dom';
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
var products = [{
id: 1,
name: "Product1",
price: 120
}, {
id: 2,
name: "Product2",
price: 80
}];
export default function(elementId) {
ReactDOM.render(<BootstrapTable data={products} striped hover>
<TableHeaderColumn isKey dataField='id'>Product ID</TableHeaderColumn>
<TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
<TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
</BootstrapTable>, document.getElementById(elementId));
}
Package.json
{
"dependencies": {
"react": "15.6.2",
"react-bootstrap-table": "^4.3.1",
"react-dom": "15.6.2"
},
"description": "React Portlet",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "6.24.1",
"liferay-npm-bundler": "^2.0.0"
},
"main": "lib/index.es.js",
"name": "react-npm-portlet",
"private": true,
"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"
}
All i did was in the root folder npm i react-bootstrap-table to install the library. Is there additional step that I am missing?
Appreciate your help.
mike
I have a problem thats bugging my head for awhile now. I want to use React in portlets but it seems insanely hard. Without adding libraries such as react-bootstrap-table portlet loads fine.
As soon as I want to use npm libraries such as react-bootstrap-table or datatables.net (i guess libraries that use jquery) I get missing constraints problems. Browser console error is:
Missing version constraints for react-npm-portlet$events in package.json of react-npm-portlet$react-bootstrap-table@4.3.1"
jQuery 2
_getResolutionError
require
And I get blank portlet. No table shown. Importing other npm libraries such as moment etc work fine. It is only these table related libraries that dont compile well.
I have tried other npm libraries but same errors. What am I doing wrong. How do I import and use npm libraries that do tables into liferay.
I am using blade sample liferay npm react (https://github.com/liferay/liferay-blade-samples/tree/7.1/gradle/apps/npm/react-npm-portlet) here is my index.es.js (i have only changed index.es.js and package.json in the sample)
import React from 'react';
import ReactDOM from 'react-dom';
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
var products = [{
id: 1,
name: "Product1",
price: 120
}, {
id: 2,
name: "Product2",
price: 80
}];
export default function(elementId) {
ReactDOM.render(<BootstrapTable data={products} striped hover>
<TableHeaderColumn isKey dataField='id'>Product ID</TableHeaderColumn>
<TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
<TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
</BootstrapTable>, document.getElementById(elementId));
}
Package.json
{
"dependencies": {
"react": "15.6.2",
"react-bootstrap-table": "^4.3.1",
"react-dom": "15.6.2"
},
"description": "React Portlet",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "6.24.1",
"liferay-npm-bundler": "^2.0.0"
},
"main": "lib/index.es.js",
"name": "react-npm-portlet",
"private": true,
"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"
}
All i did was in the root folder npm i react-bootstrap-table to install the library. Is there additional step that I am missing?
Appreciate your help.
mike
Do you see any warnings when doing an npm install on your project by itself? In my experience so far, any warnings at that point (such as missing peer dependencies) were enough to cause me to be able to run in standalone mode (using webpack as part of LNBS - I start with the Liferay yeoman template generator instead of Blade, but was using the Liferay NPM bundler to package my project for deploying into a portal instance)...and then fail when attempting to add as a widget to my page.
Specific to your use case, we chose to go with ag-Grid for datatables (removing the need for a jQuery dependency, as this felt a bit hokey under React) - but I did have to create an intermediary project, using create-react-library (based on create-react-app) as a starting point and wrapping ag-Grid (such that Webpack would handle the projects internal circular dependencies at build time, the Liferay NPM bundler simply throws an error at that point), then publishing that package to an internal repository and pulling it into my portlet project (via a dependency in package.json), which I could then deploy to my Liferay portal instance.
Specific to your use case, we chose to go with ag-Grid for datatables (removing the need for a jQuery dependency, as this felt a bit hokey under React) - but I did have to create an intermediary project, using create-react-library (based on create-react-app) as a starting point and wrapping ag-Grid (such that Webpack would handle the projects internal circular dependencies at build time, the Liferay NPM bundler simply throws an error at that point), then publishing that package to an internal repository and pulling it into my portlet project (via a dependency in package.json), which I could then deploy to my Liferay portal instance.
So it seems we cant use jquery related npm libraries in react liferay portlets. I wish there is a straight forward way to work with react and liferay. I can try ag-Grid. Anyone else has any thoughts?
I tried ag-Grid same error as with react-bootstrap-table: Missing version constraints for react-npm-portlet$ag-grid-react in package.json of react-npm-portlet@1.0.0
I just noticed in build directory package.json and node_modules directory inside jar file dont even mention ag-grid library..So it seems the bundler does not package these libraries but throws no errors. Weird.
Can you please share what versions of libraries are you using? The package.json of your project should be enough...
actually i tried again didnt npm install ag-grid... the grid now shows up in node_modules build however I am getting circular dependency error in browser ag-grid-community@21.0.1/dist/lib/gridOptionsWrapper. The provided configuration is not Directed Acyclic Graph.
Also, I don't see why the bundler doesn't bundle your peerDependencies. As long as you have them listed in the dependencies section of your package.json everything should be fine...
The only difference between webpack and the bundler is that webpack is capable of finding "implicit" deps as long as they are in your node_modules directory. That means that if your package.json is incomplete but you had luck and someone pulled out the dependency you need webpack will work (and Node too) but the bundler will fail.
This is because we link the modules during runtime (in the loader) instead of build time as webpack, so we need all package.json files to be exhaustive because we don't have any node_modules or project to scan during runtime.
Said that, we have a bundler plugin that scans peer dependencies and injects them in the package.json files if they are found in node_modules to emulate webpack behaviour -> https://github.com/liferay/liferay-js-toolkit/tree/master/packages/liferay-npm-bundler-plugin-inject-peer-dependencies
Maybe inspecting the code or adding traces to it may shed some light.
The only difference between webpack and the bundler is that webpack is capable of finding "implicit" deps as long as they are in your node_modules directory. That means that if your package.json is incomplete but you had luck and someone pulled out the dependency you need webpack will work (and Node too) but the bundler will fail.
This is because we link the modules during runtime (in the loader) instead of build time as webpack, so we need all package.json files to be exhaustive because we don't have any node_modules or project to scan during runtime.
Said that, we have a bundler plugin that scans peer dependencies and injects them in the package.json files if they are found in node_modules to emulate webpack behaviour -> https://github.com/liferay/liferay-js-toolkit/tree/master/packages/liferay-npm-bundler-plugin-inject-peer-dependencies
Maybe inspecting the code or adding traces to it may shed some light.
I have a new post on the Liferay AMD Loader issue that I am hoping you can provide some insight. I have tried everything and nothing seems to work. Part of the issue is I am not as conversant with angular and typescript and would simply like this to work.
https://liferay.dev/forums/-/message_boards/message/114185656
https://liferay.dev/forums/-/message_boards/message/114185656
Ivan Zaera:
Also, I don't see why the bundler doesn't bundle your peerDependencies. As long as you have them listed in the dependencies section of your package.json everything should be fine...
The only difference between webpack and the bundler is that webpack is capable of finding "implicit" deps as long as they are in your node_modules directory. That means that if your package.json is incomplete but you had luck and someone pulled out the dependency you need webpack will work (and Node too) but the bundler will fail.
This is because we link the modules during runtime (in the loader) instead of build time as webpack, so we need all package.json files to be exhaustive because we don't have any node_modules or project to scan during runtime.
Said that, we have a bundler plugin that scans peer dependencies and injects them in the package.json files if they are found in node_modules to emulate webpack behaviour -> https://github.com/liferay/liferay-js-toolkit/tree/master/packages/liferay-npm-bundler-plugin-inject-peer-dependencies
Maybe inspecting the code or adding traces to it may shed some light.
package.json is in the first post.
I get this error now after adding inject peer plugin:
"The following problems where detected while resolving modules: Package react-npm-portlet$react which is a dependency of react-npm-portlet@1.0.0 is not deployed in the server Package react-npm-portlet$react-dom which is a dependency of react-npm-portlet@1.0.0 is not deployed in the server Package react-npm-portlet$react-bootstrap-table which is a dependency of react-npm-portlet@1.0.0 is not deployed in the server"
This is what I added to npmbundlerrc
{"*": {
"plugins": [
[
"inject-peer-dependencies",
{
"defineCall": "Liferay.Loader.define"
}
]
]
}
}
"The following problems where detected while resolving modules: Package react-npm-portlet$react which is a dependency of react-npm-portlet@1.0.0 is not deployed in the server Package react-npm-portlet$react-dom which is a dependency of react-npm-portlet@1.0.0 is not deployed in the server Package react-npm-portlet$react-bootstrap-table which is a dependency of react-npm-portlet@1.0.0 is not deployed in the server"
This is what I added to npmbundlerrc
{"*": {
"plugins": [
[
"inject-peer-dependencies",
{
"defineCall": "Liferay.Loader.define"
}
]
]
}
}
This is the Error: "The following problems where detected while resolving modules: Missing version constraints for react-npm-portlet$events in package.json of react-npm-portlet$react-bootstrap-table@4.3.1"
You don't need to add anything to the npmbundlerrc. It's already added to the build by the default bundler preset. See here -> https://github.com/liferay/liferay-js-toolkit/blob/master/packages/liferay-npm-bundler-preset-standard/config.json There was a misunderstanding there :-)
Can you file an issue in the project (https://github.com/liferay/liferay-js-toolkit/issues) pasting the package.json and the steps to reproduce so that we can investigate it? Looks like an error...
Regarding the cyclic dependencies: they are not supported by the Loader, so nothing with cyclic dependencies will work until this one is implemented -> https://github.com/liferay/liferay-amd-loader/issues/182
Can you file an issue in the project (https://github.com/liferay/liferay-js-toolkit/issues) pasting the package.json and the steps to reproduce so that we can investigate it? Looks like an error...
Regarding the cyclic dependencies: they are not supported by the Loader, so nothing with cyclic dependencies will work until this one is implemented -> https://github.com/liferay/liferay-amd-loader/issues/182
can you import react-bootstrap-table npm library and try demo code into any react project and deploy it to liferay? Thats how to reproduce the issue.