I’m glad Nuxt has finally released 2.0. I recently upgraded my blog from 1.4 to 2.0 and rewrote it in Typescript. Check out jooger. me

Release 2.0 announcements can be found on the release Notes website and the official Demo. The upgrade process is very simple, and there is no migration cost. All NPM commands are the same as before

The problem today is as follows. With the upgrade of NUxt, Webpack and Vue-Loader were also upgraded to 4 and 15 respectively. After the upgrade, the following problems were reported

Invalid source file: ***.vue. Ensure that the files supplied to lint have a .ts, .tsx, .d.ts, .js or .jsx extension.
Copy the code

The resolve. Extensions in webpack do not have a. Ts or. TSX extension. Therefore, it is easy to think that vue-loader should be the problem, which is discussed in this issue of Vue-Loader

The tsLint-loader typeCheck will cause tsLint to lint the entire vue file at build time, not just the TS part of the file. So the immediate solution is to remove the typeCheck from the tsLint-loader

[bug Mc-10862] – Lint full file split error: vue-loader15

And what’s wrong with turning typeCheck off

Here can actually think about further, why vue – cli3 tslint have no error, saw the vue – cli ts plug-in cli – plugin – the code in the typescript

addLoader({
  loader: 'ts-loader'.options: {
    transpileOnly: true.appendTsSuffixTo: ['\\.vue$'].// https://github.com/TypeStrong/ts-loader#happypackmode-boolean-defaultfalse
    happyPackMode: useThreads
  }
})
// make sure to append TSX suffix
tsxRule.use('ts-loader').loader('ts-loader').tap(options= > {
  options = Object.assign({}, options)
  delete options.appendTsSuffixTo
  options.appendTsxSuffixTo = ['\\.vue$']
  return options
})

config
  .plugin('fork-ts-checker')
    .use(require('fork-ts-checker-webpack-plugin'), [{
      vue: true.tslint: options.lintOnSave ! = =false && fs.existsSync(api.resolve('tslint.json')),
      formatter: 'codeframe'.// https://github.com/TypeStrong/ts-loader#happypackmode-boolean-defaultfalse
      checkSyntacticErrors: useThreads
    }])
Copy the code

Fork-ts-checker-webpack-plugin is a plugin for the webpack plugin fork-ts-checker-webpack-plugin is a plugin for the webpack plugin

So the final configuration of modules/typescript.js is as follows

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')

module.exports = function () {
  // Add .ts extension for store, middleware and more
  this.nuxt.options.extensions.push("ts")
  // Extend build
  this.extendBuild(config= > {
    const tsLoader = {
      loader: 'ts-loader'.options: {
        transpileOnly: true.appendTsSuffixTo: [/\.vue$/]}}// Add TypeScript loader
    config.module.rules.push(
      Object.assign({
          test: /((client|server)\.js)|(\.tsx?) $/
        },
        tsLoader
      )
    )
    // Add .ts extension in webpack resolve
    if (config.resolve.extensions.indexOf(".ts") = = =- 1) {
      config.resolve.extensions.push(".ts");
    }

    config.plugins.push(new ForkTsCheckerWebpackPlugin({
      vue: true.tslint: true.formatter: 'codeframe'.// https://github.com/TypeStrong/ts-loader#happypackmode-boolean-defaultfalse
      checkSyntacticErrors: process.env.NODE_ENV === 'production'}}})))Copy the code

update

Nuxt will be hot reload when the code save is changed

Error: fork-ts-checker-webpack-plugin hooks are already in use
Copy the code

Obviously, the reload process is loaded twice, so the modules/typescript.js code is updated as follows

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')

// The plugin has been loaded
let hasForkTsCheckerPlugin = false

module.exports = function () {
  // Add .ts extension for store, middleware and more
  this.nuxt.options.extensions.push("ts")
  // Extend build
  this.extendBuild(config= > {
    const tsLoader = {
      loader: 'ts-loader'.options: {
        transpileOnly: true.appendTsSuffixTo: [/\.vue$/]}}// Add TypeScript loader
    config.module.rules.push(
      Object.assign({
          test: /((client|server)\.js)|(\.tsx?) $/
        },
        tsLoader
      )
    )
    // Add .ts extension in webpack resolve
    if (config.resolve.extensions.indexOf(".ts") = = =- 1) {
      config.resolve.extensions.push(".ts");
    }

    if(! hasForkTsCheckerPlugin) {// First load
      hasForkTsCheckerPlugin = true
      config.plugins.push(new ForkTsCheckerWebpackPlugin({
        vue: true.tslint: true.formatter: 'codeframe'.// https://github.com/TypeStrong/ts-loader#happypackmode-boolean-defaultfalse
        checkSyntacticErrors: process.env.NODE_ENV === 'production'}}}})))Copy the code