1. Home
  2. Development
  3. RE: Liferay 7 GA5 - NPM React Portlet Dependency Issue

RE: Liferay 7 GA5 - NPM React Portlet Dependency Issue

Bhavika Soni, modified 7 Years ago.
Liferay 7 GA5 - NPM React Portlet Dependency Issue
New Member Posts: 2 Join Date: 2/7/18 Recent Posts
Hello, I have created NPM react module using blade tool (version - 2.3.1.201711201552).
I am using Liferay CE Portal 7 GA5.
I am having an issue while building the module for redux dependency.
Please find the screenshot below at the end of the post.

I have used babel plugin: babel-plugin-transform-object-rest-spread into the .babelrc file to solve the issue.
{
"presets": ["es2015", "react","liferay-project"],
"plugins": ["transform-object-rest-spread"]
}
But, It is not affecting.

Also , according to documentation from - https://www.npmjs.com/package/liferay-npm-bundler
I provided configuration changes in .npmbundlerrc file.

Case 1:

{
"preset": "liferay-npm-bundler-preset-react",
"process-serially": true,
"verbose": true
}

for this cae, build gets successful but still getting an error while bundling redux@3.7.2.

Bundling redux@3.7.2
Error processing file: /home/inexture/BhavikaSoni/Projects/TestPortal_Liferay7GA5/workspace/npm-workspace/modules/indian-railway-npm-react-module/build/resources/main/META-INF/resources/node_modules/redux@3.7.2/src/applyMiddleware.js
(node:28165) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): SyntaxError: /home/inexture/BhavikaSoni/Projects/TestPortal_Liferay7GA5/workspace/npm-workspace/modules/indian-railway-npm-react-module/build/resources/main/META-INF/resources/node_modules/redux@3.7.2/src/applyMiddleware.js: Unexpected token (33:6)
(node:28165) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

And give this error in logs after loading the module on the page - {code="404", msg="ProxyServlet: /o/frontend-js-web/es6-promise.map", uri=/o/frontend-js-web/es6-promise.map}

Case 2:

{
"preset": "liferay-npm-bundler-preset-react",
"process-serially": true,
"verbose": true,
"*" : {
"plugins": [
"replace-browser-modules",
"transform-object-rest-spread"
],
".babelrc": {
"presets": ["es2015", "react", "liferay-project"],
"plugins": ["transform-object-rest-spread"]
}
}
}

for this case also, build gets successful but still getting an error while bundling react@16.2.0.

Bundling 42 dependencies...
Bundling react@16.2.0
(node:4894) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): Error: Cannot find module 'liferay-npm-bundler-plugin-transform-object-rest-spread' from '/home/inexture/BhavikaSoni/Projects/TestPortal_Liferay7GA5/workspace/npm-workspace/modules/indian-railway-npm-react-module/node_modules/liferay-npm-bundler-preset-react'
(node:4894) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Attachments:

thumbnail
Ivan Zaera, modified 7 Years ago.
RE: Liferay 7 GA5 - NPM React Portlet Dependency Issue
Regular Member Posts: 119 Join Date: 10/1/13 Recent Posts
Hi:

First of all, you can find more exhaustive documentation in this link.

Now, regarding your error, looks like it is caused because the bundler is trying to process an ES2015+ file as if it was ES5 and thus, fails when it arrives to the spread operator. That file is probably source code of redux that has an equivalent transpiled version in some other folder of the same package, which is the one that really gets executed in the browser.

So, the easiest way to get rid of that error is to ignore that file as we do with typescript and flow languages in other frameworks. To do it, just configure the exclude section of your .npmbundlerrc to ignore the offending files for the redux package. You may look at an example of such configuration here. Just change 'mkdirp' by 'redux' and 'bin/**/*' by 'src/**/*' or whatever you need to make it work in your project :-).

Hope that helps.
thumbnail
Andrew Jardine, modified 7 Years ago.
RE: Liferay 7 GA5 - NPM React Portlet Dependency Issue
Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts
Hi Bhavika,

