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"],
With SWC
- does not compile .js
-extension mocha tests (with jsx
syntax)
.mocharc.json
- "require": ["@swc-node/register", "setup.js"],