Liferay 7.1 React Portlet - Component Import Error

RE: Liferay 7.1 React Portlet - Component Import Error

2019-05-08T08:59:48Z

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.

RE: Liferay 7.1 React Portlet - Component Import Error

2019-05-08T07:29:21Z

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

RE: Liferay 7.1 React Portlet - Component Import Error

2019-05-07T08:45:15Z

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?

RE: Liferay 7.1 React Portlet - Component Import Error

2018-11-12T08:28:47Z

> 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

RE: Liferay 7.1 React Portlet - Component Import Error

2018-11-05T16:38:01Z

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

RE: Liferay 7.1 React Portlet - Component Import Error

2018-11-05T09:04:34Z

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

Liferay 7.1 React Portlet - Component Import Error

2018-11-04T21:37:02Z

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

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

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