title: Vue + Typescript + Webpack: Module build failing - Can't find vue.esm.js
body: <p>I am trying to build a basic project using typescript, webpack and vue.js. However, when i run <code>webpack</code> from the command line, I am currently getting the following error:</p>
  
  <pre><code>ERROR in ./node_modules/vue/dist/vue.esm.js
  Module build failed: Error: Could not find file: 'c:\Users\user\Games\javascriptTimeGame\node_modules\vue\dist\vue.esm.js'.
      at getValidSourceFile (c:\Users\user\Games\javascriptTimeGame\node_modules\typescript\lib\typescript.js:89078:23)
      at Object.getEmitOutput (c:\Users\user\Games\javascriptTimeGame\node_modules\typescript\lib\typescript.js:89448:30)
      at getEmit (c:\Users\user\Games\javascriptTimeGame\node_modules\ts-loader\dist\index.js:122:43)
      at successLoader (c:\Users\user\Games\javascriptTimeGame\node_modules\ts-loader\dist\index.js:42:11)
      at Object.loader (c:\Users\user\Games\javascriptTimeGame\node_modules\ts-loader\dist\index.js:29:12)
  </code></pre>
  
  <p>This is strange, because the file it says it can't find is definitely there.</p>
  
  <p>My main script: <code>script.ts</code>, looks like:</p>
  
  <pre><code>import Vue from 'vue'
  
  function main(){
    let vueApp = new Vue({
      el: "#vue-test",
      data : {
        message: "Hello World"
      }
    });
  }
  
  main();
  </code></pre>
  
  <p>My <code>tsconfig.json</code> looks like:</p>
  
  <pre><code>{
    "compileOnSave":  true,
    "compilerOptions": {
      "target": "es6",
      "module": "es6",
      "moduleResolution": "node",
      "allowSyntheticDefaultImports": true,
      "strict": true,
      "removeComments": true,
      "preserveConstEnums": true,
      "sourceMap": true,
      "outDir": "../jsDist",
      "allowJs": true
    }
  }
  </code></pre>
  
  <p>My <code>package.json</code> dev dependencies look like:</p>
  
  <pre><code>  "devDependencies": {
      "@types/vue": "^2.0.0",
      "http-server": "^0.10.0",
      "node-sass": "^4.5.3",
      "npm-run-all": "^4.0.2",
      "ts-loader": "^2.3.3",
      "typescript": "^2.4.2",
      "vue": "^2.4.2",
      "watch": "^1.0.2",
      "webpack": "^3.5.5"
    }
  }
  </code></pre>
  
  <p>And my <code>webpack.config.js</code> looks like:</p>
  
  <pre><code>module.exports = {
      devtool: 'inline-source-map',
      entry: "./ts/script.ts",
      output: {
          filename: "bundle.js",
          path: `${__dirname}/jsDist`
      },
      module: {
          rules : [
              {
                  loader: 'ts-loader'
              }
          ]
      },
      resolve: {
          extensions: ['.ts', '.js'],
          alias: {
              'vue$': 'vue/dist/vue.esm.js'
          },
      }
  }
  </code></pre>
  
  <p>A few things I've noticed that might isolate the problem.</p>
  
  <p>First, If I simply run <code>tsc</code> to directly build my source files with the typescript compiler, then it works perfectly without error. This suggests there is something wrong with the webpack part specifically.</p>
  
  <p>Second, If I alter <code>script.ts</code> to just be:</p>
  
  <pre><code>import Vue from 'vue'
  
  function main(){
    console.log("Harmless");
  }
  
  main();
  </code></pre>
  
  <p>Then webpack builds it without fuss. This suggests that it is not the top-line import that webpack seems to have a problem with, but specifically the <em>usage</em> of Vue.</p>
  
  <p>Finally if I alter my webpack.config.js such that ts-loader has the additional option <code>transpileOnly: true</code> then it also seems to build without fuss (but of course I don't want to do this, as then I lose my reason for using typescript in the first place!)</p>
  
  <p>Any ideas what might be causing this error?</p>