CRA Example

[amcdnl]

It would be worth showing how to set this up with CRA ( create-react-app ).

It can be accomplished by using craco ( https://github.com/gsoft-inc/craco < tailwind also suggests this approach for their custom stuff you have to add ). Then the code just looks like:

craco.config.js

module.exports = {
  babel: {
    plugins: [
      '@fullstory/babel-plugin-annotate-react'
    ]
  }
};

[patrick-fs]

Good suggestion, thanks Austin.

[matheuseabra]

Hey @amcdnl and @patrick-fs, thanks for sharing this.

I also have a CRA app that is using Craco, I followed your instructions by adding the snippet above to craco.config.js, however it didn't work, I'm not able to see the data-component or data-element in the rendered DOM.

Shouldn't I also add a rule object to the webpack.module.rules array as shown in the single-app sample on webpack.config.js from line 407 to 438?

// webpack.config.js

module = {
  rules: [{
              test: /\.(js|mjs|jsx|ts|tsx)$/,
              include: paths.appSrc,
              loader: require.resolve('babel-loader'),
              options: {
                customize: require.resolve(
                  'babel-preset-react-app/webpack-overrides'
                ),
                presets: [
                  [
                    require.resolve('babel-preset-react-app'),
                    {
                      runtime: hasJsxRuntime ? 'automatic' : 'classic',
                    },
                  ],
                ],
                plugins: [
                   // This is the local reference @fullstory/babel-plugin-annotate-react
                  // To use in your projects you would replace '../..' with '@fullstory/babel-plugin-annotate-react'
                  '../..',
                  isEnvDevelopment &&
                    shouldUseReactRefresh &&
                    require.resolve('react-refresh/babel'),
                ].filter(Boolean),
                // This is a feature of `babel-loader` for webpack (not Babel itself).
                // It enables caching results in ./node_modules/.cache/babel-loader/
                // directory for faster rebuilds.
                cacheDirectory: true,
                // See #6846 for context on why cacheCompression is disabled
                cacheCompression: false,
                compact: isEnvProduction,
              },
            }]
}