vue-cli: Build initially fails when using both babel and eslint but pass on second attempt

Version

4.3.1

Reproduction link

https://github.com/gdmoore/vue-cli-babel-err

Environment info

  System:
    OS: Windows 10 10.0.18363
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 12.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.18362.449.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.3.1
    @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.3.1
    @vue/cli-plugin-babel: ~4.3.1 => 4.3.1
    @vue/cli-plugin-eslint: ~4.3.1 => 4.3.1
    @vue/cli-plugin-router: ~4.3.1 => 4.3.1
    @vue/cli-plugin-vuex: ~4.3.1 => 4.3.1
    @vue/cli-service: ~4.3.1 => 4.3.1
    @vue/cli-shared-utils:  4.3.1
    @vue/component-compiler-utils:  3.1.2
    @vue/eslint-config-prettier: ^6.0.0 => 6.0.0
    @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.2.2 => 6.2.2
    vue: ^2.6.11 => 2.6.11
    vue-eslint-parser:  7.0.0
    vue-hot-reload-api:  2.3.4
    vue-loader:  15.9.1
    vue-router: ^3.1.6 => 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.3 => 3.1.3
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

npm install
npm run build
<error "Unexpected console statement  no-console">
npm run build
<success>

What is expected?

Eslint configured for no-console but babel configured with transform-remove-console, so the console statement should not cause a build error.

Build results should be consistent on every build.

What is actually happening?

Build fails on first attempt, succeeds on the second, with no code changes.

Any changes to main.js (even trivial ones such as adding or removing comments) will cause the build to break and require two builds again for success.

This is a minified case from my actual project, which was generated using vue create and choosing Babel and ESLint.

I suspect this is a bug with caching or in determining the order to run eslint and babel.

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 17
Comments: 24

Commits related to this issue

feat: replace eslint-loader by eslint-webpack-plugin (#6094) closes #5926, using eslint-webpack-plugin can fix the problem of eslint-loader caused by cache-loader closes #3065 closes #5399 clo... — committed to Necmttn/vue-cli by fangbinwei 4 years ago

Most upvoted comments

I’m having the same issue. Sharing a thread from the vue forum where others are reporting the same: https://forum.vuejs.org/t/remove-console-not-always-applied/87810/2

javimendezona on Apr 28, 2020

Apparently a workaround until Vue team fixes it is making the cache directory unwriteable:

rm -rf node_modules/.cache
mkdir node_modules/.cache
chmod -w node_modules/.cache

activenode on May 7, 2020

@gdmoore As you can see above a bare repo was created with the minimal set given through vue create ... so we figured it actually appears with nearly ANY setup you do with vue currently as long as you have linting.

The expected result is: [The build MUST fail because console.log are set to error mode]. That is what is important to understand @gdmoore. But the 2nd time it runs it does NOT FAIL even though it SHOULD! So Vue is giving a false positive which is dangerous.

Here is a new and cleaner-to-apply workaround:

// vue.config.js

module.exports = {
  chainWebpack: config => {
    config.module.rule('vue').uses.delete('cache-loader');
    config.module.rule('js').uses.delete('cache-loader');
    config.module.rule('ts').uses.delete('cache-loader');
    config.module.rule('tsx').uses.delete('cache-loader');
  }
};

activenode on May 8, 2020

Good to know I’m not the only one, still having this issue. I asked it (quite elaborately, with different attempts) on stackoverflow: https://stackoverflow.com/questions/62497239/cant-remove-console-statements-with-babel-nor-terser-in-vue-cli-3-4-but-se And didn’t get a real answer. For now, I went with answer:

adding lintOnSave: process.env.NODE_ENV === 'development' in vue.config.js.

But it feels tricky, as I don’t have any linting on the production build…

gerbenoostra on Nov 16, 2020

Same thing happens to me with a new project… quite unfortunate for Vue, tbh. I didn’t want to mess with project settings to work around a platform bug, as I’m 100% sure those will stay there forever after the bug is solved. My solution is to just build twice, by ignoring the first try. Sharing my solution for Bitbucket:
- step:
    name: Build
    script:
      - npm install
      - npm run build || true # Ignoring the output of this step because the first build fails https://github.com/vuejs/vue-cli/issues/5399
      - npm run build
    artifacts:
      - dist/**

Wait, that produces false positives. The should-fail-build fails correctly in the first build (which is correct) but does not for any additional builds.

OddDev on Nov 3, 2020

I was digging a bit deeper and it most probably comes from either vue-loader or ts-loader or both since when I delete either of those the errors come back as accepted (i need to remove both from .cache to have a proper result).

I also tested around with @vue/cli-plugin-eslint/index.js but the eslint-plugin does not seem to be the evil box here.

activenode on May 8, 2020

Another gained insight:

Run yarn build with eslint failures
build fails ✅
Run yarn build again
build succeeds ❌
Delete node_modules/.cache
Run yarn build
build fails ✅

So it seems to be a caching issue

activenode on May 7, 2020