Trying to build a minimal example

[caneta]

On a Liferay DXP fixpack 32 environment and Node 8.2.1, I'm trying to get work a minimal example, but maybe I'm missing something because after put in page my portlet, I get the error described below.

Inside my Liferay workspace, I've made the following:

blade create -t mvc-portlet npmBundlerExample
cd ${LIFERAY_WORKSPACE}/modules/src/main/resources/META-INF/resources
npm init
npm install --save-dev liferay-npm-bundler
npm install --save-dev liferay-npm-bundler-preset-standard

package.json:

{
  "name": "npm-bundler-example",
  "version": "1.0.0",
  "description": "",
  "main": "lib/index.js",
  "scripts": {
    "build": "liferay-npm-bundler"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "liferay-npm-bundler": "^1.2.2",
    "liferay-npm-bundler-preset-standard": "^1.2.2"
  }
}

.npmbundlerrc:

{
  "preset": "liferay-npm-bundler-preset-standard"
}

lib/index.js:

console.log('test');

view.jsp:

<%@ include file="/init.jsp" %>
<p><b><liferay-ui:message key="npmBundlerExample.caption"/></b></p>

<aui:script require="npm-bundler-example@1.0.0"></aui:script>

After a blade gw modules:npmBundlerExample:deploy I put my portlet in page and I get in the JavaScript browser console the following (the first line is my console.log):

test
Error: Load timeout for modules: npm-bundler-example@1.0.0
Stack trace:
require/</</rejectTimeout<@http://localhost:8080/o/frontend-js-web/loader/loader.js?browserId=firefox&minifierType=&languageId=en_US&b=7010&t=1507816061086:2459:20

I can see my module code at the following URLs

http://localhost:8080/o/js/module/${BUNDLE_ID}/npm-bundler-example@1.0.0/lib/index.js
http://localhost:8080/o/js/resolved-module/npm-bundler-example@1.0.0/lib/index.js

But the code is still console.log('test'); and not

Liferay.Loader.define('npm-bundler-example@1.0.0', [], function () {
  console.log('test');
});

as I would expect after a "liferay-npm-bundler-preset-standard" processing... Any suggestions?

Thank you.

[jbalsas]

Hey @caneta, the liferay-npm-bundler targets npm packages in your node_modules folder, but does not affect how your project is built.

You can check the simple-npm-portlet blade sample to see how to configure babel and your build step

@izaera might be able to shed some more light 😉

Let us know if that helps!

[izaera]

True. It's the responsibility of the portlet to make its JS files AMD compatible and loadable by the Liferay loader, and that can be easily done by callling babel.

The bundler just prepares node_modules JS files.

[caneta]

Ok, thank you guys: I will check out the simple-nmp-portlet! Sorry for my super-noob question! 👍

[jbalsas]

No problem, @caneta!!

Please, write down your findings here whenever you're done to know we can close this :)

[izaera]

All feedback is welcome @caneta. Even the problems that may look like noob questions may help us in understanding what you users need 😉

[caneta]

I've imported the simple-npm-portlet into my workspace, but it breaks during the transpileJs task:

user@host:~/project/workspace$ blade gw modules:simple-npm-portlet:deploy
:modules:simple-npm-portlet:compileJava UP-TO-DATE
:modules:simple-npm-portlet:buildCSS UP-TO-DATE
:modules:simple-npm-portlet:processResources UP-TO-DATE
:modules:simple-npm-portlet:downloadNode SKIPPED
:modules:simple-npm-portlet:downloadMetalCli SKIPPED
:modules:simple-npm-portlet:npmInstall
npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.1.2
:modules:simple-npm-portlet:transpileJS
Running 'build'...
Compiling soy
Finished compiling soy
Building to format: amd
stream.js:74
      throw er; // Unhandled stream error in pipe.
      ^

