[Bug]: [7.0.0-beta.48] mjs mime type issue

Describe the bug

I have a Storybook that works locally, but when serving the static site, it complains about the mimetype of my .mjs files. As such, I am unable to serve my Storybook in CI. I saw this referenced in another issue, so it is apparently a known issue.

I'm seeing the following when trying to access a storybook instance deployed via a CI pipeline:

Strangely, I see different issues when building / serving locally with npx http-server ./storybook-static:

Again, this works fine when running the dev server locally

To Reproduce

Build storybook locally and serve with npx http-server ./storybook-static

System

Environment Info:

  System:
    OS: macOS 12.3
    CPU: (8) arm64 Apple M1 Pro
  Binaries:
    Node: 16.17.1 - ~/.nvm/versions/node/v16.17.1/bin/node
    npm: 8.19.2 - ~/Dev/Flume/conduit/node_modules/.bin/npm
  Browsers:
    Chrome: 110.0.5481.100
    Firefox: 109.0.1
    Safari: 15.4
  npmPackages:
    @storybook/addon-a11y: ^7.0.0-beta.48 => 7.0.0-beta.48
    @storybook/addon-actions: ^7.0.0-beta.48 => 7.0.0-beta.48
    @storybook/addon-docs: ^7.0.0-beta.48 => 7.0.0-beta.48
    @storybook/addon-essentials: ^7.0.0-beta.48 => 7.0.0-beta.48
    @storybook/addon-interactions: ^7.0.0-beta.48 => 7.0.0-beta.48
    @storybook/addon-links: ^7.0.0-beta.48 => 7.0.0-beta.48
    @storybook/addons: ^7.0.0-beta.48 => 7.0.0-beta.48
    @storybook/blocks: ^7.0.0-beta.48 => 7.0.0-beta.48
    @storybook/builder-vite: ^7.0.0-beta.48 => 7.0.0-beta.48
    @storybook/react: ^7.0.0-beta.48 => 7.0.0-beta.48
    @storybook/react-vite: ^7.0.0-beta.48 => 7.0.0-beta.48
    @storybook/testing-library: ^0.0.14-next.1 => 0.0.14-next.1
    @storybook/testing-react: ^2.0.0-next.0 => 2.0.0-next.0
    @storybook/theming: ^7.0.0-beta.48 => 7.0.0-beta.48

Additional context

My vite.config.ts:

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'Conduit',
      formats: ['es', 'umd'],
      fileName: 'conduit'
    },
    rollupOptions: {
      external: [...Object.keys(pkg.devDependencies || {}), ...Object.keys(pkg.peerDependencies || {})],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
          'react-hook-form': 'reactHookForm'
        },
        sourcemap: true
      }
    },
    target: 'ES2015'
  },
  plugins: [
    viteCommonjs(),
    react(),
    dts({
      insertTypesEntry: true
    }),
    svgr({
      exportAsDefault: true
    }),
    // This is only necessary because this is a library
    cssInjectedByJsPlugin()
  ],
  resolve: {
    alias: {
      assets: path.resolve(__dirname, './src/assets'),
      components: path.resolve(__dirname, './src/components'),
      cds: path.resolve(__dirname, './src/components/conduit-design-system'),
      context: path.resolve(__dirname, './src/context'),
      hooks: path.resolve(__dirname, './src/hooks'),
      i18n: path.resolve(__dirname, './src/i18n'),
      styles: path.resolve(__dirname, './src/styles'),
      types: path.resolve(__dirname, './src/types'),
      utils: path.resolve(__dirname, './src/utils')
    }
  },
  [...vitest...]
}

My .storybook/main.ts:


import type {StorybookConfig} from '@storybook/react-vite'
const {mergeConfig} = require('vite')
const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
  framework: {
    name: '@storybook/react-vite',
    options: {}
  },
  docs: {
    autodocs: 'tag'
  },
  async viteFinal(config, {configType}) {
    return mergeConfig(config, {
      // Necessary because of: https://github.com/storybookjs/storybook/issues/18920#issuecomment-1401351305
      define: {'process.env': {}}
    })
  }
}
export default config
``

storybookjs / storybook