Legacy Knowledge Base
Published Jul. 2, 2025

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.

Issue

  • When adding and importing a third-party package dependency to a Liferay NPM module made with the Liferay Bundler (for example, npm Angular Portlet Template, the following errors may be observed in the server/browser's console:
    Uncaught SyntaxError: Cannot use import statement outside a module
    Uncaught SyntaxError: Unexpected token 'export'

Environment

  • Liferay DXP 7.0+

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 ?

Legacy Knowledge Base