"Failed to compile with 0 errors" after adding a webpack loader.

[Olian04]

Version

4.2.3

Reproduction link

https://github.com/Olian04/vuecli-bug-reproduced-1

Environment info

Environment Info:

  System:
    OS: Linux 4.15 Ubuntu 18.04.4 LTS (Bionic Beaver)
    CPU: (4) x64 Intel(R) Core(TM) i7-5500U CPU @ 2.40GHz
  Binaries:
    Node: 10.19.0 - /usr/bin/node
    Yarn: 1.6.0 - /usr/bin/yarn
    npm: 6.14.1 - /usr/bin/npm
  Browsers:
    Chrome: 80.0.3987.132
    Firefox: 74.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.1.2 
    @vue/babel-preset-app:  4.2.3 
    @vue/babel-preset-jsx:  1.1.2 
    @vue/babel-sugar-functional-vue:  1.1.2 
    @vue/babel-sugar-inject-h:  1.1.2 
    @vue/babel-sugar-v-model:  1.1.2 
    @vue/babel-sugar-v-on:  1.1.2 
    @vue/cli-overlay:  4.2.3 
    @vue/cli-plugin-babel: ~4.2.0 => 4.2.3 
    @vue/cli-plugin-eslint: ~4.2.0 => 4.2.3 
    @vue/cli-plugin-router: ~4.2.0 => 4.2.3 
    @vue/cli-plugin-typescript: ~4.2.0 => 4.2.3 
    @vue/cli-plugin-unit-mocha: ~4.2.0 => 4.2.3 
    @vue/cli-plugin-vuex: ~4.2.0 => 4.2.3 
    @vue/cli-service: ~4.2.0 => 4.2.3 
    @vue/cli-shared-utils:  4.2.3 
    @vue/component-compiler-utils:  3.1.1 
    @vue/eslint-config-standard: ^5.1.0 => 5.1.2 
    @vue/eslint-config-typescript: ^5.0.1 => 5.0.2 
    @vue/preload-webpack-plugin:  1.1.1 
    @vue/test-utils: 1.0.0-beta.31 => 1.0.0-beta.31 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^6.1.2 => 6.2.2 
    typescript: ~3.7.5 => 3.7.5 
    vue: ^2.6.11 => 2.6.11 
    vue-class-component: ^7.2.2 => 7.2.3 
    vue-eslint-parser:  7.0.0 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  15.9.0 
    vue-property-decorator: ^8.3.0 => 8.4.0 
    vue-router: ^3.1.5 => 3.1.6 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.11 => 2.6.11 
    vue-template-es2015-compiler:  1.9.1 
    vuex: ^3.1.2 => 3.1.3 
  npmGlobalPackages:
    @vue/cli: 4.2.3

Steps to reproduce

Steps to reproduce in the provided repository:

1. npm i
2. npm run serve

Steps to reproduce in a clean repository:

1. vue create someName and pick the default configuration
2. npm install -D comlink-loader
3. Create file workers/greeting.worker.ts

export async function greet(subject: string): string {
  return `Hello, ${subject}!`;
}

4. Add to file main.ts

import { greet } from './workers/greeting.worker'
greet('dog')

5. Create file vue.config.js

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('comlink')
      .test(/\.worker\.ts$/i)
      .use('comlink-loader')
      .loader('comlink-loader')
      .tap(options => {
        return {
          singleton: true
        }
      })
      .end()
  }
}

6. npm run serve

What is expected?

It should build just fine.

What is actually happening?

 ERROR  Failed to compile with 0 errors

Type checking in progress...
No type errors found
Version: typescript 3.7.5
Time: 4998ms

[lovetingyuan]

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('comlink worker')
      .test(/\.worker\.ts$/i)
      .use('comlink')
      .loader('comlink-loader')
      .options({
        singleton: true
      })
      .end()
      .use('ts')
      .loader('ts-loader')
      .options({
        compilerOptions: {
          target: 'ES5'
        }
      })
      .end()
    config.module
      .rule('ts')
      .exclude.add(/\.worker\.ts$/i)
  }
}

You should first use ts-loader to process your worker code, then use comlink-loader.
By the way, you could use vue inspect to investigate the webpack configuration.

[rslifka]

Similar situation here! However, development builds and runs fine; production won't build.

EDITED: I decided to create a new ticket since we're using different loader plugins; #5283

[epetousis]

I spent a hot minute trying to debug this issue, and after disabling friendly-errors-webpack-plugin I found that I had some linting errors (as a result of the strict vue-cli config) that weren't coming through, which I confirmed with npx vue-cli-service lint --no-fix.

I also had an issue with VS Code not linting my worker, which i fixed by adding "eslint.validate": [ "javascript", "html", "typescript" ], to .vscode/settings.json.

This allowed me to build for prod, but the bug still remains: linting errors don't seem to always appear in friendly-errors-webpack-plugin. Possibly only an issue with non-Vue files?