javascriptreactjsstorybookwebpack-5

Storybook/react/webpack5 unable to index

I have a project (node 24, react16, webpack5 & babel )and I'm trying to integrate it with storybook9; when I run the script npm run storybook

It throws:

...
Unable to index ./src/components/Button/stories/index.story.js:
  Error: Invariant failed: No matching indexer found for /Users/me/my-project/src/components/Button/stories/index.story.js
...

main.js

/** @type { import('@storybook/react-webpack5').StorybookConfig } */
const config = {
  stories: [ "../src/**/stories/index.story.@(js|jsx)" ],
  addons: [
    "@storybook/addon-docs",
    "@storybook/addon-webpack5-compiler-babel"
  ],
  framework: {
    name: "@storybook/react-webpack5",
    options: {
        fsCache: true,
        lazyCompilation: true,
      },
  },
};
export default config;

and my story file is

import React, { lazy } from 'react';
import { fn } from 'storybook/test';

import Button from '..';

const InnerComponent = lazy(() => new Promise((resolve) => {
  setTimeout(() => resolve(import('./mockComponent')), 1000);
}));
const Loader = () => <div>Loading...</div>;

export default {
  title: 'Button',
  component: Button,
  tags: ['autodocs'],
  args: {
    Loader,
    Component: InnerComponent,
  },
};

Am I missing something?

Solution

  • My solution:

    1. First ignore the stories config: it kinda ignore the glob expected file position.

    2. Launch the storybook server and click the + icon on the top left, search for your file to been storied > it will create a valid story ignoring the "stories" config

    Note: