5.1.x Regression - dynamic named import in dev mode not working as expected

[n3dst4]

Describe the bug

I am importing the library xss using a dynamic, named import, like this:

    const { FilterXSS } = await import("xss");
    const xss = new FilterXSS({});

I expect this to import the FilterXSS value from the xss library and call it as a constructor.

• This works correctly in VIte 5.0.x in dev mode and production/preview mode.
• It also works correctly in Vite 5.1 in production/preview mode.
• However in Vite 5.1.x, in dev mode, FilterXSS is undefined.

Also worth noting:

• Static default import import xss from "xss"; works fine in all situations.
• Static named import import { FilterXSS } from "xss"; works fine in all situations.
• Dynamic default import (await import("xss")).default also works fine in all situation.

Reproduction

https://github.com/n3dst4/vite-xss-import-bug-repro

Steps to reproduce

Clone the repo https://github.com/n3dst4/vite-xss-import-bug-repro

Install deps

pnpm install

To run in dev mode (to see the broken behavior):

pnpm dev

To run in production mode (wherein the bug does not manifest):

pnpm preview

System Info

System:                                                           
    OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish) 
    CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor               
    Memory: 25.44 GB / 31.31 GB                                     
    Container: Yes                                                  
    Shell: 5.8.1 - /usr/bin/zsh                                     
  Binaries:                                                         
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node          
    Yarn: 1.22.19 - ~/.nvm/versions/node/v20.11.1/bin/yarn          
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm             
    pnpm: 8.15.0 - ~/.nvm/versions/node/v20.11.1/bin/pnpm           
  Browsers:                                                         
    Chromium: 122.0.6261.94                                         
  npmPackages:                                                      
    @vitejs/plugin-react-swc: ^3.5.0 => 3.6.0                       
    vite: ^5.1.5 => 5.1.5

Used Package Manager

pnpm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[hi-ogawa]

Thanks for the reproduction with comparisons. It looks like this is a similar issue as #15851 and a regression from #15619

Though it's a clear inconsistency between dev and build, I think the general safer recommendation is to use default import for originally CJS dependency (which is internally transpiled into ESM by Vite).

The code now checks typeof cjs === "object", but this is probably failing since xss's exports object is a function:

https://github.com/leizongmin/js-xss/blob/66df7c48d5280de27b787169165afc4ea850cda4/lib/index.js#L23-L25

exports = module.exports = filterXSS;
exports.filterXSS = filterXSS;
exports.FilterXSS = FilterXSS;

[XiSenao]

Thank you for the explanation.

The current issue and #15851 are different. I may not consider #15851 to be a vite problem, because I don't think it's reasonable to reference properties on the prototype chain in namespace imports and this may be a issue with rollup. The current issue is due to the lack of extension of function properties, which was indeed overlooked in PR.