Identifier 'module' has already been declared - amplify and nuxt 3

Viewed 520

I am getting an error in nuxt3 then setting up this amplify plugin. I am trying to add auth to nuxt3 via plugins

plugins/amplify.js

import Amplify, {withSSRContext} from 'aws-amplify';
export default defineNuxtPlugin((ctx) => {
  const awsConfig = {
    Auth: {
      region: "ap-south-1",
      userPoolId: "ap-south-1_#########",
      userPoolWebClientId: "#####################",
      authenticationFlowType: "USER_SRP_AUTH",
    },
  };
  Amplify.configure({ ...awsConfig, ssr: true });
  if (process.server) {

    const { Auth } = withSSRContext(ctx.req);
    return {
      provide: {
        auth: Auth,
      },
    };
  }

  return {
    provide: {
      auth: Auth,
    },
  };

}
[nuxt] [request error] Identifier 'module' has already been declared
  at Loader.moduleStrategy (internal/modules/esm/translators.js:145:18)  
  at async link (internal/modules/esm/module_job.js:67:21)

Does anyone know what's going on?

2 Answers

Been facing this myself... I don't think its a nuxt problem but rather Vite.

I gave up on running the app on dev mode and just resorted to building the app and launching it. Also, in order to use aws-amplify with vite you need to apply some workarounds:

https://ui.docs.amplify.aws/vue/getting-started/troubleshooting

For the window statement (which only makes sense on the browser) you'll need to wrap that with an if statement. Added this to my plugin file

if (process.client) {
  window.global = window;
  var exports = {};
}

This will let you build the project and run it with npm run build . Far from ideal but unless someone knows how to fix that issue with dev in vite...

BTW, you can also just switch to webpack builder on nuxt settings and the issue goes away. // https://v3.nuxtjs.org/api/configuration/nuxt.config

export default defineNuxtConfig({
  builder: "webpack"
});

I think this might be a problem with auto imports of nuxt.

I added a ~/composables/useBucket.ts file which I used in ~/api. Same error started popping up the next day. After I moved ~/composables/useBucket.ts to ~/composablesServer/useBucket.ts issue disappeared.

Related