[Bug]: Docs not created with storybook-dark-mode addon integration

[DavidLeonard77]

Describe the bug

I am getting an error when using the storybook-dark-mode addon.

This bug was originally reported on the storybook-dark-mode repository but I was pointed back to storybook.. #hipstersmoothie/storybook-dark-mode#200

The initial error:

ERROR in ./stories/Introduction.stories.mdx 11:0
Module parse failed: Unexpected token (11:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import StackAlt from './assets/stackalt.svg';
| 
> <Meta title="Example/Introduction" />
| 
| <style>

If I remove the "../stories/**/*.stories.mdx" reference in main.js then the app loads successfully EXCEPT there is no documentation and the Docs tab is not present .. only Canvas tab is available.

main.js:

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions"
  ],
  "framework": "@storybook/angular",
  "core": {
    "builder": "@storybook/builder-webpack5"
  },
  "addons": ['storybook-dark-mode']
}

preview.js:

import { setCompodocJson } from "@storybook/addon-docs/angular";
import docJson from "../documentation.json";
import { themes } from "@storybook/theming";
setCompodocJson(docJson);

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  docs: { inlineStories: true },
  darkMode: {
    dark: {
      ...themes.dark,
      appBg: "#161616",
      appContentBg: "#191919"
    },
    light: {
      ...themes.light,
      appBg: "#ffffff",
      appContentBg: "#fafafa"
    },
    classTarget: "html",
    darkClass: "theia-theme-dark",
    lightClass: "theia-theme-light",
    stylePreview: true,
  }
};

package.json:

{
  "name": "theia-ui",
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "docs:json": "compodoc -p ./tsconfig.json -e json -d .",
    "storybook": "npm run docs:json && start-storybook -p 6006",
    "build-storybook": "npm run docs:json && build-storybook"
  },
  "private": false,
  "dependencies": {
    "@angular/animations": "^15.0.0",
    "@angular/common": "^15.0.0",
    "@angular/compiler": "^15.0.0",
    "@angular/core": "^15.0.0",
    "@angular/forms": "^15.0.0",
    "@angular/platform-browser": "^15.0.0",
    "@angular/platform-browser-dynamic": "^15.0.0",
    "@angular/router": "^15.0.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.0.2",
    "@angular/cli": "~15.0.0",
    "@angular/compiler-cli": "^15.0.0",
    "@babel/core": "^7.20.5",
    "@compodoc/compodoc": "^1.1.19",
    "@storybook/addon-actions": "^6.5.13",
    "@storybook/addon-essentials": "^6.5.13",
    "@storybook/addon-interactions": "^6.5.13",
    "@storybook/addon-links": "^6.5.13",
    "@storybook/angular": "^6.5.13",
    "@storybook/builder-webpack5": "^6.5.13",
    "@storybook/manager-webpack5": "^6.5.13",
    "@storybook/testing-library": "^0.0.13",
    "@types/jasmine": "~4.3.0",
    "babel-loader": "^8.3.0",
    "jasmine-core": "~4.5.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "ng-packagr": "^15.0.0",
    "storybook-dark-mode": "^1.1.2",
    "typescript": "~4.8.2"
  }
}

To Reproduce

Sorry I tried this but got an error :(

An error occurred while executing: `npx -p @angular/cli@latest ng new angular --routing=true --minimal=true --style=scss --skip-install=true --strict`
🚨 Bootstrapping angular failed
🚨 Failed to create repro
ERR! Error: command exited with code: 1:
ERR!     at ChildProcess.<anonymous> (C:\Users\david\AppData\Local\npm-cache\_npx\eebb2d3a7d26a7f1\node_modules\@storybook\cli\dist\generate.js:236:264)
ERR!     at ChildProcess.emit (node:events:390:28)
ERR!     at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
ERR!  Error: command exited with code: 1:
ERR!     at ChildProcess.<anonymous> (C:\Users\david\AppData\Local\npm-cache\_npx\eebb2d3a7d26a7f1\node_modules\@storybook\cli\dist\generate.js:236:264)
ERR!     at ChildProcess.emit (node:events:390:28)
ERR!     at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)

### System

```shell
Environment Info:

  System:
    OS: Windows 10 10.0.22621
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 16.13.1 - C:\Program Files\nodejs\node.EXE
    npm: 8.5.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 108.0.5359.94
    Edge: Spartan (44.22621.900.0), Chromium (107.0.1418.62)
  npmPackages:
    @storybook/addon-actions: ^6.5.14 => 6.5.13 
    @storybook/addon-essentials: ^6.5.14 => 6.5.13 
    @storybook/addon-interactions: ^6.5.14 => 6.5.13 
    @storybook/addon-links: ^6.5.14 => 6.5.13 
    @storybook/angular: ^6.5.14 => 6.5.13 
    @storybook/builder-webpack5: ^6.5.14 => 6.5.13
    @storybook/manager-webpack5: ^6.5.14 => 6.5.13
    @storybook/testing-library: ^0.0.13 => 0.0.13

Additional context

No response