---
# Don't modify this file manually. This file is auto generated from source, and you will lose your changes next time the website is built.
# Head to the `biomejs/biome` repository, and modify the source code in there.

title: noCommonJs
description: Learn more about noCommonJs
---
import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs>
<TabItem label="JavaScript (and super languages)" icon="seti:javascript">
## Summary
- Rule available since: `v1.9.0`
- Diagnostic Category: [`lint/style/noCommonJs`](/reference/diagnostics#diagnostic-category)
- This rule isn't recommended, so you need to enable it.
- This rule doesn't have a fix.
- The default severity of this rule is [**warning**](/reference/diagnostics#warning).
- Sources: 
  - Same as [`@typescript-eslint/no-require-imports`](https://typescript-eslint.io/rules/no-require-imports)
  - Same as [`import/no-commonjs`](https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-commonjs.md)

## How to configure
```json title="biome.json"
{
	"linter": {
		"rules": {
			"style": {
				"noCommonJs": "error"
			}
		}
	}
}

```
## Description
Disallow use of CommonJs module system in favor of ESM style imports.

ESM-style `import`s are modern alternative to CommonJS `require` imports. Supported by all modern browsers and Node.js versions.
Tooling can more easily statically analyze and tree-shake ESM `import`s compared to CommonJs.

## Examples

### Invalid

```js
require('node:fs');
```

<pre class="language-text"><code class="language-text">code-block.js:1:1 <a href="https://biomejs.dev/linter/rules/no-common-js">lint/style/noCommonJs</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━<br /><br />  <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">Use ESM </span><span style="color: Orange;"><strong>import</strong></span><span style="color: Orange;">s instead of </span><span style="color: Orange;"><strong>require</strong></span><span style="color: Orange;">.</span><br />  <br />  <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>require('node:fs');<br />   <strong>   │ </strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><br />    <strong>2 │ </strong><br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">ESM-style </span><span style="color: lightgreen;"><strong>import</strong></span><span style="color: lightgreen;"> statements are more easily statically analyzable and tree-shakable compared to CommonJs </span><span style="color: lightgreen;"><strong>require</strong></span><span style="color: lightgreen;">.</span><br />  <br /></code></pre>

```js
module.exports = { a: 'b' }
```

<pre class="language-text"><code class="language-text">code-block.js:1:1 <a href="https://biomejs.dev/linter/rules/no-common-js">lint/style/noCommonJs</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━<br /><br />  <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">Use ESM </span><span style="color: Orange;"><strong>export</strong></span><span style="color: Orange;">s instead of </span><span style="color: Orange;"><strong>module.exports</strong></span><span style="color: Orange;">.</span><br />  <br />  <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>module.exports = &#123; a: 'b' &#125;<br />   <strong>   │ </strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><br />    <strong>2 │ </strong><br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">ESM-style </span><span style="color: lightgreen;"><strong>export</strong></span><span style="color: lightgreen;"> statements are more easily statically analyzable and tree-shakable compared to CommonJs </span><span style="color: lightgreen;"><strong>module.exports</strong></span><span style="color: lightgreen;">.</span><br />  <br /></code></pre>

```js
exports.a = 'b';
```

<pre class="language-text"><code class="language-text">code-block.js:1:1 <a href="https://biomejs.dev/linter/rules/no-common-js">lint/style/noCommonJs</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━<br /><br />  <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">Use ESM </span><span style="color: Orange;"><strong>export</strong></span><span style="color: Orange;">s instead of </span><span style="color: Orange;"><strong>module.exports</strong></span><span style="color: Orange;">.</span><br />  <br />  <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>exports.a = 'b';<br />   <strong>   │ </strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><br />    <strong>2 │ </strong><br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">ESM-style </span><span style="color: lightgreen;"><strong>export</strong></span><span style="color: lightgreen;"> statements are more easily statically analyzable and tree-shakable compared to CommonJs </span><span style="color: lightgreen;"><strong>module.exports</strong></span><span style="color: lightgreen;">.</span><br />  <br /></code></pre>

### Valid

```js
import fs from 'node:fs';
```

```js
import('node:fs')
```

```js
export const a = 'b';
```

```js
export default { a: 'b' };
```

## Caveats

Rule is automatically disabled inside `.cjs` and `.cts` files, because they are explicitly CommonJs files.

This rule could be helpful if you are migrating from CommonJs to ESM,
but if you wish to continue using CommonJs, you can safely disable it.

## Related links

- [Disable a rule](/linter/#disable-a-rule)
- [Configure the code fix](/linter#configure-the-code-fix)
- [Rule options](/linter/#rule-options)
- [Source Code](https://github.com/biomejs/biome/blob/main/crates/biome_js_analyze/src/lint/style/no_common_js.rs)
- [Test Cases](https://github.com/biomejs/biome/blob/main/crates/biome_js_analyze/tests/specs/style/noCommonJs)

</TabItem>
</Tabs>