MDX Docs' StorybookJS Default Theme Not Working After Upgrades to Storybook v7.0.0-alpha.34 with ReactJS v18.2.0 + NextJS v12.3.1

[sgrobert]

Describe the bug
I had a partially-working copy (Ref: #18383), after downgrading some @mdx-js libraries to a previous version 1.6.22 as follows:

"@mdx-js/preact": "^1.6.22",
"@mdx-js/react": "^1.6.22",

However, as my work build has currently progressed forward into a monorepo build using lerna + pnpm, I had to migrate forward to the latest versions of the @mdx-js libraries to enable some cross-libraries' functions.

Tentatively, I have managed to somehow "fixed" most of the "constantly-breaking" issues, but the main issue that I can't seem to fix is still having the default StorybookJS theme being properly displayed, and the UI issues I'm facing right now are similar to the ones I have previously reported #18383.

To Reproduce
[This is a work-related build, thus I will not be able to showcase all the info]

Please bear in mind that this issue relates to a monorepo build just to clear any potential confusion in the file structure.

The key point to also note is that this build is running on MDX2.

These are the main related dependencies I'm using:

// modules/docs/package.json (_This is a documentation module within a monorepo_)
...
"dependencies": {
    ...
    "@mdx-js/loader": "^2.1.3",
    "@mdx-js/mdx": "2.1.3",
    "@mdx-js/preact": "2.1.3",
    "@mdx-js/react": "2.1.3",
    "@storybook/addon-actions": "7.0.0-alpha.34",
    "@storybook/addon-docs": "7.0.0-alpha.34",
    "@storybook/addon-essentials": "7.0.0-alpha.34",
    "@storybook/addon-interactions": "7.0.0-alpha.34",
    "@storybook/addon-links": "7.0.0-alpha.34",
    "@storybook/builder-webpack5": "7.0.0-alpha.34",
    "@storybook/cli": "7.0.0-alpha.34",
    "@storybook/manager-webpack5": "6.5.12",
    "@storybook/react-webpack5": "7.0.0-alpha.34",
    "react": "18.2.0",
    "react-dom": "^18.2.0",
    "storybook": "^6.5.12",
    ...
  },
  "devDependencies": {
    ...
    "@storybook/addon-actions": "7.0.0-alpha.34",
    "@storybook/addon-links": "7.0.0-alpha.34",
    "@storybook/addon-postcss": "2.0.0",
    "@storybook/mdx2-csf": "^0.0.3",
    "@storybook/react": "6.5.12",
    "@storybook/testing-library": "^0.0.13",
    "@storybook/ui": "6.5.12",
    ...
    "next": "12.3.1",
    "preact": "^10.11.0",
    "storybook-addon-next": "1.6.9",
    ...
  },

System
Please paste the results of npx sb@next info here.

Environment Info:

  System:
    OS: macOS 12.5.1
    CPU: (8) arm64 Apple M1
  Binaries:
    Node: 16.15.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.5.5 - /usr/local/bin/npm
  Browsers:
    Chrome: 105.0.5195.125
    Firefox: 100.0.2
    Safari: 16.0
  npmPackages:
    @storybook/addon-actions: 7.0.0-alpha.34 => 7.0.0-alpha.34 
    @storybook/addon-docs: 7.0.0-alpha.34 => 7.0.0-alpha.34 
    @storybook/addon-essentials: 7.0.0-alpha.34 => 7.0.0-alpha.34 
    @storybook/addon-interactions: 7.0.0-alpha.34 => 7.0.0-alpha.34 
    @storybook/addon-links: 7.0.0-alpha.34 => 7.0.0-alpha.34 
    @storybook/addon-postcss: 2.0.0 => 2.0.0 
    @storybook/builder-webpack5: 7.0.0-alpha.34 => 7.0.0-alpha.34 
    @storybook/cli: 7.0.0-alpha.34 => 7.0.0-alpha.34 
    @storybook/manager-webpack5: 6.5.12 => 6.5.12 
    @storybook/mdx2-csf: ^0.0.3 => 0.0.3 
    @storybook/react: 6.5.12 => 6.5.12 
    @storybook/react-webpack5: 7.0.0-alpha.34 => 7.0.0-alpha.34 
    @storybook/testing-library: ^0.0.13 => 0.0.13 
    @storybook/ui: 6.5.12 => 6.5.12 

Additional context

• TL;DR: Running the npm run storybook command works, but the default theme is just not loading.
• Due to the upgrade to Storybook v7.0.0-alpha.34, the new npm run storybook script command is now sb dev instead of the previous start-storybook (Ref link of migration to v7.0).
• Sometimes, the dev command doesn't work all the time and randomly throws out a various series of different types of errors from time-to-time like:
• [a] WARN Force closed manager build:

/node_modules/.pnpm/[email protected]/node_modules/webpack/lib/NormalModule.js:758
                                const error = new ModuleBuildError(err, {
                                              ^

ModuleBuildError: Module build failed (from ../../node_modules/.pnpm/[email protected]_wfdvla2jorjoj23kkavho2upde/node_modules/babel-loader/lib/index.js):
/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/config/config-descriptors.js:224
      throw new Error([`Duplicate plugin/preset detected.`, `If you'd like to use two separate instances of a plugin,`, `they need separate names, e.g.`, ``, `  plugins: [`, `    ['some-plugin', {}],`, `    ['some-plugin', {}, 'some unique name'],`, `  ]`, ``, `Duplicates detected are:`, `${JSON.stringify(conflicts, null, 2)}`].join("\n"));
            ^

Error: Duplicate plugin/preset detected.
If you'd like to use two separate instances of a plugin,
they need separate names, e.g.

  plugins: [
    ['some-plugin', {}],
    ['some-plugin', {}, 'some unique name'],
  ]

Duplicates detected are:
[
  {
    "alias": "/node_modules/.pnpm/[email protected]/node_modules/babel-plugin-add-react-displayname/index.js",
    "dirname": "/modules/docs",
    "ownPass": false,
    "file": {
      "request": "/node_modules/.pnpm/[email protected]/node_modules/babel-plugin-add-react-displayname/index.js",
      "resolved": "/node_modules/.pnpm/[email protected]/node_modules/babel-plugin-add-react-displayname/index.js"
    }
  },
  {
    "alias": "/node_modules/.pnpm/[email protected]/node_modules/babel-plugin-add-react-displayname/index.js",
    "dirname": "/modules/docs",
    "ownPass": false,
    "file": {
      "request": "/node_modules/.pnpm/[email protected]/node_modules/babel-plugin-add-react-displayname/index.js",
      "resolved": "/node_modules/.pnpm/[email protected]/node_modules/babel-plugin-add-react-displayname/index.js"
    }
  }
]

• [b] Endless Cycles of WARN Failed to load preset

I hope the above will help provide some context on the issue I'm facing, though I do understand that due to the alpha release, there will still be a lot of issues to iron out before it becomes stable.

Hope to seek some guidance on the above.

Thank you!