recoil: Duplicate atom key - in nextjs

Question

I do use recoil in my nextjs application. But if I run next (in dev or production make no difference) I got this error-message:

Duplicate atom key "companyData". This is a FATAL ERROR in production. But it is safe to ignore this warning if it occurred because of hot module replacement.

This is the way I've implemented it:

/src/stores/CompanyStore.js:

import { useSetRecoilState, useRecoilValue , atom } from 'recoil';
import config from '../../content/config.yml';

const companyData = atom({
  key: 'companyData',
  default: {...config.company},
});

export const useSetCompanyData = () => useSetRecoilState(companyData);
export const useCompanyData = () => useRecoilValue(companyData);


export default {
  useSetCompanyData,
  useCompanyData,
};

I use it like this in some components:

MyComponent.js

import React from 'react';
...
...

import {useCompanyData} from '../stores/CompanyStore';

const MyComponent = () => {
  const classes = useStyles();
  const companyData = useCompanyData();
  const { summary: headline, description } = companyData;

return (<div><h2>{headline}</h2><p>{description}</p>)

I don't see, why this error-message appears. Might it caused of a bug in nextjs, or did I implement recoil in a wrong way?

Leroy

Answer 1

Looks like a problem with recoil in nextjs when you have state in a separate file: https://github.com/facebookexperimental/Recoil/issues/733

Magnesia

Yep, sounds like the solution for my question, as I don't see any errors by exporting or building the Page. Thanks r03 – Leroy

Answer 2

As of Recoil 0.7.6, add RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false to your environment to hide these warnings.

(roeland had the correct GitHub issue, which has since been closed)

Accost

Works for me. Add it to dev mode: RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false next dev – Acetophenetidin