Hi, after switching to this tool as described in the manual in an existing project

This is now a default in 0.4.0 <a href="https://github.com/pradel/create-react-app-swc

ReferenceError: React is not defined about create-react-app-swc HOT 4 CLOSED

pradel commented on May 18, 2024

ReferenceError: React is not defined

from create-react-app-swc.

Comments (4)

MaximeConan commented on May 18, 2024 3

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',
							},
						},
					},
				},
			},
		},
	],
}

from create-react-app-swc.

NiklasEi commented on May 18, 2024 3

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

from create-react-app-swc.

pradel commented on May 18, 2024 2

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

from create-react-app-swc.

ianldgs commented on May 18, 2024

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