I've actually run into the same problem today. I have a double down issue in that I am also new to React and Redux and all this stuff, so the picture of how it all comes together is still a little fuzzy for me. I added the config.js file to my project with the following --


{

    "exclude": {
    "redux": ["src/**/*"]
    },
    "*": {
        "plugins": [
            "replace-browser-modules",
            "inject-react-dependencies"
        ],
        ".babelrc": {
            "presets": ["liferay-standard"]
        }
    }
}


which got me past the build well enough, but the problem is I now have a while suite of errors that are showing up in my browser dev console.

Did you manage to solve this issue? If yes, could you share what you did with me?
Bhavika Soni, modified 7 Years ago.
RE: Liferay 7 GA5 - NPM React Portlet Dependency Issue (Answer)
New Member Posts: 2 Join Date: 2/7/18 Recent Posts
Hello, Thank You for the reply.

The issue by excluding the src directory solved my issue.

Into the .npmbundlerrc file exclude the directories in which file generates the issue.
Following lines in .npmbundlerrc file solved the issue for me.

{
"preset": "liferay-npm-bundler-preset-react",
"exclude": {
"redux": ["src/**/*"],
"react-redux": ["src/**/*"],
"fbjs": ["flow/**/*"]
}
}
Above three packages - redux, react-redux and fbjs were generating the issue and excluding directories made my module working.

Thank You Ivan for the solution and Andrew, do not need to create config.js. Make exclude changes in .npmbundlerrc file.
thumbnail
Andrew Jardine, modified 7 Years ago.
RE: Liferay 7 GA5 - NPM React Portlet Dependency Issue
Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts
Hi Bhavika,

I'm not sure if we had the same issue to be honest -- but we certainly had the same error. I managed to get it working without having to exclude anything, but I did have to update my liferay-npm-bundler node module to the latest version to 1.6.0 I think it was. Thanks for answering though --- no doubt it will help someone else who wanders a long this way.
thumbnail
Ivan Zaera, modified 7 Years ago.
RE: Liferay 7 GA5 - NPM React Portlet Dependency Issue
Regular Member Posts: 119 Join Date: 10/1/13 Recent Posts
That's true. You don't need to exclude anything any more since we merged the fix to this issue, so I would recommend switching to the latest version of the npm build tools, which is 1.6.1. It should be the more stable version.
thumbnail
Andrew Jardine, modified 7 Years ago.
RE: Liferay 7 GA5 - NPM React Portlet Dependency Issue
Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts
Hi Ivan,

Quick question -- is that version published to the NPM repo? or do I still need to clone and build manually from the sources (as I did for 1.6.0)?
thumbnail
Ivan Zaera, modified 7 Years ago.
RE: Liferay 7 GA5 - NPM React Portlet Dependency Issue
Regular Member Posts: 119 Join Date: 10/1/13 Recent Posts
It's published.

You can always check the latests version at the npm registry -> https://www.npmjs.com/package/liferay-npm-bundler

Also, we keep track of the versions at github: https://github.com/liferay/liferay-npm-build-tools/milestones. Open milestones are the ones being developed, while closed ones are already released.

You can also see what each version has. For example, 1.6.1 included the following issues: https://github.com/liferay/liferay-npm-build-tools/milestone/11?closed=1.

To finish with, we have also added a change log here: https://github.com/liferay/liferay-npm-build-tools/blob/master/CHANGELOG.md.

Cheers,
Ivan
thumbnail
Andrew Jardine, modified 7 Years ago.
RE: Liferay 7 GA5 - NPM React Portlet Dependency Issue
Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts
Awesome -- thanks for the details Ivan. Looking forward to doing more with all this stuff.
thumbnail
Martin Bazan, modified 6 Years ago.
RE: Liferay 7 GA5 - NPM React Portlet Dependency Issue
New Member Posts: 8 Join Date: 5/29/13 Recent Posts
Hi Ivan,

