SCSS modules in CommonJS

[Jinjiang]

Hi, I'm from this issue vitejs/vite#13298 hope you don't mind.

Here is a real case that still got an error:

You can install this package via:

npm config set '@teambit:registry' https://node.bit.cloud
pnpm i @teambit/design.themes.base-theme

after that, import this package as a React component, you still got the error with your plugin

import ReactDOM from 'react-dom/client'
import { BaseTheme } from '@teambit/design.themes.base-theme';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <BaseTheme>
    <h1>Hello World</h1>
  </BaseTheme>,
)

the error:

index.ts:3  Uncaught TypeError: Cannot read properties of undefined (reading 'circularFont')
    at node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@teambit/design.themes.base-theme/dist/circular-font/index.js (index.ts:3:39)
    at __require (chunk-SPYXDAPC.js?v=7c977e59:9:50)
    at node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@teambit/design.themes.base-theme/dist/base-theme.js (base-theme.tsx:9:1)
    at __require (chunk-SPYXDAPC.js?v=7c977e59:9:50)
    at node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@teambit/design.themes.base-theme/dist/index.js (index.ts:3:1)
    at __require (chunk-SPYXDAPC.js?v=7c977e59:9:50)
    at index.ts:3:29

Do you think it could be possibly supported by your plugin?

Thanks.

[Jinjiang]

FYI, I think the key part in this package which triggers the error is:

// node_modules\@teambit\design.themes.base-theme\dist\circular-font\index.js
const circular_font_module_scss_1 = __importDefault(require("./circular-font.module.scss"));

To minimize the reproduction, you can change the file into:

// node_modules\@teambit\design.themes.base-theme\dist\circular-font\index.js
"use strict";
const circular_font_module_scss_1 = require("./circular-font.module.scss");
console.log(circular_font_module_scss_1);
module.exports = circular_font_module_scss_1;

and write in the entry file:

import '@teambit/design.themes.base-theme/dist/circular-font/index'

if the SCSS module is required properly, you should see an object with all the classnames as keys logged in the console.

[hai-x]

Nice to meet you again and thank you for your feedback. The main problem here is that the modules imported have already been bundled, it wrapped by __importDefault which affects the parsing process by plugin, I hacked the following code in the dist directory and found that it works. I will try my best to solve this problem and adapt to this situation.

[hai-x]

Sorry, I think my analysis was wrong yesterday. The actual error should be that maybe we forgot to configure the vite plugin, we both made that mistake.

vite.config.ts

export default defineConfig({
 // ... 
  plugins: [ 
    // ...
    cjs2esm.vitePlugin()
  ],
  optimizeDeps: {
    esbuildOptions: {
      plugins: [
        cjs2esm.esbuildPlugin({
          // ❗️❗️❗️❗️❗️❗️ following means that let `esbuild` handle cjs in `react` lib
          filter: /!react/
        })
      ]
    }
  }
})

and it works.

[Jinjiang]

Would you mind checking again? Here is my reproduction:

https:/Jinjiang/reproductions/tree/vite-plugin-cjs2esm-20230613

(I honestly didn't get what the filter /!react/ means here😅)

The error log:

import a css module {foo: '_foo_iyjzy_1', bar: '_bar_iyjzy_5'}
require a css module {__esModule: true}

Uncaught TypeError: Cannot read properties of undefined (reading 'circularFont')
    at node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@teambit/design.themes.base-theme/dist/circular-font/index.js (index.ts:3:39)
    at __require (chunk-QYDSUZJS.js?v=49929e0c:9:50)
    at node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@teambit/design.themes.base-theme/dist/base-theme.js (base-theme.tsx:9:1)
    at __require (chunk-QYDSUZJS.js?v=49929e0c:9:50)
    at node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@teambit/design.themes.base-theme/dist/index.js (index.ts:3:1)
    at __require (chunk-QYDSUZJS.js?v=49929e0c:9:50)
    at index.ts:3:29

Thanks.

[hai-x]

Sorry, I think my analysis was wrong yesterday. The actual error should be that maybe we forgot to configure the vite plugin, we both made that mistake.

vite.config.ts

export default defineConfig({
 // ... 
  plugins: [ 
    // ...
    cjs2esm.vitePlugin()
  ],
  optimizeDeps: {
    esbuildOptions: {
      plugins: [
        cjs2esm.esbuildPlugin({
          // ❗️❗️❗️❗️❗️❗️ following means that let `esbuild` handle cjs in `react` lib
          filter: /!react/
        })
      ]
    }
  }
})

and it works.

I am debugging and found that import result is undefined although it work. And I also think it needs vite support. The plugin level can not do transform.

[Jinjiang]

vitejs/vite#13519
It has been solved here. I will close this issue. Thanks for the help.