Back to Biomejs

noUnresolvedImports

src/content/docs/linter/rules/no-unresolved-imports.mdx

latest3.6 KB
Original Source

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs> <TabItem label="JavaScript (and super languages)" icon="seti:javascript"> :::note This rule belongs to the project domain. This means that its activation will activate the Biome Scanner to scan the files of your project. Read more about it in the [documentation page](/linter/domains#project) ::: ## Summary - Rule available since: `v2.0.0` - Diagnostic Category: [`lint/correctness/noUnresolvedImports`](/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 [**error**](/reference/diagnostics#error). - This rule belongs to the following domains: - [`project`](/linter/domains#project) - Sources: - Inspired from [`import/named`](https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/named.md)

How to configure

json
{
	"linter": {
		"rules": {
			"correctness": {
				"noUnresolvedImports": "error"
			}
		}
	}
}

Description

Warn when importing non-existing exports.

Importing a non-existing export is an error at runtime or build time. Biome can detect such incorrect imports and report errors for them.

Note that if you use TypeScript, you probably don't want to use this rule, since TypeScript already performs such checks for you.

Known Limitations

  • This rule does not validate imports through dynamic import() expressions or CommonJS require() calls.

Examples

Invalid

js
export function foo() {};
js
// Attempt to import symbol with a typo:
import { fooo } from "./foo.js";
<pre class="language-text"><code class="language-text"><a href="file:///bar.js">/bar.js</a>:2:10 <a href="https://biomejs.dev/linter/rules/no-unresolved-imports">lint/correctness/noUnresolvedImports</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Tomato;">✖</span></strong> <span style="color: Tomato;">The path </span><span style="color: Tomato;"><strong>./foo.js</strong></span><span style="color: Tomato;"> has no export named </span><span style="color: Tomato;"><strong>fooo</strong></span><span style="color: Tomato;">.</span> <strong>1 │ </strong>// Attempt to import symbol with a typo: <strong><span style="color: Tomato;">&gt;</span></strong> <strong>2 │ </strong>import &#123; fooo &#125; from &quot;./foo.js&quot;; <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>3 │ </strong> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Make sure that the path is correct and that you're importing the right symbol.</span> </code></pre>

Valid

js
export function foo() {};
js
// Fixed typo:
import { foo } from "./foo.js";
</TabItem> </Tabs>