Skip to content

Conversation

@MarkShawn2020
Copy link
Contributor

Summary

Resolves MODULE_NOT_FOUND errors when using pnpm link for local development.

This fix enables smooth contributor workflow for testing unpublished changes in real projects.

Problems Solved

  1. Relative paths instead of NPM specifiers: Generated web component files now use relative paths for imports, ensuring they resolve correctly regardless of symlink configuration
  2. Project cache directory: Write generated files to node_modules/.code-inspector/ instead of the plugin's installation directory
  3. Directory creation safety: Ensure cache directory exists before write operations
  4. Next.js compatibility: Better path resolution for Next.js projects using pnpm link

Root Cause

When code-inspector-plugin is linked via pnpm link, the hardcoded NPM-style import path code-inspector-plugin/dist/append-code-*.js caused MODULE_NOT_FOUND errors. This occurred because:

  • The file was written to the plugin's real directory (following symlinks)
  • Node.js resolution looked in the consumer's node_modules
  • The path mismatch broke module resolution

Solution

Changed writeWebComponentFile to:

  1. Return relative file paths instead of NPM specifiers
  2. Write to project's cache directory (node_modules/.code-inspector/)
  3. Calculate proper relative paths from importing file to generated file

This ensures imports resolve correctly with:

  • pnpm link / npm link / yarn link
  • Symlinked packages
  • Monorepo setups

Use Cases Enabled

✅ Local development with linked packages
✅ Testing unpublished changes before release
✅ Better contributor development workflow
✅ Monorepo development scenarios

Changes

Files modified:

  • packages/core/src/server/use-client.ts: Relative path import generation
  • packages/code-inspector-plugin/src/index.ts: Use project cache directory
  • packages/core/src/shared/record-cache.ts: Safe directory creation

Impact:

  • 3 files changed
  • +29 insertions, -17 deletions
  • No breaking changes
  • Backward compatible

Testing

  • ✅ Tested with pnpm link in Next.js project
  • ✅ Verified module resolution works correctly
  • ✅ All existing tests pass
  • ✅ No impact on non-linked package usage

Resolve MODULE_NOT_FOUND errors when using pnpm link for local development.

Problems solved:
1. Use relative paths instead of NPM specifiers for generated files
2. Write generated files to project cache dir (node_modules/.code-inspector)
3. Ensure cache directory exists before write operations
4. Better Next.js compatibility with relative path imports

This enables smooth local development workflow:
- pnpm/npm/yarn link support
- Testing unpublished changes in real projects
- Better contributor development workflow

Changes:
- packages/core/src/server/use-client.ts: Switch to relative path imports
- packages/code-inspector-plugin/src/index.ts: Use project cache directory
- packages/core/src/shared/record-cache.ts: Add directory creation
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant