Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/qnighy/node-cjs-interop
Babel plugin and helper functions for interoperation between Node.js native ESM and Babel ESM
https://github.com/qnighy/node-cjs-interop
babel-plugin esmodules javascript nodejs swc-plugin
Last synced: 7 days ago
JSON representation
Babel plugin and helper functions for interoperation between Node.js native ESM and Babel ESM
- Host: GitHub
- URL: https://github.com/qnighy/node-cjs-interop
- Owner: qnighy
- License: mit
- Created: 2021-12-19T06:44:43.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2024-12-02T15:28:28.000Z (about 1 month ago)
- Last Synced: 2024-12-19T05:08:39.306Z (15 days ago)
- Topics: babel-plugin, esmodules, javascript, nodejs, swc-plugin
- Language: Rust
- Homepage:
- Size: 4.49 MB
- Stars: 25
- Watchers: 2
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# `babel-plugin-node-cjs-interop`, `swc-plugin-node-cjs-interop` and `node-cjs-interop`: fix the default import interoperability issue in Node.js
## The problem to solve
Consider the following modules:
```javascript
// a.js
export default function greet() {
console.log("Hello, world!");
}
```
```javascript
// b.js
import greet from "a.js";
greet();
```
They usually work, unless the following conditions are met:
- `a.js` (the module being imported) is a **simulated ESM**. That is, the module is transpiled as a CommonJS module (by Babel or TypeScript) before execution. And,
- `b.js` (the importing module) is a **native ESM**, That is, the module is run on Node.js' native ES Module support.
You can reproduce the above condition by placing the following files:
```javascript
// a.cjs
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true,
});
exports.default = greet;
function greet() {
console.log("Hello, world!");
}
```
```javascript
// b.mjs
import greet from "./a.cjs";
greet();
```
```
$ node ./b.mjs
./b.mjs:3
greet();
^
TypeError: greet is not a function
at ./b.mjs:3:1
at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
at async loadESM (node:internal/process/esm_loader:88:5)
at async handleMainPromise (node:internal/modules/run_main:65:12)
```
## Solution 1: Babel/SWC plugin
Install the babel plugin:
```
npm install -D babel-plugin-node-cjs-interop
# or:
yarn add -D babel-plugin-node-cjs-interop
```
Configure it in your Babel configuration:
```javascript
// .babelrc.js or babel.config.js
export default {
presets: [
/* ... */
],
plugins: [
// ...
[
"babel-plugin-node-cjs-interop",
{
packages: ["styled-components", "@babel/helper-plugin-test-runner"],
},
],
],
};
```
See [the package's README](./packages/babel-plugin-node-cjs-interop/README.md) for details.
### SWC version
There is the plugin for SWC too. See [the package's README](./packages/swc-plugin-node-cjs-interop/README.md) for details.
## Solution 2: manually inserting the wrapper
```
npm install -D node-cjs-interop
# or:
yarn add -D node-cjs-interop
```
```javascript
import styledOrig from "styled-components";
import { interopImportCJSDefault } from "node-cjs-interop";
const styled = interopImportCJSDefault(styledOrig);
```
See [the package's README](./packages/node-cjs-interop/README.md) for details.