How to fix "unexpected syntax error: unexpected token export" occurring when I'm trying to add a JS file that consists of an export command in the clientlibs?

[Sijith]

I am trying to add a JS file into my component's clientlibs folder. That file contains an export command which is causing an error when I am opening a page saying: "Unexpected syntax error: Unexpected token export". I searched and found a solution to add type="module" to the script tag, but since I am including the file through data-sly-call in customfooterlibs, I'm not sure what to do. The export command is "export default Product" where Product is a class. How do I solve this issue?

[malay_dube]

Hi @Sijith ,
It happens for 2 main reasons. please find below.

1. Using the ES6 Module syntax in a Node.js application without  type  to module in package.json.
2. Using the ES6 Module syntax in a script without setting type to module in the script tag.

You need to include the file with a type attribute set to "module":

<script type="module" src="module.js"></script>

then it should work as expected and you are ready to import your module in another module:

import { foo, bar } from "./module.js";

console.log( foo() );
console.log( bar );

[Sijith]

Thanks @malay_dube  for the reply! But the thing is I am not using node.js at all but  including the file through clientlibs using:

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
<sly data-sly-call="${clientlib.js @ categories='my-categories.base'}"/>
</sly>

My JS file is in situated in the clientlibs folder with the category "my-categories.base". So even a script tag is not being used to include the JS.

[malay_dube · Accepted solution]

Hi @Sijith ,

Steps to be followed.
1) Remove all the logic inside the JS, just add one console or alert statement and see it's appearing or not.
2) If yes, add all of your logic inside JS and check page console.
3) If No, add those tags in page rendering component. 

[Aditya_Chabuku]

Hi @Sijith ,

 Did you try to include this tag in Page Rendering Component.? can you include that and see what's happening.