Fail to require (in cjs) CSS modules from an npm package

[Jinjiang]

Describe the bug

The background is I have some existing packages whose generated code is in CommonJS + CSS modules. E.g.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.circularFont = void 0;
const circular_font_module_scss_1 = __importDefault(require("./circular-font.module.scss"));
exports.circularFont = circular_font_module_scss_1.default.circularFont;
//# sourceMappingURL=index.js.map

This file uses require() to load CSS Modules.

In Vite, it fails to be loaded, however, an import works.

Reproduction

https://github.com/Jinjiang/reproductions/tree/vite-cssmodules-20230523

Steps to reproduce

pnpm install
pnpm dev

Then open browser, the console panel will show up:

import a css module {foo: '_foo_iyjzy_1', bar: '_bar_iyjzy_5'} // works
require a css module {__esModule: true} // not
{foo: '_foo_iyjzy_1', bar: '_bar_iyjzy_5'} // works
undefined // not
{foo: '_foo_1clpo_1', bar: '_bar_1clpo_5'} // works
{foo: '_foo_iyjzy_1', bar: '_bar_iyjzy_5'} // works

System Info

$ npx envinfo --system --npmPackages '{vite,@vitejs/*}' --binaries --browsers

  System:
    OS: macOS 13.4
    CPU: (8) arm64 Apple M1
    Memory: 69.14 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.15.0 - ~/.asdf/installs/nodejs/16.15.0/bin/node
    Yarn: 1.22.19 - ~/.asdf/shims/yarn
    npm: 8.5.5 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Safari: 16.5
  npmPackages:
    vite: ^4.3.8 => 4.3.8

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.

[hai-x]

In the development stage, you can use vite plugin vite-plugin-cjs2esm to solve this problem. It provide esbuild plugin which can solve the commonjs import problem during esbuild pre-build stage.

import { defineConfig } from 'vite'
import * as cjs2esm from 'vite-plugin-cjs2esm'

export default defineConfig({
  plugins: [cjs2esm.vitePlugin()],
  optimizeDeps: {
    esbuildOptions: {
      plugins: [cjs2esm.esbuildPlugin()]
    }
  }
})

[Jinjiang]

@haijie-x thanks for the information. I tried to install this package and added the vite config file you provided. First, it works in the browser console, which is great! At the same time, I got another error in the terminal:

Error:   Failed to scan for dependencies from entries:
  C:/Users/zhaoj/code/reproductions/index.html

  X [ERROR] The JSX syntax extension is not currently enabled

    html:C:/Users/zhaoj/code/reproductions/index.html:1:0:
      1 │ <script type="module" src="index.js"></script>
        ╵ ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.


    at failureErrorWithLog (C:\Users\zhaoj\code\reproductions\node_modules\.pnpm\esbuild@0.17.19\node_modules\esbuild\lib\main.js:1636:15)
    at C:\Users\zhaoj\code\reproductions\node_modules\.pnpm\esbuild@0.17.19\node_modules\esbuild\lib\main.js:1048:25
    at runOnEndCallbacks (C:\Users\zhaoj\code\reproductions\node_modules\.pnpm\esbuild@0.17.19\node_modules\esbuild\lib\main.js:1471:45)
    at buildResponseToResult (C:\Users\zhaoj\code\reproductions\node_modules\.pnpm\esbuild@0.17.19\node_modules\esbuild\lib\main.js:1046:7)
    at C:\Users\zhaoj\code\reproductions\node_modules\.pnpm\esbuild@0.17.19\node_modules\esbuild\lib\main.js:1058:9
    at new Promise (<anonymous>)
    at requestCallbacks.on-end (C:\Users\zhaoj\code\reproductions\node_modules\.pnpm\esbuild@0.17.19\node_modules\esbuild\lib\main.js:1057:54)
    at handleRequest (C:\Users\zhaoj\code\reproductions\node_modules\.pnpm\esbuild@0.17.19\node_modules\esbuild\lib\main.js:723:19)
    at handleIncomingPacket (C:\Users\zhaoj\code\reproductions\node_modules\.pnpm\esbuild@0.17.19\node_modules\esbuild\lib\main.js:745:7)
    at Socket.readFromStdout (C:\Users\zhaoj\code\reproductions\node_modules\.pnpm\esbuild@0.17.19\node_modules\esbuild\lib\main.js:673:7)

Is there anything I missed? Or do you have any idea how to make it works?

Thanks.

[hai-x]

@Jinjiang Thanks for your feedback, please try the latest package version v1.0.6, a minor issue has just been fixed.

[hai-x]

@Jinjiang Thanks for your feedback, please try the latest package version v1.0.6, a minor issue has just been fixed.

I just tried it and it works.

[Jinjiang]

Cool. It works on 1.0.6 as you mentioned. Thanks so much.

[Jinjiang]

Hi, I'd like to reopen this issue since:

1. the plugin @haijie-x mentioned is still in debugging
2. even this plugin can help, I still feel the root cause of this issue is about the native process of CSS/SCSS files in Vite, not a missing plugin to transform CJS code to ESM since other CJS syntax could be well-transformed natively.

Thanks.

[sapphi-red]

This seems to be a regression from 4.2.0 caused by #12343.
We should still use export * + export default for CSS modules files.

[Jinjiang]

@sapphi-red thanks for pointing this out. I further found it works on v4.1.x 😅