node-cjs-interop

KO | EN

gitlite — search

#hacktoberfest #react #ai #golang #machine-learning #rust #linux #java #windows #kubernetes #awesome-list #vue #ios #openai

node-cjs-interop

(★ 25)

Babel plugin and helper functions for interoperation between Node.js native ESM and Babel ESM

node-cjs-interop 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# `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.

node-cjs-interop

node-cjs-interop 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

node-cjs-interop

node-cjs-interop 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README