Yet another ... [vite] Internal server error: Could not parse expression with acorn: Unexpected content after expression Plugin: storybook:mdx-plugin

[thediveo]

I've researched high and low but what am I doing wrong...?

• Unattached Documentation #24773
• [storybook:mdx-plugin] Could not parse expression with acorn: Unexpected content after expression #24789

I just get the rather useless message:

[vite] Internal server error: Could not parse expression with acorn: Unexpected content after expression
  Plugin: storybook:mdx-plugin
  File: XXXX:undefined:undefined

Following the trouble-shooting notes, my file https://github.com/thediveo/lxkns/blob/0e9028346f7008f9041db3f31777d828c01737cc/web/lxkns/src/introduction.sb.mdx parses fine in the sandbox.

This seems to be terribly fragile; I tried the things from the referenced issues, but could not get this to work at all. Please help!

Update: I actually notice that even importing any MDX (v2) as part of my components implementation does also fail. In contrast, MDX v2 import works correctly when running a vite build.

[valentinpalkovic]

Which package manager do you use?

[thediveo]

• originally, yarn "classic" 1.
• due to the conflict of jackspeak@2.1.1 with jotai@2 I finally jumped ship and configured Yarn 4 (4.0.1)

The vite/storybook/mdx-problem still persists; if you can, please have a look at my setup in web/lxkns at commit a930441e53ec6e9a866053185983835d41155bf1.

[thediveo]

I've tried commenting out the configuration of the MDXv2 plugin in my vite.config.ts as follows and this made the squirrel error go away. Now, how do I configure MDX remark and rehype plugins in Storybook?

export default defineConfig(() => {
    return {
        base: './',
        server: {
            proxy: {
                '/api': 'http://localhost:5010',
            },
        },
        build: {
            outDir: 'build',
            // https://stackoverflow.com/questions/69260715/skipping-larger-chunks-while-running-npm-run-build
            rollupOptions: {
                output:{
                    manualChunks(id) {
                      if (id.includes('node_modules')) {
                          return id.toString().split('node_modules/')[1].split('/')[0].toString();
                      }
                  }
                }
            },
        },
        plugins: [
            /*
            {
                enforce: 'pre',
                ...mdx({
                    remarkPlugins: [
                        remarkGfm,
                        remarkImages,
                        remarkGEmoji,
                        [remarkTextr, {
                            plugins: [
                                textrTypoApos,
                                textrTypoQuotes,
                                textrTypoPossPluralsApos,
                                textrTypoEllipses,
                                textrTypoNumberEnDashes,
                                textrTypoEnDashes,
                            ],
                            options: {
                                locale: 'en-us'
                            }
                        }],
                    ],
                    rehypePlugins: [
                        rehypeSlug,
                    ],
                })
            },
            */
            react({
                jsxImportSource: '@emotion/react',
                babel: {
                    plugins: [
                        '@emotion/babel-plugin',
                    ],
                },
            }),
            eslint({
                exclude: ['/virtual:/**', 'node_modules/**'],
            }),
            viteTsconfigPaths(),
            svgr({
                svgrOptions: {
                    icon: true,
                }
            }),
        ],
    }
})

[charlieperrone]

Try the following, it worked for me:

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