Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ReferenceError: React is not defined #9

Closed
peteole opened this issue Nov 12, 2021 · 4 comments · Fixed by #13
Closed

ReferenceError: React is not defined #9

peteole opened this issue Nov 12, 2021 · 4 comments · Fixed by #13
Labels
bug Something isn't working

Comments

@peteole
Copy link

peteole commented Nov 12, 2021

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

@MaximeConan
Copy link

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

@pradel pradel added the bug Something isn't working label Nov 30, 2021
@NiklasEi
Copy link

NiklasEi commented Jan 7, 2022

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

@ianldgs
Copy link

ianldgs commented Mar 29, 2022

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
Copy link
Owner

pradel commented Mar 29, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants