Vue Module Dependency Detective

2.3.0 · active · verified Sun Apr 19

detective-vue2 is a utility library designed to extract module dependencies from Vue Single File Components (SFCs). It parses Vue files, including `<template>`, `<script>`, and `<style>` blocks, to identify `import` and `require` statements, as well as dependencies referenced in template expressions or style imports. The current stable version is 2.3.0, with releases occurring periodically to update underlying dependency parsers (like `detective-typescript`) and add support for new Vue syntax features, such as `script setup` and mixed `script/script setup` blocks. It distinguishes itself by specifically targeting Vue SFCs, providing a comprehensive solution for analyzing the dependency graph of Vue applications, supporting both Vue 2 and Vue 3 constructs. It is crucial for build tools, bundlers, and static analysis.

Common errors

```
Error: Cannot find module 'typescript' from '...' at Function.Module._resolveFilename
```
cause The 'typescript' package is a peer dependency and must be installed explicitly in your project.

fix Run `npm install typescript` or `yarn add typescript` in your project directory.
```
ReferenceError: require is not defined in ES module scope
```
cause You are attempting to use CommonJS `require()` syntax within an ES Module (ESM) file or context where it is not supported.

fix Change your import statement from `const detective = require('detective-vue2');` to `import detective from 'detective-vue2';`.
```
SyntaxError: The requested module 'detective-vue2' does not provide an export named 'detective'
```
cause The `detective-vue2` package exports a default function, but you are trying to import it as a named export.

fix Use a default import: `import detective from 'detective-vue2';` instead of `import { detective } from 'detective-vue2';`.
```
Error: Your current Node.js version is <18. detective-vue2 requires Node.js 18 or higher.
```
cause Your Node.js environment does not meet the minimum version requirement for `detective-vue2`.

fix Upgrade your Node.js installation to version 18 or newer (e.g., using `nvm install 18` and `nvm use 18`).

Warnings

breaking Version 2.0.0 introduced significant internal changes and potentially breaking API modifications from the 1.x series. Users upgrading from v1 should review their integration carefully.
Fix: Consult the `detective-vue2` GitHub repository and any related `detective-typescript` changelogs for specific migration instructions, as detailed breaking changes were not explicitly listed in the v2.0.0 release notes beyond 'Full Changelog'.
gotcha The `typescript` package is a required peer dependency, meaning it must be explicitly installed alongside `detective-vue2` for the library to function correctly when processing TypeScript code.
Fix: Ensure `typescript` is installed in your project: `npm install typescript`.
gotcha detective-vue2 requires Node.js version 18 or higher. Running it on older Node.js versions will result in execution errors.
Fix: Upgrade your Node.js environment to version 18 or newer.
breaking Version 2.2.0 updated the underlying `detective-typescript` dependency to v14.0.0. This major update in a core parsing dependency may introduce new behaviors or breaking changes related to TypeScript parsing, which could indirectly affect `detective-vue2`'s output.
Fix: Review dependency detection results carefully after upgrading to v2.2.0+ if your project relies on specific TypeScript parsing nuances. Consult `detective-typescript` v14.0.0 changelog for details.
gotcha Early versions (prior to v2.0.2) of `detective-vue2` did not fully support Vue 3's `<script setup>` syntax. Initial support was added in v2.0.2, with further refinements for mixed `<script>` and `<script setup>` in v2.0.3.
Fix: Ensure you are using `detective-vue2` version 2.0.3 or newer to correctly parse Vue SFCs utilizing `<script setup>`.

Install

npm install detective-vue2 npm
yarn add detective-vue2 yarn
pnpm add detective-vue2 pnpm

Imports

detective
wrong:
```
import { detective } from 'detective-vue2';
```
correct:
```
import detective from 'detective-vue2';
```
The library exports a default function for dependency detection. Use a default import in ESM contexts.
detective
```
const detective = require('detective-vue2');
```
This is the CommonJS import style, commonly used in Node.js environments.

Quickstart

Demonstrates how to use `detective-vue2` to extract module dependencies from a Vue Single File Component's content, covering script, template, and style imports.

const fs = require('fs');
const detective = require('detective-vue2');

// Example Vue SFC content with various dependencies
const vueFileContent = `
<template>
  <div>
    <MyComponent :prop="variableFromScript"></MyComponent>
    <router-link to="/foo">Go to Foo</router-link>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import MyComponent from './components/MyComponent.vue';
import { someUtility } from '@/utils/helpers';

const variableFromScript = ref('hello');
console.log(someUtility());
</script>

<style lang="scss">
@import './styles/base.scss';
.container {
  color: #333;
}
</style>
`;

try {
  const dependencies = detective(vueFileContent);
  console.log('Detected dependencies:', dependencies);
  // Expected output will include: 'vue', './components/MyComponent.vue', '@/utils/helpers', './styles/base.scss'
} catch (error) {
  console.error('Error detecting dependencies:', error);
}

// To run:
// 1. Create a project: `mkdir my-app && cd my-app && npm init -y`
// 2. Install dependencies: `npm install detective-vue2 typescript`
// 3. Save this code as `quickstart.js`
// 4. Execute: `node quickstart.js`

view raw JSON →