Storysource and GFM addons in v10

[nerdyman]

Summary

Hi, I've just upgraded to v10 and ran into a couple of issues. I was using the GFM addon but it doesn't have a v10 release. When I removed it my markdown tables rendered as plaintext instead of tables.

I've put @storybook/addon-mdx-gfm back in addons for now and it's working ok but still shows the console warning. I was also using @storybook/addon-storysource but can't find a v10 release for it either.

The table issue only seems to occur with this table specifically:

• https://github.com/nerdyman/react-compare-slider/blob/main/docs/storybook/content/handles.mdx#css-classname

| Class Name | Description |
| :-- | :-- |
| `.__rcs-handle-root` | The root element. |
| `.__rcs-handle-button` | The circular element shown in the middle. |
| `.__rcs-handle-line` | For each line either side of the button. |

Less important but there is also an error when spinning things up but everything works OK, I get this error with or without the GFM and storysource addons so don't think they're releated.

Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@storybook/preset.js'
│  imported from
│  node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/storybook/dist/_node-chunks/chunk-MOOIRZDT.js
│  at Object.getPackageJSONURL (node:internal/modules/package_json_reader:316:9)
│  at packageResolve (node:internal/modules/esm/resolve:768:81)
│  at moduleResolve (node:internal/modules/esm/resolve:858:18)
│  at defaultResolve (node:internal/modules/esm/resolve:990:11)
│  at nextResolve (node:internal/modules/esm/hooks:785:28)
│  at AsyncLoaderHooksOnLoaderHookWorker.resolve
│  (node:internal/modules/esm/hooks:271:30)
│  at handleMessage (node:internal/modules/esm/worker:251:24)
│  at Immediate.checkForMessages (node:internal/modules/esm/worker:193:28)
│  at process.processImmediate (node:internal/timers:504:21)

Have @storybook/addon-mdx-gfm and @storybook/addon-storysource been superseded by something else? Apologies if I missed this being mentioned somewhere.

Here's a link to the repo: https://github.com/nerdyman/react-compare-slider/tree/main/docs/storybook

Additional information

No response

Create a reproduction

No response

[dosubot[bot]]

Hi @nerdyman! I'm Dosu and I’m helping the storybook team.

Both @storybook/addon-mdx-gfm and @storybook/addon-storysource were removed in Storybook 9 and are not supported in v10. Here’s how to restore your previous functionality:

GFM Markdown (tables, etc.):

• Install remark-gfm as a dev dependency:

  npm install --save-dev remark-gfm
  

• In your .storybook/main.js (or .ts), enable GFM support by configuring @storybook/addon-docs:

  import remarkGfm from 'remark-gfm';
  
  export default {
    addons: [
      {
        name: '@storybook/addon-docs',
        options: {
          mdxPluginOptions: {
            mdxCompileOptions: {
              remarkPlugins: [remarkGfm],
            },
          },
        },
      },
      // ...other addons
    ],
  };

• Remove @storybook/addon-mdx-gfm from your addons list.
  Details & migration guide

Story Source/Code Preview:

• Remove @storybook/addon-storysource from your project.
• Make sure @storybook/addon-docs is installed.
• Enable the Code Panel by adding this to .storybook/preview.js:

  export const parameters = {
    docs: {
      codePanel: true,
    },
  };

  Docs on Code Panel

About the @storybook/preset.js error:
This error is likely caused by an outdated or removed preset/addon in your config (often @storybook/addon-essentials, which is no longer used in v10). Remove any references to deprecated addons or presets from your configuration.
If you migrated manually, try running:

• npx storybook@latest upgrade to update your setup
• npx storybook doctor to check for version or config mismatches

If you still see the error, check your main.js and package.json for any lingering references to old Storybook packages or presets and remove them.
More info

Let me know if you need help with a specific config snippet or if you run into any other issues!

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[zigzagdev]

@nerdyman

The replacements make sense:

• @storybook/addon-mdx-gfm → use remark-gfm via @storybook/addon-docs
• @storybook/addon-storysource → use the Code panel / Source experience (Storysource was discontinued and Code panel is the replacement).

Re the ERR_MODULE_NOT_FOUND: '@storybook/preset.js': this looks like something in the current config/dependency graph is still importing @storybook/preset.js. Could you paste your .storybook/main.(js|ts) and .storybook/preview.(js|ts) plus the Storybook-related deps from package.json (and Node + pnpm versions)?

Quick check: search the repo/lockfile for @storybook/preset.js (or preset.js) to find which addon/preset is pulling it in.