Amplify(v5以前)+Nuxt2な環境をAmplify v6対応したときにドハマリした話

掲題のケースで思い切りハマってNuxt3かNextへの移行まで考えてしまったので、解決方法をメモしておきます。

何にハマったの？

Amplifyをv6にアップデートすると破壊的変更によりプログラムを色々修正する必要があるのですが、その前にAmplifyライブラリ内でエラーが出るようになるため、Amplifyをtranspileしないと実行できなくなります。

transpileを設定すると、続いてAmplifyのシングルトンがシングルトンじゃなくなるという問題が発生します。

更にそれが解決出来ても、AmplifyフロントからS3に5MBを超えるファイルをアップロードしようとするとBuffer.fromが無いというエラーに襲われます。なんでやねん。

解決策

nuxt.config.jsで、transpile設定しつつCJS版を使うようにしてシングルトン問題を解決します。
更に、Amplifyから呼び出しに失敗するライブラリ群にエイリアスを設定します。

nuxt.config.js

...略...    
  build: {
    transpile: [/aws-amplify/],
    extend(config, { isClient }) {
      // CJS版を強制するためのエイリアス設定（これが無いとtranspileでAmplifyのシングルトンが壊れる現象が発生）
      // Nuxt2ではtranspileは不可避。Nuxt3やNextに移行すれば根本解決が可能かもしれないが、膨大な工数が発生する上に確実ではないためこの方法で対応
      if (isClient) {
        config.resolve.mainFields = ['main', 'browser', 'module']

        // transpileの影響でS3で5MB以上のファイルをアップロードした際にエラーが出るため、Bufferとfast-xml-parserのエイリアスを設定
        config.resolve.alias = {
          ...config.resolve.alias,
          buffer: require.resolve('buffer/'),
          'fast-xml-parser': require.resolve('fast-xml-parser'),
        }
      }
    },
...略...    

手元ではこれで問題が出なくなりましたが、もし他のエラーが出た場合は適切にエイリアスを増やせば大体解決するんじゃないかと思います。
クリティカルなシステムであれば、早めにNuxt3かNextに乗り換えちゃった方が良いのかもしれません。
（だって超大変なんだもん・・・）