Skip to content

[Vite 8] CSS dynamic import generates an exception module #22244

Description

@moonsky-all

Describe the bug

import('vant/lib/index.css'); 动态引入css时,生成异常模块内容:
import"./rolldown-runtime-lhHHWwHU.js";export{lib_exports as t};

这里产生了未知变量lib_exports,会导致在页面运行时报错。(目前还不影响实际运行)

English:

When dynamically importing CSS using import('vant/lib/index.css');, an unexpected module content is generated: import "./rolldown-runtime-lhHHWwHU.js"; export {lib_exports as t};; `

An unknown variable lib_exports has been generated here, which will cause an error when the page is run
(It does not affect actual operation at present)

Reproduction

https://stackblitz.com/edit/vitejs-vite-x2lmc4mc?file=package.json,src%2Fmain.js,vite.config.js,dist%2Fassets%2Fvendor-mobile-vant-i-opPLZX.js&terminal=dev

Steps to reproduce

  1. pnpm create vite
  2. pnpm add vant
  3. 在 main.ts 文件添加: import('vant/lib/index.css');;

Add the following line to the main.ts file: import('vant/lib/index.css');

  1. vite.config.ts添加输出配置rolldownOptions,完整vite.config.ts内容如下:

Add the output configuration rolldownOptions to vite.config.ts. The complete vite.config.ts content is as follows:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    sourcemap: false,
    rolldownOptions: {
      output: {
        manualChunks: (id: string) => {
          if (id.includes('node_modules')) {
            if (id.includes('vant')) {
              return 'vendor-mobile-vant';
            }
          }
        },
      },
    },
  },
})
  1. 执行pnpm run build命令,之后查看dist/assets/vendor-mobile-vant-xxxxxx.js,即可看到

Execute the pnpm run build command, and then view dist/assets/vendor-mobile-vant-xxxxxx.js to see the result

System Info

System:
    OS: macOS 15.7.2
    CPU: (12) arm64 Apple M2 Max
    Memory: 1.02 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 24.14.0
    Yarn: 1.22.22
    npm: 11.9.0
    pnpm: 9.15.9
    bun: 1.3.1
    Deno: 2.1.7
  Browsers:
    Chrome: 147.0.7727.56
    Chrome Canary: 149.0.7794.0
    Edge: 147.0.3912.60
    Firefox: 131.0
    Safari: 26.1
  npmPackages:
    @vitejs/plugin-vue: ^6.0.5 => 6.0.6 
    vite: ^8.0.4 => 8.0.8

Used Package Manager

pnpm

Logs

No response

Validations

Metadata

Metadata

Assignees

No one assigned

    Labels

    feat: cssp2-edge-caseBug, but has workaround or limited in scope (priority)

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions