Problems that occur when Nuxt upgrades 2.0.0 (summary)

Xida Puben, Nuxt has finally officially released 2.0. Recently, it has upgraded the blog from 1.4 to 2.0 while it is hot, and refactored it with Typescript. You can clickTake a look, there was a small problem during the Nuxt upgrade process

Announcements about release 2.0 can be viewed on the official websiteRelease NotesAnd the officialDemo, The upgrade process is very simple, and basically no migration cost is required. All npm commands are the same as before, you only need to upgrade some related packages.

The problem that occurred today is like this. With the upgrade of nuxt, webpack and vue-loader have also been upgraded to 4 and 15 respectively. After the upgrade, the following problem was reported.

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

Usually see thisextensionAll the questions subconsciously thought of webpackThere is no configuration .ts or .tsx extension, but it is not the case. If you look carefully at the first half, you will find that it is processing it..vueThis error was reported during the file, so it is easy to think that it should bevue-loaderThe problem is, in this vue-loaderissueDiscussed this issue

After checking patiently, you will find that the typeCheck of tslint-loader is actually causing the problem. If you enable this option, it will lead to the above error. The reason is that this option causes tslint to lint the entire vue file during construction, not just the ts part of the file. Therefore, the direct solution is to remove the typeCheck of tslint-loader

As for why the entire file is lint, after verification, it should be a problem when splitting the vue file in vue-loader15.

And what problems will occur if you turn off typeCheck? No one has found yet

Here, I can actually think further. Why did the tslint in vue-cli3 report error? I looked at the code in vue-cli's ts plugin cli-plugin-typescript

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

config
 .plugin('fork-ts-checker')
  .use(require('fork-ts-checker-webpack-plugin'), [{
   vue: true,
   tslint:  !== false && (('')),
   formatter: 'codeframe',
   // /TypeStrong/ts-loader#happypackmode-boolean-defaultfalse
   checkSyntacticErrors: useThreads
  }])

You can see that it is usedfork-ts-checker-webpack-pluginThis webpack plugin, you can check out its README

So the modules/final configuration is as follows

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

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

  (new ForkTsCheckerWebpackPlugin({
   vue: true,
   tslint: true,
   formatter: 'codeframe',
   // /TypeStrong/ts-loader#happypackmode-boolean-defaultfalse
   checkSyntacticErrors: .NODE_ENV === 'production'
  }))
 })
}

renew

When using it today, I found that when I changed the code to save, nuxt will reload again, and the following error will be reported.

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

Obviously, it was loaded twice during the reload process, so the modules/code is updated as follows

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

// Load this plugin when judginglet hasForkTsCheckerPlugin = false

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

  if (!hasForkTsCheckerPlugin) {
   // First time load   hasForkTsCheckerPlugin = true
   (new ForkTsCheckerWebpackPlugin({
    vue: true,
    tslint: true,
    formatter: 'codeframe',
    // /TypeStrong/ts-loader#happypackmode-boolean-defaultfalse
    checkSyntacticErrors: .NODE_ENV === 'production'
   }))
  }
 })
}

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.