Giter VIP home page Giter VIP logo

Comments (4)

AleksMittsel avatar AleksMittsel commented on August 30, 2024 3

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,
    },
  })
  );

from stylex.

nmn avatar nmn commented on August 30, 2024 1

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

from stylex.

AleksMittsel avatar AleksMittsel commented on August 30, 2024

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

from stylex.

nmn avatar nmn commented on August 30, 2024

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

from stylex.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.