DOM-related Error with React Query and MSW in Storybook

[chosim-dvlpr]

Summary

I’m encountering the following error when using React Query with MSW (Mock Service Worker) in Storybook:

createRoot(...): Target container is not a DOM element.

The error occurs depending on the configuration of the project’s entry point (main.tsx) and whether a React Query mutation (useFeedMutation) is active. When the useFeedMutation in the FeedItem component is commented out, the error does not occur. Below, I’ve detailed the issue and shared relevant code snippets, along with some questions I hope the community can help with.

Problem Context

1. Project main.tsx Code

The project’s entry point, main.tsx, renders the React application to the DOM. The error behavior changes based on the code used:

1st Version: No Error in Storybook

const container = document.getElementById('root');

if (container) {
  createRoot(container).render(
    <StrictMode>
      <QueryClientProvider client={queryClient}>
        <ReactQueryDevtools initialIsOpen={true} />
        <LayoutVisibilityProvider>
          <App />
        </LayoutVisibilityProvider>
      </QueryClientProvider>
    </StrictMode>,
  );
}

2nd Version: Error Occurs in Storybook

const container = document.getElementById('root');

createRoot(container!).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <ReactQueryDevtools initialIsOpen={true} />
      <LayoutVisibilityProvider>
        <App />
      </LayoutVisibilityProvider>
    </QueryClientProvider>
  </StrictMode>,
);

2. Storybook-Related Code

FeedItem Component

The FeedItem component triggers a mutation via useFeedMutation from React Query. Notably, when useFeedMutation is commented out, the error does not occur.

import { useSearchParams } from 'react-router-dom';
import useFeedMutation from '@/queries/Feed/useFeedMutation';
import HeartWithCount from '@/components/_common/HeartWithCount/HeartWithCount';
import { formatDateTime } from '@/utils/formatDateTime';
import { manageLikedFeeds } from '@/utils/manageLikedFeeds';

const FeedItem = ({ feed }: FeedItemProps) => {
  const { id, nickname, updatedAt, imageUrl, likeCount, content, treeImageCode } = feed;
  const { addLikeFeedMutation, deleteLikeFeedMutation } = useFeedMutation();
  const [searchParams] = useSearchParams();
  const treeId = Number(searchParams.get('treeId'));

  const handleLiked = () => {
    if (liked) {
      deleteLikeFeedMutation({ feedId: id });
    } else {
      addLikeFeedMutation({ feedId: id });
    }
    manageLikedFeeds(treeId, id);
  };

  return (
    <div>
      <p>{nickname}</p>
      <HeartWithCount isSelected={liked} count={likeCount} onClickIcon={handleLiked} />
    </div>
  );
};

export default FeedItem;

preview.ts

The preview.ts file initializes MSW and sets up React Query and React Router for Storybook.

import { worker } from '../src/mocks/browser';
import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
import { MemoryRouter } from 'react-router-dom';

worker.start();

const queryClient = new QueryClient();

export const decorators = [
  (Story) => (
    <QueryClientProvider client={queryClient}>
      <MemoryRouter>
        <Story />
      </MemoryRouter>
    </QueryClientProvider>
  ),
];

FeedItem.stories.tsx

import type { Meta, StoryObj } from '@storybook/react';
import FeedItem from './FeedItem';

const meta = {
  title: 'Feed/FeedItem',
  component: FeedItem,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
} satisfies Meta<typeof FeedItem>;

export default meta;
type Story = StoryObj<typeof FeedItem>;

const data = {
  id: 1,
  nickname: 'name',
  updatedAt: '2024-12-01',
  imageUrl: 'https://via.placeholder.com/150',
  likeCount: 42,
  content: 'content',
  treeImageCode: 'TREE_01',
};

export const Default: Story = {
  args: { feed: data },
};

My Observations

Use of useFeedMutation

• The error is only triggered when useFeedMutation is active in the FeedItem component. If the mutation is commented out, the error does not occur. I think this suggests a potential timing issue between React Query’s state updates and Storybook’s DOM initialization.

Questions for the Community

1. Does Storybook indirectly reference the main.tsx code in any way?

• While Storybook doesn’t directly execute main.tsx, could certain DOM-related settings from the project impact Storybook?

2. Could this issue stem from MSW worker initialization timing?

• If MSW is not ready to intercept requests, could this be triggering real network calls that lead to the DOM-related conflict?

Any insights or advice from the community would be greatly appreciated! 🙏

Additional information

package.json :

  "dependencies": {
    "@tanstack/react-query": "^5.62.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.28.0"
  },
  "devDependencies": {
    "@chromatic-com/storybook": "^3.2.2",
    "@storybook/addon-essentials": "^8.4.5",
    "@storybook/addon-interactions": "^8.4.5",
    "@storybook/addon-onboarding": "^8.4.5",
    "@storybook/blocks": "^8.4.5",
    "@storybook/react": "^8.4.5",
    "@storybook/react-vite": "^8.4.5",
    "@storybook/test": "^8.4.5",
    "@tanstack/react-query-devtools": "^5.62.1",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "chromatic": "^11.20.2",
    "globals": "^15.11.0",
    "msw": "^2.6.6",
    "storybook": "^8.4.5",
    "typescript": "~5.6.2",
    "vite": "^5.4.10"
  },
  "eslintConfig": {
    "extends": [
      "plugin:storybook/recommended"
    ]
  },

Create a reproduction

No response