liferay-npm-bundler でサードパーティの JS パッケージをインポートすると、"Cannot use import statement outside a module" となります。

ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

問題

• Liferay Bundlerで作成したLiferay NPMモジュール（例えば、 npm Angular Portlet Templateなど）にサードパーティ製パッケージの依存関係を追加してインポートすると、サーバー/ブラウザのコンソールで以下のようなエラーが発生することがあります。
  

  Uncaught SyntaxError: Cannot use import statement outside a module
  Uncaught SyntaxError: Unexpected token 'export'

環境への配慮

• ライフレイDXP 7.0

決議

• この問題は、バンドルラー v.2 の既知の制限事項であり、同じトピックはここで議論されました。 https://github。com/liferay/liferay-js-toolkit/issues/261
  
  詳細を見ると、バンドルラーは常にサードパーティのモジュールがCommonJS/ES5形式であることを期待しています。しかし、特定のライブラリでは、 import/export ステートメントにES5の構文が混ざっていて、バンドルラーが理解できないため、最終的なJARに直接入れられてしまい、ミニファイヤーがフラグを立ててしまい、ブラウザでの解決に失敗してしまいます。 そういえば、2つの回避策があります。
  
  1) バンドルラーの代わりにプロジェクトをwebpackでバンドルし、手動でポートレットに統合する
  
  2) バンドルラーが起動する頃には、モジュールがインポート/エクスポート形式からCommonJSに移されているようにビルドを微調整する。 これは、バンドルの前に babel を呼び出すか、バンドルの babel-loader プラグインを使ってモジュールを transpile することで実現できます。
  
  上記のアプローチが確実に動作することを保証することはできません。 エンジニアは今後のバージョン3のバンドルでWebpack的な機能を実装できるように頑張ります。