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

@swc-node/jest ReferenceError: React is not defined #635

Closed
zfwf opened this issue Dec 16, 2021 · 2 comments · Fixed by #685
Closed

@swc-node/jest ReferenceError: React is not defined #635

zfwf opened this issue Dec 16, 2021 · 2 comments · Fixed by #685

Comments

@zfwf
Copy link

zfwf commented Dec 16, 2021

EDIT: I don't think react runtime is supported by @swc-node at all.@swc-node/loader works in webpack but the bundle produced does not have the react runtime.

Below is the original issue:

my project was using @swc/jest and a .swcrc like this and jest works fine:

{
    "jsc": {
        "parser": {
            "syntax": "typescript",
            "tsx": true,
            "dynamicImport": true,
            "privateMethod": true,
            "functionBind": true,
            "exportDefaultFrom": true,
            "exportNamespaceFrom": true,
            "decorators": true,
            "decoratorsBeforeExport": true,
            "topLevelAwait": true,
            "importMeta": true
        },
        "transform": {
            "react": {
                "runtime": "automatic"
            }
        },
        "target": "es5",
        "loose": false,
        "externalHelpers": false,
        "keepClassNames": false
    }
}

I want to move to @swc-node/jest since I already have a tsconfig.json and I don't see a need to maintain both the .swcrc and tsconfig.json.

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "noFallthroughCasesInSwitch": true,
    "suppressImplicitAnyIndexErrors": true,
    "noImplicitAny": false,
    "sourceMap": true,
  },
  "include": [
    "src"
  ]
}

I changed jest config from "^.+\\.(t|j)sx?$": "@swc/jest", to "^.+\\.(t|j)sx?$": "@swc-node/jest", and got error ReferenceError: React is not defined. I copied the configs in .swcrc from above into jest config and still got the same error. It seems the react runtime configuration is not applied by @swc-node/jest but am applied by @swc/jest?

@zfwf zfwf changed the title @swc-node/jest does not handle react-jsx runtime @swc-node/jest ReferenceError: React is not defined Dec 16, 2021
@Gabb-c
Copy link

Gabb-c commented Mar 17, 2022

I'm building my react lib with Rollup, and just using @swc/jest for the tests:

const config = {
...config,
  transform: {
    '^.+\\.(t|j)sx?$': [
      '@swc/jest',
      {
        jsc: {
          transform: {
            react: {
              runtime: 'automatic',
            },
          },
        },
      },
    ],
  },
};

So there's no need to have a .swcrc in this case.
Reference

@AndrewSouthpaw
Copy link

#635 (comment) was key for me. For some reason it didn't work in .swcrc but worked fine when passed directly into the jest config. 🤷🏼‍♂️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging a pull request may close this issue.

3 participants