[SSR][NextJS] Duplicate atom key during development and during production build in nextjs

[janus-reith]

Both during local development and also when building a production build, I’m getting a duplicate atom key for each key and each page using it after the first one.

I put together a quick sandbox to demonstrate the issue: https://codesandbox.io/s/flamboyant-sea-tqlky

The errors show up in the build log, a quick way to test is using the integrated vercel deployment button. Looking at the default nextjs example, I can‘t spot any special settings there that would prevent whatever duplication is going on from happening: https://github.com/vercel/next.js/tree/canary/examples/with-recoil That example however only makes use of recoil state on one page.

[juanpprieto]

we got there in the end <3

[christian-gama]

Just faced this issue... Came here and saw this patch 0.7.6 released yesterday. Am I lucky? :laughing:

[aam051102]

@wfortin is correct. Recoil 0.7.6 with RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false in .env solved the issue in our NextJS project. Thank you very much for that information.

[coderhzy]

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

// safely ignore recoil stdout warning messages function interceptStdout(text) { if (text.includes('Duplicate atom key')) { return ''; } return text; }

intercept(interceptStdout);

[Mecil9]

I updated to version 0.7.6 and added the RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false environment variable and it solved it for me. I think this ticket can be closed now.

I've been waiting a year for this answer!!!!!!

[hamtarodev]

how can i do this with Vite? on Vite it requires that the env variables should start with VITE_

[satokoki645]

how can i do this with Vite? on Vite it requires that the env variables should start with VITE_

I was thinking this same thing.

[ThomasCarstens]

@hamtarodev @SATOKOKI645 The recoil changelog will help you, as of 6/10/22: https://yarnpkg.com/package/recoil

[tesseractjh]

@ThomasCarstens Thanks! @hamtarodev @SATOKOKI645 RecoilEnv can solve it with Vite.

// configs/recoil.ts
import { RecoilEnv } from 'recoil';

RecoilEnv.RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED = false;

// App.tsx
import './configs/recoil';

function App() {
  return (
    <RecoilRoot>
        { ... }
    </RecoilRoot>
  );
}

[qqww08]

Thanks to this, I was able to remove the console log from nextJS. This is my code

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  env: {
// @see https://github.com/facebookexperimental/Recoil/issues/2135#issuecomment-1362197710
    RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED: "false",
  }
};

module.exports = nextConfig;

[LOGANLEEE]

@ThomasCarstens Thanks! @hamtarodev @SATOKOKI645 RecoilEnv can solve it with Vite.

// configs/recoil.ts
import { RecoilEnv } from 'recoil';

RecoilEnv.RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED = false;

// App.tsx
import './configs/recoil';

function App() {
  return (
    <RecoilRoot>
        { ... }
    </RecoilRoot>
  );
}

solved problem.

in my case

• console error on browser but not IDE if I set on env
• no console error on browser but on IDE if I set on next.config.js

lovely thanks.

[MejanH]

Just because of this issue I had to move to Jotai. disabling the Duplicate key checker is not a fix. now, recoil won't check for duplicate keys.

[SGDS666]

I tried all the above methods but they didn't solve my problem. Every time I refresh the page, I report an error, so I rudely used the following method to solve the problem

console.error = (messages, ...rest) => {
  if (messages?.message?.includes("Duplicate atom key")) {
    return
  }
  console.warn(messages, ...rest)
}

[mickdewald]

Just because of this issue I had to move to Jotai. disabling the Duplicate key checker is not a fix. now, recoil won't check for duplicate keys.

It's said, I know. I will check out Zustand, as I already have for my mobile app. It works like a charm