{"id":10739,"library":"detective-vue2","title":"Vue Module Dependency Detective","description":"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.","status":"active","version":"2.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/dependents/detective-vue2","tags":["javascript","detective","dependencies","module","ast","import","vue"],"install":[{"cmd":"npm install detective-vue2","lang":"bash","label":"npm"},{"cmd":"yarn add detective-vue2","lang":"bash","label":"yarn"},{"cmd":"pnpm add detective-vue2","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency for parsing TypeScript code within Vue script blocks.","package":"typescript","optional":false}],"imports":[{"note":"The library exports a default function for dependency detection. Use a default import in ESM contexts.","wrong":"import { detective } from 'detective-vue2';","symbol":"detective","correct":"import detective from 'detective-vue2';"},{"note":"This is the CommonJS import style, commonly used in Node.js environments.","symbol":"detective","correct":"const detective = require('detective-vue2');"}],"quickstart":{"code":"const fs = require('fs');\nconst detective = require('detective-vue2');\n\n// Example Vue SFC content with various dependencies\nconst vueFileContent = `\n<template>\n  <div>\n    <MyComponent :prop=\"variableFromScript\"></MyComponent>\n    <router-link to=\"/foo\">Go to Foo</router-link>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport MyComponent from './components/MyComponent.vue';\nimport { someUtility } from '@/utils/helpers';\n\nconst variableFromScript = ref('hello');\nconsole.log(someUtility());\n</script>\n\n<style lang=\"scss\">\n@import './styles/base.scss';\n.container {\n  color: #333;\n}\n</style>\n`;\n\ntry {\n  const dependencies = detective(vueFileContent);\n  console.log('Detected dependencies:', dependencies);\n  // Expected output will include: 'vue', './components/MyComponent.vue', '@/utils/helpers', './styles/base.scss'\n} catch (error) {\n  console.error('Error detecting dependencies:', error);\n}\n\n// To run:\n// 1. Create a project: `mkdir my-app && cd my-app && npm init -y`\n// 2. Install dependencies: `npm install detective-vue2 typescript`\n// 3. Save this code as `quickstart.js`\n// 4. Execute: `node quickstart.js`","lang":"javascript","description":"Demonstrates how to use `detective-vue2` to extract module dependencies from a Vue Single File Component's content, covering script, template, and style imports."},"warnings":[{"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'.","message":"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.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Ensure `typescript` is installed in your project: `npm install typescript`.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade your Node.js environment to version 18 or newer.","message":"detective-vue2 requires Node.js version 18 or higher. Running it on older Node.js versions will result in execution errors.","severity":"gotcha","affected_versions":"<18.0.0 (Node.js)"},{"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.","message":"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.","severity":"breaking","affected_versions":">=2.2.0"},{"fix":"Ensure you are using `detective-vue2` version 2.0.3 or newer to correctly parse Vue SFCs utilizing `<script setup>`.","message":"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.","severity":"gotcha","affected_versions":"<2.0.2"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Run `npm install typescript` or `yarn add typescript` in your project directory.","cause":"The 'typescript' package is a peer dependency and must be installed explicitly in your project.","error":"Error: Cannot find module 'typescript' from '...' at Function.Module._resolveFilename"},{"fix":"Change your import statement from `const detective = require('detective-vue2');` to `import detective from 'detective-vue2';`.","cause":"You are attempting to use CommonJS `require()` syntax within an ES Module (ESM) file or context where it is not supported.","error":"ReferenceError: require is not defined in ES module scope"},{"fix":"Use a default import: `import detective from 'detective-vue2';` instead of `import { detective } from 'detective-vue2';`.","cause":"The `detective-vue2` package exports a default function, but you are trying to import it as a named export.","error":"SyntaxError: The requested module 'detective-vue2' does not provide an export named 'detective'"},{"fix":"Upgrade your Node.js installation to version 18 or newer (e.g., using `nvm install 18` and `nvm use 18`).","cause":"Your Node.js environment does not meet the minimum version requirement for `detective-vue2`.","error":"Error: Your current Node.js version is <18. detective-vue2 requires Node.js 18 or higher."}],"ecosystem":"npm"}