ReferenceError: [BABEL] /home/user/project/workspace/modules/simple-npm-portlet/build/resources/main/META-INF/resources/lib/index.es.js: Unknown option: /home/user/project/workspace/modules/simple-npm-portlet/node_modules/babel-preset-liferay-project/lib/index.js.default. Check out http://babeljs.io/docs/usage/options/ for more info
    at Logger.error (/home/user/project/workspace/modules/simple-npm-portlet/node_modules/metal-cli/node_modules/babel-core/lib/transformation/file/logger.js:39:11)
    at OptionManager.mergeOptions (/home/user/project/workspace/modules/simple-npm-portlet/node_modules/metal-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:267:20)
    at /home/user/project/workspace/modules/simple-npm-portlet/node_modules/metal-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:349:14
    at /home/user/project/workspace/modules/simple-npm-portlet/node_modules/metal-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:369:24
    at Array.map (native)
    at OptionManager.resolvePresets (/home/user/project/workspace/modules/simple-npm-portlet/node_modules/metal-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:364:20)
    at OptionManager.mergePresets (/home/user/project/workspace/modules/simple-npm-portlet/node_modules/metal-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:348:10)
    at OptionManager.mergeOptions (/home/user/project/workspace/modules/simple-npm-portlet/node_modules/metal-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:307:14)
    at OptionManager.addConfig (/home/user/project/workspace/modules/simple-npm-portlet/node_modules/metal-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:207:10)
    at OptionManager.findConfigs (/home/user/project/workspace/modules/simple-npm-portlet/node_modules/metal-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:413:16)
:modules:simple-npm-portlet:transpileJS FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':modules:simple-npm-portlet:transpileJS'.
> Process 'command '/home/user/project/workspace/modules/simple-npm-portlet/build/node/bin/node'' finished with non-zero exit value 1

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

Total time: 5.284 secs

[izaera]

Mmmm, that's because gradle's npm plugin is outdated which, in turn, is due to blade's version, which is older than needed. In fact, AFAIK, there's no blade version available yet 😔, though it should be coming in the next days.

Try to force the version of gradle's npm plugin in your build.gradle file by adding these lines:

buildscript {
    dependencies {
        classpath group: "com.liferay", name: "com.liferay.gradle.plugins.node", version: "3.2.1"
    }

    repositories {
        maven {
            url "https://cdn.lfrs.sl/repository.liferay.com/nexus/content/groups/public"
        }
    }
}

as explained here.

[caneta]

No, it doesn't work to me, same error reported above. Any other workaround maybe?

[jbalsas]

Hey @caneta, off the top of my head, you would need to disable transpileJS and configJSModules and then create your own task to invoke npm run build. Maybe @ithildir can help us out with the exact steps.

Another option is to use this temporary version of blade we created for DevCon until the new one gets released...

[izaera]

Do you have a public repo with your example @caneta ? So that I can reproduce it locally...

A ZIP file would also be OK.

[caneta]

@izaera : here my example; it is just a copy of liferay-blade-sample simple-npm-portlet, with a build.gradle file modified as you suggested

@jbalsas: maybe it is better to wait for the latest blade version to come out, if this is a matter of few days...by the way, congrats for your speech at DevCon on this topic!

[jbalsas]

Thanks @caneta, glad you liked it, and hope you can eventually benefit from all the work we (specially @izaera) have put on this. As Iván said, please, keep the feedback coming.

Regarding Blade, @gamerson should know more about the timeline...

[izaera]

Hi @caneta, try the following:

1. Go to your blade workspace directory (not the module, but the workspace)
2. Open your settings.gradle file and look for the gradle worspace plugin. It should look similar to this:

buildscript {
        dependencies {
                classpath group: "com.liferay", name: "com.liferay.gradle.plugins.workspace", version: "1.7.0"
        }

        repositories {
                maven {
                        url "https://cdn.lfrs.sl/repository.liferay.com/nexus/content/groups/public"
                }
        }
}

apply plugin: "com.liferay.workspace"

3. Make sure that you have at least version 1.7.0 of this plugin.

That should take care of everything, and apply the correct node plugin (the one that invokes npm run build).

[caneta]

Yeah @izaera, that worked! I was able to build, deploy and put in page the simple-npm-portlet. I restored the build.gradle file to the original one and changed the settings.gradle as you suggested. I've updated my example too.

Thank you again guys, I think you can close this issue!