Missing CSS File for One Entry Point in Vite MPA Build

[yokotak0527]

Hello, I'm working on a Multi-Page Application (MPA) using Vite and facing an issue where a CSS file is not generated for one of my entry points (index.tsx), although it's generated for the other (sub.tsx). Both entry points use the same Text component that utilizes CSS Modules.

Environment

• Vite Version: 4.4.9
• Node.js Version: 18.16.0
• npm Version: 9.5.1

Details

├─ dist
├─ node_modules
├─ src
│    ├─ components
│    │    ├─ Text.module.css
│    │    ├─ Text.module.css.d.ts
│    │    └─ Text.tsx
│    └─ entrypoints
│         ├─ index.tsx
│         └─ sub.tsx
├─ package-lock.json
├─ package.json
├─ tsconfig.json
└─ vite.config.ts

Below are the related files.

package.json

{
  "name": "app",
  "version": "1.0.0",
  "description": "",
  "engines": {
    "node": "18.X",
    "npm": "9.X"
  },
  "scripts": {
    "build": "tsc && vite build",
    "dev": "vite build -m development"
  },
  "license": "UNLICENSED",
  "dependencies": {
    "react": "18.2.0",
    "@types/node": "20.5.9",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.7",
    "@vitejs/plugin-react": "4.0.4",
    "glob": "10.3.4",
    "react-dom": "18.2.0",
    "typescript": "5.2.2",
    "vite": "4.4.9",
    "vite-tsconfig-paths": "4.2.0"
  }
}

vite.config.ts

import path from 'path'
import { globSync } from 'glob'
import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'

const dir = {
  src: 'src/',
  entries: 'src/entrypoints/',
  dist: 'dist/'
}

const entries:{[x:string]:string} = {}
globSync(path.join(dir.entries, '**/*.tsx')).forEach(filepath => {
  const key = filepath.replace(new RegExp(`^${dir.entries}`), '').replace(/\.tsx$/, '')
  entries[key] = `/${filepath.replace(new RegExp(`^${dir.src}`), '')}`
})

export default defineConfig(({ mode }) => ({
  mode,
  root : dir.src,
  base: `/`,
  public: 'public',
  envDir: './',
  appType: 'mpa',
  build: {
    outDir: path.relative(dir.src, dir.dist),
    emptyOutDir: true,
    watch: mode === 'development' ? {} : null,
    minify: mode !== 'development',
    manifest: true,
    rollupOptions: {
      input: entries
    }
  },
  plugins: [
    tsconfigPaths()
  ]
}))

tsconfig.json

{
  "compilerOptions": {
    "rootDir": "./",
    "baseUrl": "src",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "skipLibCheck": true,
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "allowJs": true,
    "checkJs": true,
    "strict": true,
    "noUnusedLocals": false,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "allowSyntheticDefaultImports": true,
    "lib": [
      "ESNext",
      "DOM",
      "DOM.Iterable"
    ]
  },
  "include": [
    "src",
    "vite.config.ts"
  ]
}

src/entrypoints/index.tsx and sub.tsx

index.tsx and sub.tsx is identical to simplify the issue. The point I'd like you to focus on is that the same component is being imported in multiple entry points.

import Text from '../components/Text.js'

export default function Page(){
  return (<>
    <Text>text</Text>
  </>)
}

src/components/Text.tsx

import styles from './Text.module.css'

interface Props {
  children: string
}
export default function Text({children}:Props) {
  return <p className={ styles.root }>{children}</p>
}

I've also made the code available on GitHub for easier reproduction:
https://github.com/yokotak0527/vite-issue-230906

Questions

1. Is this issue a bug, or is there a possibility that my configuration is incorrect?
2. What should I try to resolve this issue?

Any advice would be greatly appreciated. Thank you.

[jdavis]

Did you ever figure this out? I'm seeing something pretty similar

[glennholland]

Seeing similar. Multiple entry points. One has the CSS bundled, the other doesn't