egoist / vue-compile

Compile the blocks in Vue single-file components to use JS/CSS instead of Babel/Sass/Stylus.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

--watch crashes with certain sass

mesqueeb opened this issue · comments

whatever I change, the watcher will crash for me with this error:

> rimraf dist && vue-compile --watch src -o dist

src/index.ts -> dist/index.js
src/CodeBlock.vue -> dist/CodeBlock.vue
src/helpers/htmlHelpers.ts -> dist/helpers/htmlHelpers.js
src/ComponentCodeBlock.vue -> dist/ComponentCodeBlock.vue
src/helpers/regexp.ts -> dist/helpers/regexp.js
Rebuilding because ComponentCodeBlock.vue changed..
Error: Expected newline.
  ╷
1 │ .code-block pre {
  │                 ^
  ╵
  src/CodeBlock.vue 1:17  root stylesheet
    at Object._newRenderError (/Users/lucaban/ghq/github.com/CyCraft/planetar/node_modules/sass/sass.dart.js:13231:19)
    at Object._wrapException (/Users/lucaban/ghq/github.com/CyCraft/planetar/node_modules/sass/sass.dart.js:13059:16)
    at _render_closure1.call$2 (/Users/lucaban/ghq/github.com/CyCraft/planetar/node_modules/sass/sass.dart.js:82010:21)
    at _RootZone.runBinary$3$3 (/Users/lucaban/ghq/github.com/CyCraft/planetar/node_modules/sass/sass.dart.js:27550:18)
    at _FutureListener.handleError$1 (/Users/lucaban/ghq/github.com/CyCraft/planetar/node_modules/sass/sass.dart.js:26099:19)
    at _Future__propagateToListeners_handleError.call$0 (/Users/lucaban/ghq/github.com/CyCraft/planetar/node_modules/sass/sass.dart.js:26397:49)
    at Object._Future__propagateToListeners (/Users/lucaban/ghq/github.com/CyCraft/planetar/node_modules/sass/sass.dart.js:4550:77)
    at _Future._completeError$2 (/Users/lucaban/ghq/github.com/CyCraft/planetar/node_modules/sass/sass.dart.js:26229:9)
    at _AsyncAwaitCompleter.completeError$2 (/Users/lucaban/ghq/github.com/CyCraft/planetar/node_modules/sass/sass.dart.js:25883:12)
    at Object._asyncRethrow (/Users/lucaban/ghq/github.com/CyCraft/planetar/node_modules/sass/sass.dart.js:4349:17)
npm ERR! Lifecycle script `dev` failed with error:
npm ERR! Error: command failed
npm ERR!   in workspace: @planetar/component-code-block@1.0.0
npm ERR!   at location: /Users/lucaban/ghq/github.com/CyCraft/planetar/packages/component-code-block

This is the source code of CodeBlock.vue

<template>
  <div :class="`code-block language-${lang}`" v-html="htmlAsString" />
</template>

<style lang="sass">
.code-block
  pre
    margin: 0
</style>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import { codeToHtml } from './helpers/htmlHelpers'

export default defineComponent({
  name: 'CodeBlock',
  props: {
    lang: { type: String /* as PropType<'html' | 'js' | 'css'> */, required: true },
    /**
     * Because of how Vue parses strings, the forward slash in the closing script tag must be escaped
     * or the component will fail to compile.
     *
     * For more information, see these comments:
     * * https://github.com/vuejs/vue/issues/4625
     * * https://github.com/vuejs/vue-loader/issues/506
     * @example `<div>Hi</div>\n<br />\n<script>\nconst a = 1\n<\/script>`
     */
    content: { type: String, required: true },
  },
  setup(props) {
    const htmlAsString = computed(() => {
      return codeToHtml(props.content, props.lang)
    })

    return { htmlAsString }
  },
})
</script>

@egoist any ideas for my issue of my watcher crashing? I can provide extra info when needed.

🎉 This issue has been resolved in version 1.1.1 🎉

The release is available on:

Your semantic-release bot 📦🚀