3

tl;dr

How to make SWC compile .js (not .jsx) files which contains React jsx for mocha tests?


I'm setting up Mocha + SWC (replacing a current Mocha + Babel setup), and am facing an issue where SWC won't compile jsx content inside .js files. It will only do so for .jsx files.

I've prepared a minimal Github repo showcasing the issue.

I've tried getting help from the SWC GitHub repo, but the help I got was unhelpful and my bug report has been closed, so I guess it won't get much attention now.

.swcrc

{
  "$schema": "https://json.schemastore.org/swcrc",
  "jsc": {
    "parser": {
      "syntax": "ecmascript",
      "jsx": true,
      "dynamicImport": false,
      "privateMethod": true,
      "functionBind": false,
      "exportDefaultFrom": true,
      "exportNamespaceFrom": false,
      "decorators": true,
      "decoratorsBeforeExport": true,
      "topLevelAwait": false,
      "importMeta": false
    },
    "transform": {
      "legacyDecorator": true,
      "react": {
        "pragma": "React.createElement",
        "pragmaFrag": "React.Fragment",
        "throwIfNamespace": true,
        "development": false,
        "useBuiltins": false
      },
      "optimizer": {
        "globals": {
          "vars": {
            "__DEBUG__": "true"
          }
        }
      }
    },
    "target": "es5",
    "loose": false,
    "externalHelpers": false,
    // Requires v1.2.50 or upper and requires target to be es2016 or upper.
    "keepClassNames": false
  },
  "module": {
    "type": "commonjs"
  },
  "minify": false
}

package.json

{
  "name": "swc-js-extension-fails-with-jsx-content",
  "version": "1.0.0",
  "description": "SWC not parsing jsx in js files",
  "author": {
    "name": "Yair Even-Or",
    "email": "vsync.design@gmail.com"
  },
  "private": false,
  "type": "module",
  "dependencies": {
    "@babel/runtime": "7.17.8",
    "@swc-node/register": "1.5.5",
    "@swc/cli": "0.1.59",
    "@swc/core": "1.3.27",
    "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
    "jsdom": "^21.0.0",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@babel/cli": "7.19.3",
    "@babel/core": "7.20.2",
    "@babel/eslint-parser": "7.19.1",
    "@babel/plugin-proposal-class-properties": "7.12.1",
    "@babel/plugin-proposal-decorators": "7.12.12",
    "@babel/plugin-proposal-export-default-from": "7.12.1",
    "@babel/plugin-proposal-function-bind": "7.12.1",
    "@babel/plugin-proposal-nullish-coalescing-operator": "7.12.1",
    "@babel/plugin-proposal-optional-chaining": "7.12.7",
    "@babel/plugin-transform-runtime": "7.19.6",
    "@babel/preset-env": "7.20.2",
    "@babel/preset-react": "7.18.6",
    "@babel/register": "7.18.9",
    "chai": "4.3.7",
    "enzyme": "3.11.0",
    "mocha": "9.2.2"
  },
  "browserslist": {
    "modern": [
      "last 1 chrome version",
      "last 1 firefox version"
    ],
    "ssr": [
      "node 14"
    ]
  },
  "scripts": {
    "test": "mocha \"src/**/*.test.js\""
  }
}

jsconfig

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "esnext",
    "moduleResolution": "Node",
    "experimentalDecorators": true,
    "jsx": "react-jsx"
  }
}

With Babel - .js files extensions works:

.mocharc.json - "require": ["@babel/register", "setup.js"],

enter image description here

With SWC - does not compile .js-extension mocha tests (with jsx syntax)

.mocharc.json - "require": ["@swc-node/register", "setup.js"],

enter image description here

vsync
  • 118,978
  • 58
  • 307
  • 400
  • Related to [Migrating from Babel to SWC with React](https://stackoverflow.com/q/69956543/104380) – vsync Jan 19 '23 at 12:26

0 Answers0