Expectation Violation: Duplicate atom keyの対処方法

next.jsでrecoil.jsを使っていて下記のようなエラーに遭遇した際の対処方法を紹介します。 Expectation Violation: Duplicate atom key "foobar". This is a FATAL ERROR in production. But it is safe to ignore this warning if it occurred because of hot module replacement.

結論から言うと、このエラーはnode.jsの問題であり、無視して構わないものになります。気になる場合は、

yarn add next-intercept-stdout

して、 next.config.jsに下記を入れるとエラーメッセージを出ないようにできます。

const intercept = require("intercept-stdout")

// safely ignore recoil warning messages in dev (triggered by HMR)
function interceptStdout(text) {
  if (text.includes("Duplicate atom key")) {
    return ""
  }
  return text
}

if (process.env.NODE_ENV === "development") {
  intercept(interceptStdout)
}

また、このエラーが起きている原因としては、同じファイル(recoilのatomのファイル）が何度も読み込みがされることで起きます。

複数回読み込みがされるのは、例えば、開発中にファイルが変更されるときなどです。

参考: [SSR][NextJS] Duplicate atom key during development and during production build in nextjs #733