Compatibility with `react-app-rewired` and `react-aria` ?

[AleksMittsel]

Describe the issue

I have been playing around with Stylex lately, and I absolutely love it. Thank you for the awesome tool!

I started app with create-react-app and installed "@stylexjs/webpack-plugin" using react-app-rewired. Here the app repo.

Inside simple component Button was implemented with styleX and simple react-aria hook useButton

Every time I try to click on the button, I get a weird error on the console. This bug can only be reproduced with both react-aria and styleX packages together.

Expected behavior

Executing alert("Hello world!")

Steps to reproduce

Clone repo , install dependencies and run npm run start.

Try to click on the Button and see in console a weird error.

Test case

No response

Additional comments

No response

[nmn]

This is likely an issue with the webpack setup with react-app-rewired. Investigating...

[AleksMittsel]

I used craco also for extend CRA webpack config. I got the same result.

[nmn]

@AleksMittsel craco is known to not be compatible. That's the basis for my assumption with react-app-rewired as well.

[AleksMittsel]

The problem was that react-aria uses files with the extension *.cjs, and the babel-loader is not configured for them in the webpack.config.js under the hood of CRA.

I ran the eject command command and looked at the webpack config inside. There was a rule for babel-loader for external files from node_modules

// Process any JS outside of the app with Babel.
            // Unlike the application JS, we only compile the standard ES features.
            {
              test: /\.(js|mjs)$/,
              exclude: /@babel(?:\/|\\{1,2})runtime/,
              loader: require.resolve('babel-loader'),
              options: {
                babelrc: false,
                configFile: false,
                compact: false,
                presets: [
                  [
                    require.resolve('babel-preset-react-app/dependencies'),
                    { helpers: true },
                  ],
                ],
                cacheDirectory: true,
                // See #6846 for context on why cacheCompression is disabled
                cacheCompression: false,

                // Babel sourcemaps are needed for debugging into node_modules
                // code.  Without the options below, debuggers like VSCode
                // show incorrect code and set breakpoints on the wrong lines.
                sourceMaps: shouldUseSourceMap,
                inputSourceMap: shouldUseSourceMap,
              }

To fix the problem just update the test mask by /\.(js|mjs|cjs)$/.

If you use customize-cra and react-app-rewired just add to your override function rule for babel-loader in the config-override.js file like this:

const { override, addWebpackModuleRule } = require('customize-cra');

module.exports = override(
addWebpackModuleRule({
    test: /\.(cjs)$/,
    exclude: /@babel(?:\/|\\{1,2})runtime/,
    loader: require.resolve('babel-loader'),
    options: {
      babelrc: false,
      configFile: false,
      compact: false,
      presets: [[require.resolve('babel-preset-react-app/dependencies'), { helpers: true }]],
      cacheDirectory: true,
    },
  })
  );