The requested module /node_modules/.vite/@mdx-js_react.js?v=d545b648 does not provide an export named mdx

[aleclarson]

Originally posted by @hfabio in #44 (comment)

Just wanted to add a bit more helpful info for others who venture here. I was successful with these steps:

• Did not set type: "module" in my package.json. For me this caused a ton of other issues.
• Added the MDX plugin in my vite.config.ts like this:

import { defineConfig } from 'vite';

export default defineConfig(async () => {
  const mdx = await import('@mdx-js/rollup');

  return {
    plugins: [mdx.default()]
  };
});

• Had to set "target": "esnext" in my tsconfig.json otherwise I was getting transpilation errors

Does someone faced this kind of error?
Uncaught SyntaxError: The requested module '/node_modules/.vite/@mdx-js_react.js?v=d545b648' does not provide an export named 'mdx'

I'm using:

• react - ^17.0.2
• vite - ^2.5.3
• @storybook/react - ^6.4.19
• storybook-builder-vite - ^0.1.15
• @mdx-js/react -^2.0.0
• @mdx-js/rollup - ^2.0.0
• vite-plugin-mdx - ^3.5.10

This is my .storybook/main.js:

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  core: {
    builder: 'storybook-builder-vite',
  },
};

and this is my vite.config.ts:

import { defineConfig } from 'vite';
import camelCase from 'camelcase';
import * as path from 'path';
import * as fs from 'fs';
import dts from 'vite-plugin-dts';
import eslint from 'vite-plugin-eslint';
import reactRefresh from '@vitejs/plugin-react-refresh';
import mdx from '@mdx-js/rollup';
import pkg from './package.json';

// `options` are passed to`@mdx-js/mdx`
const mdxOptions = {
  // See https://mdxjs.com/advanced/plugins
  remarkPlugins: [
    // E.g. `remark-frontmatter`
  ],
  rehypePlugins: [],
};

const getEntry = () => {
  const tsxFile = path.resolve(__dirname, 'src/index.tsx');
  if (fs.existsSync(tsxFile)) return tsxFile;
  const tsFile = path.resolve(__dirname, 'src/index.ts');
  if (fs.existsSync(tsFile)) return tsFile;
  throw new Error('Cannot find entry. (src/index.tsx or src/index.ts)');
};
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    reactRefresh(),
    eslint({ fix: true, throwOnWarning: false }),
    dts({ tsConfigFilePath: './tsconfig.build.json', insertTypesEntry: true }),
    mdx(mdxOptions),
  ],
  esbuild: {
    jsxInject: "import * as React from 'react';",
  },
  build: {
    lib: {
      entry: getEntry(),
      name: camelCase(path.basename(pkg.name)),
      fileName: (format) => `index.${format}.js`,
    },
    rollupOptions: {
      external: ['react', 'react-dom', 'styled-components'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
          'styled-components': 'styled',
        },
      },
    },
  },
});

[aleclarson]

Have you tried deleting your node_modules/.vite folder?

[hfabio]

Have you tried deleting your node_modules/.vite folder?

no, I didn't, and the time was passing, so I aborted the idea...