title: Vue CLI 3 + Typescript + TSLint and Vue 2.5.17
body: <p>Recently, I've decided to play around with Vue 2.5.17 and TypeScript. Everything works fine, even compiles just fine and works, however:</p>
  <ol>
  <li>Imports of <strong>.vue</strong> files in WebStorm 2018.2 always result in the <em><strong>Cannot find module @/path-to-the-module</strong></em></li>
  <li>Typescript always throw the same error when compiling</li>
  <li>Despite the fact that module is not found, I'm getting a working page, no errors in the console, HMR and other features which should not be available due to the fact that module is not found, hence compilation should not be completed.</li>
  </ol>
  <p>This is my <strong>tsconfig.json file</strong>:</p>
  <pre><code>{
    &quot;compilerOptions&quot;: {
      &quot;target&quot;: &quot;esnext&quot;,
      &quot;module&quot;: &quot;esnext&quot;,
      &quot;strict&quot;: true,
      &quot;jsx&quot;: &quot;preserve&quot;,
      &quot;importHelpers&quot;: true,
      &quot;moduleResolution&quot;: &quot;node&quot;,
      &quot;experimentalDecorators&quot;: true,
      &quot;esModuleInterop&quot;: true,
      &quot;allowSyntheticDefaultImports&quot;: true,
      &quot;sourceMap&quot;: true,
      &quot;baseUrl&quot;: &quot;.&quot;,
      &quot;types&quot;: [
        &quot;webpack-env&quot;,
        &quot;jest&quot;
      ],
      &quot;paths&quot;: {
        &quot;@/*&quot;: [
          &quot;src/*&quot;
        ]
      },
      &quot;lib&quot;: [
        &quot;esnext&quot;,
        &quot;dom&quot;,
        &quot;dom.iterable&quot;,
        &quot;scripthost&quot;
      ],
      &quot;plugins&quot;: [
        { &quot;name&quot;: &quot;ts-vue-plugin&quot; }
      ]
    },
    &quot;include&quot;: [
      &quot;src/**/*.ts&quot;,
      &quot;src/**/*.tsx&quot;,
      &quot;src/**/*.vue&quot;,
      &quot;tests/**/*.ts&quot;,
      &quot;tests/**/*.tsx&quot;
    ],
    &quot;exclude&quot;: [
      &quot;node_modules&quot;
    ]
  }
  </code></pre>
  <p>And here is my <strong>vue.config.js</strong> after reading on many issues on GitHub and articles on how to resolve the issue:</p>
  <pre><code>module.exports = {
      runtimeCompiler: true,
      chainWebpack: (config) =&gt; {
          config.module.rule('vue').use('vue-loader').loader('vue-loader').tap((options) =&gt; {
              if (!options.hasOwnProperty('loaders')) {
                  options.loaders = {};
              }
              options.loaders.ts = 'ts-loader!tslint-loader';
              return options;
          });
          config.module.rule('ts').use('ts-loader').loader('ts-loader').tap((options) =&gt; {
              options.appendTsSuffixTo = [/\.ts\.vue$/];
              options.appendTsxSuffixTo = [/\.tsx\.vue$/];
              options.transpileOnly = true;
              return options;
          });
      }
  };
  </code></pre>
  <p>However, the issue is still there.</p>
  <p>This is a project built using the <strong>Vue ui</strong> web interface, so basically one that should work without any issue. All of the <strong><em>shim-</em>.d.ts</strong>* files are in the root of the <strong>src/</strong> folder, nothing is changed here. The only difference from the <em>vanilla</em> project, is that I moved the <strong>App.vue</strong> file from the <code>src/App.vue</code> to the <code>src/components/App.vue</code></p>
  <h2>Update</h2>
  <p><em><strong>import Application from '../src/components/App';</strong></em></p>
  <pre><code>ERROR in /home/ubuntu/Development/VueProject/src/main.ts
  2:25 Cannot find module '../src/components/App'.
      1 | import Vue from 'vue';
    &gt; 2 | import Application from '../src/components/App';
        |                         ^
      3 | import router from '@/router';
      4 | import '@/utils/registerServiceWorker';
      5 |
  
    To create a production build, run yarn build.
  
  No lint errors found
  Version: typescript 3.1.3, tslint 5.11.0
  Time: 4223ms
  </code></pre>
  <p><em><strong>import Application from '@/components/App';</strong></em></p>
  <pre><code>ERROR in /home/ubuntu/Development/VueProject/src/main.ts
  2:25 Cannot find module '@/components/App'.
      1 | import Vue from 'vue';
    &gt; 2 | import Application from '@/components/App';
        |                         ^
      3 | import router from '@/router';
      4 | import '@/utils/registerServiceWorker';
      5 |
  
    To create a production build, run yarn build.
  
  No lint errors found
  Version: typescript 3.1.3, tslint 5.11.0
  Time: 4223ms
  </code></pre>