typescript - Modulkompileringen misslyckades: Fel: Kunde inte hitta fil: '[my-project-directory]\src\App.vue'

[my-project-directory] är den fullständiga sökvägen till mitt projekt.

Jag började med webpack-projektet via "vue init webpack my-project", enligt den officiella Vue.js-dokumentationen.

Jag försöker byta till TypeScript genom att lägga till vuetype.

Jag har lagt till en resources.d.ts-fil i roten av min src-katalog, även om jag är osäker på hur den refereras:

declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}

Jag har bytt ingången till ts i webpack.base.conf.js:

    var path = require('path')
    var utils = require('./utils')
    var config = require('../config')
    var vueLoaderConfig = require('./vue-loader.conf')

    function resolve (dir) {
      return path.join(__dirname, '..', dir)
    }

    module.exports = {
      entry: {
        app: './src/main.ts'
      },
      output: {
        path: config.build.assetsRoot,
        filename: '[name].js',
        publicPath: process.env.NODE_ENV === 'production'
          ? config.build.assetsPublicPath
          : config.dev.assetsPublicPath
      },
      resolve: {
        extensions: ['.js', '.ts', '.vue', '.json'],
        alias: {
          '@': resolve('src')
        }
      },
      module: {
        rules: [
          {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: vueLoaderConfig
          },
          {
            test: /\.js$/,
            loader: 'babel-loader',
            include: [resolve('src'), resolve('test')]
          },
          {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: utils.assetsPath('img/[name].[hash:7].[ext]')
            }
          },
          {
            test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: utils.assetsPath('media/[name].[hash:7].[ext]')
            }
          },
          {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
            }
          }
        ]
      }
    }

Detta är min main.ts-fil. Observera att om jag ändrar importen till './App' (utan .vue), får jag "(2,17): error TS2307: Cannot find module './App'."

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

I App.vue har jag lagt till lang="ts" och använt Component från vuetype-biblioteken:

<template>
   <div>TEST</div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component } from 'vue-property-decorator'

@Component
export default class App extends Vue  {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

App.vue.d.ts-utdata:

import Vue from 'vue';
export default class App extends Vue {
    name: 'app';
    components: {
        Hello;
        Game;
    };
}

Min package.json:

  {
    "name": "dominant-species",
    "version": "1.0.0",
    "description": "A Game",
    "author": "Frank Rizzi",
    "private": true,
    "scripts": {
      "dev": "node build/dev-server.js",
      "start": "node build/dev-server.js",
      "build": "node build/build.js"
    },
    "dependencies": {
      "@types/core-js": "^0.9.42",
      "core-js": "^2.5.0",
      "ts-loader": "^2.3.2",
      "vue": "^2.4.2"
    },
    "devDependencies": {
      "autoprefixer": "^7.1.2",
      "babel-core": "^6.22.1",
      "babel-loader": "^7.1.1",
      "babel-plugin-transform-runtime": "^6.22.0",
      "babel-preset-env": "^1.3.2",
      "babel-preset-stage-2": "^6.22.0",
      "babel-register": "^6.22.0",
      "chalk": "^2.0.1",
      "connect-history-api-fallback": "^1.3.0",
      "copy-webpack-plugin": "^4.0.1",
      "css-loader": "^0.28.0",
      "cssnano": "^3.10.0",
      "eventsource-polyfill": "^0.9.6",
      "express": "^4.14.1",
      "extract-text-webpack-plugin": "^2.0.0",
      "file-loader": "^0.11.1",
      "friendly-errors-webpack-plugin": "^1.1.3",
      "html-webpack-plugin": "^2.28.0",
      "http-proxy-middleware": "^0.17.3",
      "opn": "^5.1.0",
      "optimize-css-assets-webpack-plugin": "^2.0.0",
      "ora": "^1.2.0",
      "rimraf": "^2.6.0",
      "semver": "^5.3.0",
      "shelljs": "^0.7.6",
      "url-loader": "^0.5.8",
      "vue-class-component": "^5.0.2",
      "vue-loader": "^12.1.0",
      "vue-property-decorator": "^5.2.1",
      "vue-style-loader": "^3.0.1",
      "vue-template-compiler": "2.4.2",
      "webpack": "^2.6.1",
      "webpack-bundle-analyzer": "^2.9.0",
      "webpack-dev-middleware": "^1.10.0",
      "webpack-hot-middleware": "^2.18.0",
      "webpack-merge": "^4.1.0"
    },
    "engines": {
      "node": ">= 4.0.0",
      "npm": ">= 3.0.0"
    },
    "browserslist": [
      "> 1%",
      "last 2 versions",
      "not ie <= 8"
    ]
  }

Min tsconfig.json:

