Adding Typescript to Vue + Rails app - Imports no longer work?

Question

I'm trying to add TypeScript to an existing VueJS + Rails app. I cloned this demo ( https://github.com/gbarillot/rails-vue-demo-app ) then followed the instructions from https://github.com/rails/webpacker

$ bundle exec rails webpacker:install:vue
$ bundle exec rails webpacker:install:typescript

I then modified config/webpack/loaders/typescript.js as described here .

Everything seems to compile, but when I go into my "home" view and change the script to typescript:

<script lang="ts">
import Layout from '../shared/layout';

export default {
  components: {
    Layout
  }
}
</script>

I get the following error:

Failed to compile.

/Users/matt/projects/rails-vue-demo-app/app/javascript/packs/components/home/index.vue.ts
[tsl] ERROR in /Users/matt/projects/rails-vue-demo-app/app/javascript/packs/components/home/index.vue.ts(13,20)
      TS2307: Cannot find module '../shared/layout'.

Why can I no longer find the layout file when typescript is enabled?

Answer 1

I remember running into a similar problem for presentational components. Try adding an empty export in shared/layout so typescript can pick it up:

<script lang="ts">
  export default {}
</script>