Storybook docs-only pages not loading without Story

[KevinGhadyani-Okta]

Summary

I have Storybook pages that only contain docs with no stories or <Meta>. They're there as informative pages to explain how to use our component library.

Ever since upgrading to Storybook v8, I had to change my .stories.mdx files which only contained docs (no components) into regular .mdx files. Now, I need an accompanying .stories.ts file to load the .stories.mdx file. This occurred when running the Stories MDX codemod for Storybook v7 to v8.

Now, no MDX files are loading unless there's an associated story available in the .stories.ts file.

Even if I do add a story, I receive an error:

Cannot add property parameters, object is not extensible

How am I supposed to have docs-only pages in Storybook using MDX files that didn't have an accompanying stories file and aren't associated with component stories?

Example:

Additional information

main.ts

/*!
 * Copyright (c) 2021-present, Okta, Inc. and/or its affiliates. All rights reserved.
 * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
 *
 * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *
 * See the License for the specific language governing permissions and limitations under the License.
 */

import type { StorybookConfig } from "@storybook/react-vite";
import { dirname, join } from "node:path";
/**
 * This function is used to resolve the absolute path of a package.
 * It is needed in projects that use Yarn PnP or are set up within a monorepo.
 */
const getAbsolutePath = (value: string): any => {
  return dirname(require.resolve(join(value, "package.json")));
};

const config: StorybookConfig = {
  addons: [
    {
      name: "@storybook/addon-docs",
      options: {
        transcludeMarkdown: true,
      },
    },
    getAbsolutePath("@storybook/addon-links"),
    getAbsolutePath("@storybook/addon-a11y"),
    getAbsolutePath("@storybook/addon-essentials"),
    getAbsolutePath("@storybook/addon-interactions"),
    getAbsolutePath("@storybook/addon-mdx-gfm"),
    // getAbsolutePath("storybook-addon-rtl-direction"),
  ],
  core: {
    builder: "@storybook/builder-vite",
    disableTelemetry: true,
  },
  docs: {
    autodocs: true,
  },
  framework: {
    name: getAbsolutePath("@storybook/react-vite"),
    options: {},
  },
  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)", "../src/**/*.mdx"],
  typescript: {
    check: false,
    reactDocgen: "react-docgen-typescript",
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => {
        if (!prop.parent) return true;
        return (
          /odyssey-react-mui/.test(prop.parent.fileName) ||
          !/node_modules/.test(prop.parent.fileName)
        );
      },
    },
  },
  staticDirs: ["../src/static"],
};

export default config;

package.json

    "@pxblue/storybook-rtl-addon": "^1.1.0",
    "@storybook/addon-a11y": "^8.4.5",
    "@storybook/addon-essentials": "^8.4.5",
    "@storybook/addon-interactions": "^8.4.5",
    "@storybook/addon-links": "^8.4.5",
    "@storybook/addon-mdx-gfm": "^8.4.5",
    "@storybook/blocks": "^8.4.5",
    "@storybook/components": "^8.4.5",
    "@storybook/core-events": "^8.4.5",
    "@storybook/manager-api": "^8.4.5",
    "@storybook/preview-api": "^8.4.5",
    "@storybook/react": "^8.4.5",
    "@storybook/react-vite": "^8.4.5",
    "@storybook/test": "^8.4.5",
    "@storybook/test-runner": "^0.19.1",
    "@storybook/theming": "^8.4.5",
    "@types/mdx": "^2.0.11",
    "@types/react": "^18.2.55",
    "@types/react-dom": "^18.2.19",
    "storybook": "^8.4.5",
    "storybook-addon-rtl-direction": "^0.0.19",
    "typescript": "^5.6.3",
    "vite": "^5.4.11",

No error messages unless I purposefully try to break it, it just doesn't load stories files without a story.

Your reproduction works, but mine is not.

Create a reproduction

No response

[KevinGhadyani-Okta]

The solution appears to be that the codemod broke it.

I don't want the .stories.ts files. You can add .mdx by itself to main.ts (per your sandbox example). All I needed to do was to change .stories.mdx to .mdx, and it would've worked fine. For some reason, the codemod changed these files and removed the Meta at the top causing this problem.