  {
    "compilerOptions": {
      // ... other options omitted
    "experimentalDecorators": true,
      "allowSyntheticDefaultImports": true,
      "lib": [
        "es6", "es2015.promise", "es2015.iterable", "dom","dom.iterable","es2015"
      ],
      "module": "commonjs",
      "moduleResolution": "node",
      "sourceMap": true, 
      "target": "es6",
      "noImplicitAny": false
    },
    "exclude": [
      "node_modules"
    ]
  }

Och här är hela felet:

Module build failed: Error: Could not find file: '[MyDirectory]\src\App.vue'.



error  in ./src/App.vue

Module build failed: Error: Could not find file: '[my-project-directory]\
src\App.vue'.
    at getValidSourceFile ([my-user-directory]\npm\node_modules
\typescript\lib\typescript.js:89078:23)
    at Object.getEmitOutput ([my-user-directory]\npm\node_modul
es\typescript\lib\typescript.js:89448:30)
    at getEmit ([my-project-directory]\node_modules\ts-loader\dist\index.
js:114:43)
    at successLoader ([my-project-directory]\node_modules\ts-loader\dist\
index.js:34:11)
    at Object.loader ([my-project-directory]\node_modules\ts-loader\dist\
index.js:21:12)

@ ./src/App.vue 8:2-94
@ ./src/main.ts
@ multi ./build/dev-client ./src/main.ts

Versioner :

node -v
v6.11.2

npm -v
3.10.10

tsc -v
Version 2.4.2

Svar #1

använde du ts-loader?

 {
    test: /\.ts$/,
    exclude: /node_modules|vue\/src/,
    loader: 'ts-loader',
    options: {
      appendTsSuffixTo: [/\.vue$/]
    }
  }

lägg detta i webpack.base.conf.js

Svar #2

Jag hittade problemet som orsakade detta specifika fel. Även om jag fortfarande arbetar med andra problem, är det svaret på mitt specifika problem. Det var så att utdatafilen från vuetype var "App.vue.d.ts", så importen av './App.vue' tittade direkt på "App.vue"-filen och inte "App.vue.d.ts". Jag kan verifiera detta genom att ändra importen till './App.vue.d' och det plockar upp rätt fil. Så det väljer exakt filnamnmatchning över delvis filnamnmatchning, vilket är helt logiskt.

Som en sidoanmärkning, om jag vill fortsätta använda vuetype för att lösa mina problem, istället för att använda en annan cli som Sean föreslog, skulle jag behöva lista ut hur jag antingen skriver ut d-filerna någon annanstans eller refererar till dem på något annat sätt.

Det är ironiskt eftersom './App.vue.d.ts' inte löses på grund av dess filändelse (som är 'ts'), men './App.vue' löses på grund av dess filändelse.

Dessutom verkar det som att vuetype inte bara letar efter .vue-filer, det följer importerna på något sätt, därför om jag sätter importen till './App.vue.d', kommer det att försöka skapa en fil med namnet "App.vue.d.ts" för filen "App.vue.d.ts" och ger ett överskrivningsfel (förutom att det ser hemskt ut!).