SPA AEM Identifier 'XXXX' has already been declared | Community
Skip to main content
A
AlexTCK7
January 23, 2023

SPA AEM Identifier 'XXXX' has already been declared

  • January 23, 2023
  • 1 reply
  • 2019 views

Hi, I am currently developing an application in Vue 3 that uses Vite to generate the necessary files for the deployment to live environment, previously we used webpack and with the help of the aem-clientlib-generator library we generated the necessary files to be embedded in

ui.apps/src/main/content/jcr_root/[name_folder]/clientlibs/[clientlib_name]/[clientlib_app]/[clientlib_files],

previously with Vue 2 and Webpack this worked great but since we decided to take the leap to Vue 3 and Vite now we are not able to make it work in the live environment because we always get this error:

 

Identifier 'e' has already been declared

 

Our AEM developers provided us with the <script type="module"> since it previously told us something about the imports but we are still stuck here. Does anyone know how to fix this?

 

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

Anmol_Bhardwaj
Community Advisor
Anmol_BhardwajCommunity Advisor
Community Advisor
January 23, 2023

Hi @alextck7 ,

You can try webpack's ProvidePlugin to globally set the variable name for the library,  so that it doesn't conflict with any other variable names in your application.

Another solution(which is almost like a workaround) could be to use webpack's externals property to exclude the library from the bundle and include it directly in the HTML.

    A
    AlexTCK7Author
    January 23, 2023

    Hi @anmol_bhardwaj thanks for your reply.

     

    I have not understood what you have said. The bundle generates it perfectly for me because I have even been able to deploy it in Vercel and githubpages to rule out possible errors in the bundle.

     

    This is what the index.html generated by my bundle looks like, but I guess this is probably not used for the clientlib that will be displayed later in my AEM page, right?

     

     

      Anmol_Bhardwaj
      Community Advisor
      Anmol_BhardwajCommunity Advisor
      Community Advisor
      January 24, 2023

      Yes, you are correct.

      For the bundle issue, if you are able to run just the JS application independently without any issues, it could be that there is a variable which is in global-scope, but is not part of your JS application. (Maybe present in some OOTB clientlib or a dependency/embedded clientlib ) or maybe a OOTB file or embedded file in the vue bundle.

       

      You can try to rollup to bundle your Vue 3 application and the aem-clientlib-generator library together, so that all of the variables are scoped within the bundle and don't conflict with each other.

       

      You can also try using <script nomodule> instead of <script type="module">

       

      It's also worth noting that since the release of Vue 3, the ecosystem has changed and different libraries may not be compatible with it. You might have to look for alternatives or update the library you are using. 

      https://v3-migration.vuejs.org/breaking-changes/ 

        Terms & ConditionsAccessibility statement

        Loading footer...