webpack-plugin includes @babel/plugin-transform-modules-commonjs

[abettadapur]

Describe the issue

I was debugging an issue with our Webpack build, where some imports of a node_modules package would resolve to the CJS version, and some other imports would resolve to the ESM version.

I root caused this to @babel/plugin-transform-modules-commonjs being included in the babel transform. With this plugin, files that contain StyleX imports get converted to commonJS, which Webpack then treats differently.

Example:

// file1.ts
import {atom} from "jotai"

// transforms to 
import {atom} from "jotai"

//file2.ts
import * as stylex from "@stylexjs/stylex"
import {atom} from "jotai"

// transforms to
const _jotai = require("jotai")

The presence of the require statement causes Webpack to resolve to the CJS version of the package, whereas for the other file, it resolves to the ESM version.

I expect this also has ramifications for tree shaking algorithms that operate on the computed dependency graph.

Expected behavior

Running the StyleX loader on source files should not have any additional transforms, other than for StyleX.

Steps to reproduce

1. Create a simple repo with Webpack
2. Install StyleX and jotai. Add StyleX plugin to the Webpack configuration
3. Create two files.
   a. One should import styleX and jotai
   b. The other should just import jotai
4. Import both files from an index file
5. Run webpack
6. See that the compiled output contains references to both jotai/index.js and jotai/esm/vanilla.mjs

Test case

No response

Additional comments

Is the commonJS plugin required to make StyleX functional?

[nmn]

The webpack plugin is not recommended for most scenarios. Try using the PostCSS plugin setup instead.

[abettadapur]

Two questions

• Do we need this transform at all? I could remove it in a patch.
• If I were to switch my project to the PostCSS plugin, I still need to include the StyleX Babel plugin somewhere in my bundler, correct?

[CaseyMcGuire]

@nmn I ran into this same issue. I see you added a PR here to remove the CJS transform. Any chance this gets merged or is your recommendation still to use the PostCSS plugin?

[nmn]

Fix will be in the next release.