ReferenceError: React is not defined

[peteole]

Hi, after switching to this tool as described in the manual in an existing project, I get the following error: Anyways starting from a blank project works perfectly with this tool. Any idea what's happening?

[MaximeConan]

You can adapt your craco.config.js to prevent this error. I use the following configuration :

const CracoSwcPlugin = require('craco-swc')

module.exports = {
    plugins: [
        {
            plugin: CracoSwcPlugin,
            options: {
                swcLoaderOptions: {
                    jsc: {
                        transform: {
                            react: {
                                runtime: 'automatic',
                            },
                        },
                    },
                },
            },
        },
    ],
}

[NiklasEi]

The proposed change in craco.config.js above does not solve this error for me.

[ianldgs]

The proposed change in craco.config.js above does solve this error for me on the browser. However, in tests, the plugin apparently doesn't pass the config object forward. My workaround for now:

const CracoSwcPlugin = require("craco-swc");

const jsc = {
  parser: {
    syntax: "typescript",
    tsx: true,
    dynamicImport: true,
  },
  transform: {
    react: {
      runtime: "automatic",
    },
  },
};

CracoSwcPlugin.overrideJestConfig = ({ jestConfig }) => {
  const babelKey = Object.keys(jestConfig.transform)[0];

  jestConfig.transform[babelKey] = [require.resolve("@swc/jest"), { jsc }];

  return jestConfig;
};

module.exports = {
  plugins: [
    {
      plugin: CracoSwcPlugin,
      options: {
        swcLoaderOptions: {
          jsc,
        },
      },
    },
  ],
};

[pradel]

This is now a default in 0.4.0 https://github.com/pradel/create-react-app-swc/releases/tag/craco-swc%400.4.0