Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

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?

Avatar

Level 1

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?

1 Accepted Solution

Avatar

Correct answer by
Level 3

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. 

View solution in original post

4 Replies

Avatar

Level 3

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 );



Avatar

Level 1

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.

 

Avatar

Correct answer by
Level 3

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. 

Avatar

Community Advisor

Hi @Sijith ,

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

Thanks,

Aditya Chabuku