SPA AEM Identifier 'XXXX' has already been declared

[AlexTCK7]

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?

[Anmol_Bhardwaj]

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.

[AlexTCK7]

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]

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/