Importing a third-party JS package with liferay-npm-bundler will result into "Cannot use import statement outside a module"
Written By
Alfonso Crisci
How To articles are not official guidelines or officially
supporteddocumentation. They are community-contributed content and may
not alwaysreflect the latest updates to Liferay DXP. We welcome your
feedback toimprove How to articles!
While we make every effort to ensure this Knowledge Base is accurate,
itmay not always reflect the most recent updates or official
guidelines.We appreciate your understanding and encourage you to reach
out with anyfeedback or concerns.
Legacy Article
You are viewing an article from our legacy
"FastTrack"publication program, made available for
informational purposes. Articlesin this program were published without a
requirement for independentediting or verification and are provided
"as is" withoutguarantee.
Before using any information from this article, independently verify
itssuitability for your situation and project.
Resolution
- The issue is a known limitation of the bundler v.2, the same topic was discussed here: https://github.com/liferay/liferay-js-toolkit/issues/261
In details, the bundler has always expected third party modules to be in CommonJS/ES5 format, but certain libraries are mixing ES5 syntax with import
/export
statements, which the bundler doesn't understand and thus are directly put into the final JAR, making the minifier flagging them and making the resolution fail in the browser. Said that, there are two possible workarounds:
1) Bundle the project with webpack instead of the bundler and manually integrate it into a portlet
2) Tweak the build so that, by the time the bundler kicks in, the modules have been transpiled from import/export format to CommonJS. This can be achieved by calling babel
prior to the bundler, or even using the bundle's babel-loader plugin to transpile the modules.
We are unable to ensure that the above approaches will reliably work. The engineers will do their best to implement the webpack-like feature in the future version 3 of the bundler.
Did this article resolve your issue ?