1. Home
  2. Development
  3. RE: Liferay 7.1 React Portlet - Component Import Error

RE: Liferay 7.1 React Portlet - Component Import Error

rayvanth challa, modified 6 Years ago.
Liferay 7.1 React Portlet - Component Import Error
New Member Posts: 23 Join Date: 1/22/16 Recent Posts

Hi Everyone,

 

I have to create multiple react portlets in my project, so instead of loading react dependencies for each and every portlet i had loaded those dependencies through my theme as below

 

<script type="application/javascript" src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script>
<script type="application/javascript" src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js"></script>
<script type="application/javascript" src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react-transition-group/2.2.1/react-transition-group.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/6.0.1/reactstrap.min.js"></script>
<script src="https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap-table/4.3.1/react-bootstrap-table-all.min.css">

 

<script type="text/babel">
const {
  Modal, 
  ModalHeader, 
  ModalBody, 
  ModalFooter,
  Table,
  Collapse,
  CardBody, 
  Card
} = Reactstrap;
</script>

 

Now i had created a liferay module project with template as mvc-portlet and designed it as needed in jobboard.js file and deployed the application, now it is up and running with default react component loaded from jobboard.js file.

 

But if create multiple components in multiple js files and if i try to import those components into the main js file then i am facing issue on the browser console with "require is undefined."

 

Can i know what i have been missing while import?

 

I tried to add the below js file in my theme and tried to fix it but that didn't help

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script>

 

This is how "import ManageProfile from './manageProfile';"  i am importing one component into another.

 

Attached errors screen shot and module screenshot for reference. 

 

Any help on this will be greatly appreciated.

 

Thanks

Ray

Attachments:

thumbnail
Ivan Zaera, modified 6 Years ago.
RE: Liferay 7.1 React Portlet - Component Import Error
Regular Member Posts: 119 Join Date: 10/1/13 Recent Posts

Hi Rayvanth:

 

As you are on Liferay 7.1, please consider using the liferay-npm-bundler tools instead of adding react to a theme. That is the preferred way to deal with Javascript in the newest Liferay versions.

 

You can get more information here -> https://github.com/liferay/liferay-npm-build-tools/wiki

 

And pay special attention to this section on how to create a portlet from scratch -> https://github.com/liferay/liferay-npm-build-tools/wiki/How-to-use-generator-liferay-bundle

 

Cheers,

Ivan

rayvanth challa, modified 6 Years ago.
RE: Liferay 7.1 React Portlet - Component Import Error
New Member Posts: 23 Join Date: 1/22/16 Recent Posts

Thanks Ivan for the quick response. 

 

So does that mean we should never load react dependencies from theme? 

 

If i have multiple portlets (example: 30) so do i need to load react dependencies for each and every portlet individually? instead of loading only once from the theme?

 

what kind of portlet am i supposed to go for now "react based portlet" or "javascript based porlet"? 

 

i am not sure mine is the right approach. please advice the correct route to get this resolved.

 

Thanks

Ray

thumbnail
Ivan Zaera, modified 6 Years ago.
RE: Liferay 7.1 React Portlet - Component Import Error
Regular Member Posts: 119 Join Date: 10/1/13 Recent Posts

> So does that mean we should never load react dependencies from theme?

No. You  can still use the theme approach, but it is better to use bundler as it is the preferred tool for this kind of things.

 

> If i have multiple portlets (example: 30) so do i need to load react dependencies for each and every portlet individually? instead of loading only once from the theme?

No. You have to create a "shared bundle" containing react and then point your portlets to that bundle to obtain react. You can see a similar example using Angular (unfortunately based on blade, but you get the idea I hope) here -> https://github.com/izaera/liferay-npm-bundler-2-example/tree/master/modules

 

Pay special attention to https://github.com/izaera/liferay-npm-bundler-2-example/blob/master/modules/npm-angular5-portlet-say-hello/.npmbundlerrc#L7-L28 which is the place where the import of angular from the shared bundle takes place.

 

>what kind of portlet am i supposed to go for now "react based portlet" or "javascript based porlet"? 

React.

 

Cheers,

Ivan

Bhoomi Vaddoriya, modified 6 Years ago.
RE: Liferay 7.1 React Portlet - Component Import Error
New Member Posts: 2 Join Date: 5/7/19 Recent Posts
Hi everyone, I have got the same problem.

I have created an npm-react portlet.
when I install the react-redux@7.0.3 plugin in my portlet it works fine. But when I import that plugin's component that gives an error like "Missing version constraints for react-dom in package.json of react-redux@7.0.3"

Does anyone have a solution about?

Attachments:

thumbnail
Ivan Zaera, modified 6 Years ago.
RE: Liferay 7.1 React Portlet - Component Import Error
Regular Member Posts: 119 Join Date: 10/1/13 Recent Posts
Hi:

First of all, you must migrate to bundler 2.x, because peer dependencies are not correctly supported in bundler 1.x.

Follow the guidelines at https://github.com/liferay/liferay-npm-build-tools/wiki/Migrating-bundler-from-1.x-to-2.x

Also, there's more interesting information about the bundler in that same wiki https://github.com/liferay/liferay-npm-build-tools/wiki that may help you understand the model and how everything works under the hood.

Cheers,
Ivan
Bhoomi Vaddoriya, modified 6 Years ago.
RE: Liferay 7.1 React Portlet - Component Import Error
New Member Posts: 2 Join Date: 5/7/19 Recent Posts
Thank you for your response.

I have already tried to migrate bundler '1.x' to '2.x', but it throws an error "Uncaught (in promise) TypeError: bootstrapRequire.default is not a function" in browser console.