Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/patricklafrance/pnpm-ts5-swc-esm-jest
POC to test how PNPM, TypeScript v5, SWC, Jest and ESM can integrate together
https://github.com/patricklafrance/pnpm-ts5-swc-esm-jest
esm esmodules jest pnpm react swc typescript webpack
Last synced: about 1 month ago
JSON representation
POC to test how PNPM, TypeScript v5, SWC, Jest and ESM can integrate together
- Host: GitHub
- URL: https://github.com/patricklafrance/pnpm-ts5-swc-esm-jest
- Owner: patricklafrance
- Created: 2023-03-23T18:19:19.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-03-23T19:36:51.000Z (over 1 year ago)
- Last Synced: 2024-03-15T10:32:37.807Z (8 months ago)
- Topics: esm, esmodules, jest, pnpm, react, swc, typescript, webpack
- Language: JavaScript
- Homepage:
- Size: 105 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# pnpm-ts5-swc-esm-jest
This POC is a continuation of the [pnpm-ts-swc-esm POC](https://github.com/patricklafrance/pnpm-ts-swc-esm).
For learnings and observations about PNPM, TS 4, SWC, or ESM, have a look at the [README](https://github.com/patricklafrance/pnpm-ts-swc-esm).
## TS v5
Many quirks of TS v4 ESM support are not necessary anymore with TS v5.
The following has been removed from the Webpack Config:
```js
// webpack.config.js
{
resolve: {
extensionAlias: {
".js": [".ts", ".tsx", ".js"]
}
}
}
```
```js
// webpack.config.js
{
module: {
rules: [
{
test: /\.(js)$/,
include: /node_modules/,
resolve: {
fullySpecified: false
}
}
]
}
}
```
And in the codebase, all the import paths has been updated to use their original file extension of of `.js`.
## @swc/jest with ESM
[Jest documentation](https://jestjs.io/docs/ecmascript-modules) still mark ESM support has being experimental.
However, after trying a basic example in this repository it seem to work perfectly fine.
There are still a few issues but none of them seems to really affect us:
- [ESM official issue](https://github.com/facebook/jest/issues/9430)
- [Issues labeled as ESM](https://github.com/facebook/jest/labels/ES%20Modules)
The only issue seems to be with `@swc/jest` which doesn't pick up the `.swcrc` config file but it can be solved but providing the configuration directly in the Jest `transformer` has explained in this [issue](https://github.com/swc-project/swc-node/issues/635#issuecomment-1070766669).
```js
// jest.config.js
{
transform: {
"^.+\\.(t|j)sx?$": ["@swc/jest", {
jsc: {
transform: {
react: {
runtime: 'automatic',
}
}
},
...
}]
},
}
```
It's also important to add `extensionsToTreatAsEsm` to the Jest config file.
```js
// jest.config.js
{
extensionsToTreatAsEsm: [".ts", ".tsx"]
}
```