question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Build fails due to custom directive missing an SSR Transform

See original GitHub issue

Describe the bug

Adding a simple directive inside a markdown file or an SFC throws an error during the build. Seems like ClientOnly component does not exist yet in VitePress.

Custom directive is missing corresponding SSR transform and will be ignored.

To Reproduce

<div v-test>test</div>


<script>
export default {
  directives: {
    test: {
      mounted(el, binding) {
        console.log(el)
      }
    }
  }
}
</script>

Expected behavior Build should work even though an SSR implementation for the custom directive doesn’t exist.

System Info

  • vitepress version: 0.6.0
  • vite version: v1.0.0-rc.4
  • Node version: 12.18.3
  • OS version: Catalina 10.15.6

Additional context None.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:22 (9 by maintainers)

github_iconTop GitHub Comments

6reactions
antfucommented, Jul 10, 2021
5reactions
yyx990803commented, Dec 5, 2020

v3 SSR docs are not fully complete yet, so for now you’ll have to read the types here: https://github.com/vuejs/vue-next/blob/master/packages/compiler-core/src/transform.ts#L56

ClientOnly is implemented in 8809d2d and will be available in the next release.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to make custom directive in Vue.js 3? - Stack Overflow
I got error like "Cannot read property 'created' of undefined" in console. And nothing is displayed. createApp is missing, I editted my question ......
Read more >
Directive SSR Transform - Get Help - Vue Forum
I've been looking around to try and see how to implement an SSR Transform for a custom directive, it seems that VuePress (i...
Read more >
Missing @Directive()/@Component() decorator migration
This migration adds an empty @Directive() decorator to undecorated base classes that: Use Angular features; Are extended by directives or components.
Read more >
Docs • Svelte
SvelteKit will handle calling the Svelte compiler to convert your .svelte files ... With this, npm run build will generate HTML, JS and...
Read more >
Angular Universal: Complete Practical Guide
Implementing a fine-grained Application shell using custom structural directives; Leveraging the Angular State Transfer API; Code Sample (Github ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found