💭

Nextjs + Recoilの"Duplicate atom key"メッセージを解消するには

2022/07/09に公開約1,000字


今回自作アプリ開発で初めてRecoilを使うことになり、installしてatom設定していざ使ってみようとすると
タイトルのメッセージが出てきたので、どう対処してこれを消したのか。
なんでこれが表示されるのか

原因

https://github.com/facebookexperimental/Recoil/issues/733#issuecomment-729255961

これはnextjsに限った話ではなくて、複数のエントリーポイントがあると一度作成したatomを別のエントリーポイントから再生成したり、一部ファイルを変更した際の再ビルドでatomを構築してしまい、keyに被り"duplicate ..."になるとのこと

なので、基本的な解決策としては無視するような設定をアプリケーションにすることでメッセージを消します

nextjsの場合どうやるの

いじるファイル

  • next.config.js

npm i next-intercept-stdoutでメッセージを無視するためのパッケージを入れる

next.config.js

const withInterceptStdout = require('next-intercept-stdout');


const nextConfig = withInterceptStdout(
  {
    reactStrictMode: true,
    swcMinify: false,
    ignoreDuringBuilds: true,
    staticPageGenerationTimeout: 1000
  },
  (text) => (text.includes('Duplicate atom key') ? '' : text),
);

module.exports = nextConfig

参照

https://www.npmjs.com/package/next-intercept-stdout
https://github.com/facebookexperimental/Recoil/issues/733

Discussion

ログインするとコメントできます