I got a similar issue adding a third party component(griddle-react). When i try to build the portlet i get problems when babel tries to process these files, they are all in the "src/" folder of the component. 
Babel failed processing react-redux@5.1.1/src/connect/connect.js: it will be copied verbatim (see report file for more info)
Babel failed processing react-redux@5.1.1/src/connect/mergeProps.js: it will be copied verbatim (see report file for more info)
Babel failed processing react-redux@5.1.1/src/connect/selectorFactory.js: it will be copied verbatim (see report file for more info)
Babel failed processing react-redux@5.1.1/src/components/connectAdvanced.js: it will be copied verbatim (see report file for more info)
I'm using liferay-npm-bundler 2.6.2.

Is there a solution for this problem or a configuration that has to be set?
thumbnail
Ivan Zaera, modified 6 Years ago.
RE: Liferay 7 GA5 - NPM React Portlet Dependency Issue
Regular Member Posts: 119 Join Date: 10/1/13 Recent Posts
That doesn't have to be an error necessarily. It means that those files cannot be processed by Babel (when invoked by the bundler), but that's probably because they are source files and are not in Ecmascript 5 format. If those files are not used during runtime, nothing will fail.
thumbnail
Martin Bazan, modified 6 Years ago.
RE: Liferay 7 GA5 - NPM React Portlet Dependency Issue
New Member Posts: 8 Join Date: 5/29/13 Recent Posts
Thank you Ivan,
today i got the case that some source files failed while building, but the the component worked during runtime. But as i added react-router-dom to the component, some source files failed again while building and during runtime my browser console got folowing errors:
index.js:7 Uncaught (in promise) ReferenceError: global is not defined
    at module.exports (index.js:7)
    at createReactContext (implementation.js:71)
    at createNamedContext (react-router.min.js:1)
&nbsp; &nbsp; at Function.<anonymous> (react-router.min.js:1)
&nbsp; &nbsp; at Loader._setModuleImplementation (loader.js:981)
&nbsp; &nbsp; at defineModules (loader.js:1094)
&nbsp; &nbsp; at loader.js:1113
module.exports @ index.js:7
createReactContext @ implementation.js:71
createNamedContext @ react-router.min.js:1
(anonymous) @ react-router.min.js:1
_setModuleImplementation @ loader.js:981
defineModules @ loader.js:1094
(anonymous) @ loader.js:1113
Promise.then (async)
(anonymous) @ loader.js:1080
_waitForModules @ loader.js:1072
(anonymous) @ loader.js:779
Promise.then (async)
(anonymous) @ loader.js:779
_loadModules @ loader.js:752
(anonymous) @ loader.js:233
Promise.then (async)
(anonymous) @ loader.js:208
require @ loader.js:207
(anonymous) @ (index):619
(index):696 Error: Load timeout for modules: metal-dom/src/all/dom,metal-uri/src/Uri,clay-tooltip/src/ClayTooltip,IT-VehicleOverview-portlet@1.0.0
at loader.js:362</anonymous>

I can't understand why the react-router-dom is crashing my portlet. Do i need to tweak the npm-bundler or exclude some packages or just don't use these modules when they throw errors while bundling? I really would appreciate help.
thumbnail
Ivan Zaera, modified 6 Years ago.
RE: Liferay 7 GA5 - NPM React Portlet Dependency Issue
Regular Member Posts: 119 Join Date: 10/1/13 Recent Posts
The failing code is using "global", which is a node built-in var. So, for some reason it is thinking that it is running inside node instead of the browser.

That is usually caused by the inclusion of a wrong module from a multi-target package in npmjs. I mean, it could be that someone is importing the server-side (node) version of some package instead of the browser one.

Without looking at the offending code and inspecting it in detail is difficult to say anything more...
thumbnail
Martin Bazan, modified 6 Years ago.
RE: Liferay 7 GA5 - NPM React Portlet Dependency Issue
New Member Posts: 8 Join Date: 5/29/13 Recent Posts
Hi Ivan, 

i created a Github https://github.com/zeefoo/liferay-react-example repo with a standard React App and the same app in a Portlet. I hope this is enough for you to look into it.

Thanks for your reply emoticon