TypeScript does not parse properly

[adrianord]

Hello, I'm a bit new to emacs and Spacemacs, and I seem to be having problems with getting vue-mode to play nice with Typescript. I'm using Spacemacs 0.200.9.x on GNU Emacs 25.1.1 (x86_64-w64-mingw32) of 2016-09-21 on Windows 10 Build 15063.

When I try to parse this file from the Typescript tutorial:

<template>
  <div>
    <div class="greeting">Hello {{name}}{{exclamationMark}}</div>
    <button @click="decrement">-</button>
    <button @click="increment">+</button>
  </div>
</template>

<script lang="ts">
  import Vue from "vue";

  export default Vue.extend({
    props: ['name',  'initialEnthusiasm'],
    data() {
      return {
        enthusiasm: this.initialEnthusiasm,
      }
    },
    methods: {
      increment() { this.enthusiasm++; },
      decrement() {
        if (this.enthusiasm > 1){
          this.enthusiasm--;
        }
      },
    },
    computed : {
      exclamationMark() : string {
        return Array(this.enthusiasm + 1).join('!');
      }
    }
  });
</script>

<style>
.greeting {
  font-size: 20px;
}
</style>

I get

Debugger entered--Lisp error: (wrong-type-argument stringp nil)
  file-name-nondirectory(nil)
  file-name-extension(nil)
  tide-command:openfile()
  tide-configure-buffer()
  tide-setup()
  run-hooks(change-major-mode-after-body-hook prog-mode-hook typescript-mode-hook)
  apply(run-hooks (change-major-mode-after-body-hook prog-mode-hook typescript-mode-hook))
  run-mode-hooks(typescript-mode-hook)
  typescript-mode()
  mmm-update-mode-info(typescript-mode)
  mmm-make-region(typescript-mode 211 688 :face nil :front nil :back nil :evaporation front :match-front "<script lang=\"ts\">\n" :match-back "</script>" :beg-sticky t :end-sticky t :name nil :delimiter-mode fundamental-mode :front-face nil :back-face nil :creation-hook nil)
  mmm-ify(:start 1 :stop 749 :submode typescript-mode :front "<script\\(?: +\\w+=\".*?\" *?\\)* +lang=\"ts\"\\(?: +\\w+=\".*?\" *?\\)*\\(?: +scoped\\)? *>\n" :back "^</script *>" :face nil)
  apply(mmm-ify :start 1 :stop 749 (:submode typescript-mode :front "<script\\(?: +\\w+=\".*?\" *?\\)* +lang=\"ts\"\\(?: +\\w+=\".*?\" *?\\)*\\(?: +scoped\\)? *>\n" :back "^</script *>" :face nil))
  mmm-apply-class(vue-ts 1 749 nil)
  mmm-apply-classes((universal vue-sass vue-scss vue-less vue-stylus vue-css vue-nil vue-typescript vue-ts vue-coffee vue-babel vue-es6 vue-js vue-nil vue-slim vue-slm vue-pug vue-jade vue-html vue-nil) :start 1 :stop 749)
  mmm-apply-all()
  mmm-mode-on()
  mmm-make-region(css-mode 707 740 :face nil :front nil :back nil :evaporation front :match-front "<style>\n" :match-back "</style>" :beg-sticky t :end-sticky t :name nil :delimiter-mode fundamental-mode :front-face nil :back-face nil :creation-hook nil)
  mmm-ify(:start 1 :stop 749 :submode css-mode :front "<style\\(?: +\\(?:\\w\\{1,3\\}=\\|[^l]\\w\\w\\w=\\|\\w[^a]\\w\\w=\\|\\w\\w[^n]\\w=\\|\\w\\w\\w[^g]=\\w\\{5,\\}=\\)\".*?\" *?\\)*\\(?: +scoped\\)? *>\n" :back "^</style *>" :face nil)
  apply(mmm-ify :start 1 :stop 749 (:submode css-mode :front "<style\\(?: +\\(?:\\w\\{1,3\\}=\\|[^l]\\w\\w\\w=\\|\\w[^a]\\w\\w=\\|\\w\\w[^n]\\w=\\|\\w\\w\\w[^g]=\\w\\{5,\\}=\\)\".*?\" *?\\)*\\(?: +scoped\\)? *>\n" :back "^</style *>" :face nil))
  mmm-apply-class(vue-nil 1 749 nil)
  mmm-apply-classes((universal vue-sass vue-scss vue-less vue-stylus vue-css vue-nil vue-typescript vue-ts vue-coffee vue-babel vue-es6 vue-js vue-nil vue-slim vue-slm vue-pug vue-jade vue-html vue-nil) :start 1 :stop 749)
  mmm-apply-all()
  mmm-parse-buffer()
  vue-mode-reparse()
  funcall-interactively(vue-mode-reparse)
  call-interactively(vue-mode-reparse record nil)
  command-execute(vue-mode-reparse record)
  helm-M-x(nil #("vue-mode-reparse" 0 16 (match-part "vue-mode-reparse")))
  funcall-interactively(helm-M-x nil #("vue-mode-reparse" 0 16 (match-part "vue-mode-reparse")))
  call-interactively(helm-M-x nil nil)
  command-execute(helm-M-x)

Using lang="typescript" yields the same results.

These are my layers

(defun dotspacemacs/layers ()

  (setq-default

   dotspacemacs-distribution 'spacemacs

   dotspacemacs-enable-lazy-installation 'unused

   dotspacemacs-ask-for-lazy-installation t

   dotspacemacs-configuration-layer-path '()

   dotspacemacs-configuration-layers
   '(
     vimscript
     sql
     markdown
     html
     helm
     auto-completion
     ;; better-defaults
     emacs-lisp
     git
     markdown
     org
     typescript
     javascript
     html
     (shell :variables
            shell-default-shell 'shell
            shell-default-height 30
            shell-default-position 'bottom)
     spell-checking
     syntax-checking
     version-control
     )

   dotspacemacs-additional-packages '(
                                      ssh-agency
                                      nlinum-relative
                                      vue-mode
                                      )

   dotspacemacs-frozen-packages '()

   dotspacemacs-excluded-packages '()

   dotspacemacs-install-packages 'used-only))

When I use lang="js" seems to work fine I'm guessing it might be a problem with my configuration, but I figured it'd be useful to put this as an issue in case anyone else runs into this issue who is new to spacemacs and may be missing something in their configuration.

My normal Typescript Major Mode seems to be working fine with syntax highlighting and auto-completion and being able to jump to definitions.

[AdamNiederer]

Yeah, that looks like a problem with tide. You'll have to speak to them. In the mean time, disabling tide should work.

[Kjir]

The problem is actually with typescript-mode rather than tide.