recoil: Duplicate atom key – in nextjs


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:


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

const companyData = atom({
  key: 'companyData',
  default: {},

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

export default {

I use it like this in some components:


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?


Looks like a problem with recoil in nextjs when you have state in a separate file:

Leave a Reply

Your email address will not be published. Required fields are marked *