How to use a git submodule with typescript code in a typescript project

Question

I'm working on a VueJS project that uses different colors and some other things depending on a environment variable. These values are contained in another repository I added as a submodule. So the structure in my project is:

• my-project
  • the-submodule
  • node_modules
  • public
  • src

To make this work I included this in the vue.config.js:

module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set('@theme', path.resolve('the-submodule/' + process.env.VUE_APP_THEME))
  },
...

I use it like this, for example in plugins/vuetify.ts:

import Vue from 'vue'
import Vuetify from 'vuetify/lib/framework'
import colors from '@theme/colors'

Vue.use(Vuetify)

export default new Vuetify({
  theme: {
    themes: {
      light: {
        ...colors
      }
    }
  }
})

Or in router/index.ts:

import texts from '@theme/texts'

...

router.afterEach((to) => {
  Vue.nextTick(() => {
    document.title = to.meta.title ? `${texts.appName} | ${to.meta.title}` : texts.appName
  })
})

While this does compile and works, I still get errors during compilation:

ERROR in /Users/sme/projects/aedifion-frontend/src/plugins/vuetify.ts(4,20):
4:20 Cannot find module '@theme/colors' or its corresponding type declarations.
    2 | import Vue from 'vue'
    3 | import Vuetify from 'vuetify/lib/framework'
  > 4 | import colors from '@theme/colors'
      |                    ^
    5 | 
    6 | Vue.use(Vuetify)
    7 | 
ERROR in /Users/sme/projects/aedifion-frontend/src/router/index.ts(12,19):
12:19 Cannot find module '@theme/texts' or its corresponding type declarations.
  > 12 | import texts from '@theme/texts'
       |                   ^

These are examples of the files in the themes:

the-submodule/some-theme/colors.ts:

import { Colors } from '../types'

export default {
  accent: '#288946',
  error: '#e60046',
  info: '#969196',
  primary: '#007982',
  secondary: '#96BE0D',
  success: '#a0af69',
  warning: '#fab450'
} as Colors

the-submodule/some-theme/texts.ts:

import { Texts } from '../types'

export default {
  appName: 'MyApp'
} as Texts

the-submodule/types.ts:

export interface Colors {
  accent: string;
  error: string;
  info: string;
  primary: string;
  secondary: string;
  success: string;
  warning: string;
}

export interface Texts {
  appName: string;
}

I also created different versions of .d.ts files in the-submodule, both for each type or one for alle types.

I've tried pretty much everything I could find. How do I get rid of those errors?

EDIT:

It works when I explicitly map the path in the tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "@/*": [
        "src/*"
      ],
      "@theme/*": [
        "the-submodule/some-theme/*"
      ]
    },

So I guess the question is: How can I get the path mapping in tsconfig-json to work without explicitly adding some-theme to the path?

Answer 1

Can you try to put the submodule folder in the rootDirs of the tsconfig.json?

"compilerOptions": {
     "rootDirs": ["src/","*submodule folder*"],   /* List of root folders whose combined content represents the structure of the project at runtime. */
    }

source: https://www.typescriptlang.org/tsconfig#rootDirs