Build initially fails when using both babel and eslint but pass on second attempt

[gdmoore]

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.

[javimendezona]

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

[OddDev]

We also just reproduced that.
It's reproducible with several different combinations of selected features (yarn/npm, ts/js etc.pp.).

(MacOS 10.14.6 (18G3020))

[activenode]

This actually breaks our current build setup.

[OddDev]

It also happens when you do not choose Babel.

[OddDev]

Steps to reproduce:

1. Clone https://github.com/OddDev/vue-fails-on-second-attempt
2. cd into root
3. Execute yarn build (or npm run build or whatever)
4. Mention that it fails (correctly)
5. Execute yarn build (or npm run build or whatever) again
6. Mention that it runs through (but should fail again obviously)

[activenode]

Another gained insight:

1. Run yarn build with eslint failures
2. build fails ✅
3. Run yarn build again
4. build succeeds ❌
5. Delete node_modules/.cache
6. Run yarn build
7. build fails ✅

So it seems to be a caching issue

[activenode]

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

[javimendezona]

While there might be a workaround for local building, I haven't figured out a way to make it work with CI/CD workflows. This issue is blocking my ability to use Netlify's automated build and deploy feature from git merges. Just wanted to share that as I think it makes the case for prioritizing this issue (unless someone has a workaround)

[activenode]

Couldn't you integrate this workaround in your CI/CD environment?
How is your CI setup given? Can you give details? So I might be able to help you here

[activenode]

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]

Now more info on that:

Both vue-loader and ts-loader cache trigger the problem but in different ways. When you are using ts-loader (so you have TypeScript in your project) then once the ts-loader .cache entry is there it will "forget" to lint the ts files.

Analogously this applies for vue-loader and its .vue files and its scripts within those vue files.

Summed up:
If you dont use typescript you need to delete the .cache/vue-loader but if you use TypeScript you need to delete both .cache/vue-loader and .cache/ts-loader

[gdmoore]

Now more info on that:

Both vue-loader and ts-loader cache trigger the problem but in different ways. When you are using ts-loader (so you have TypeScript in your project) then once the ts-loader .cache entry is there it will "forget" to lint the ts files.

Analogously this applies for vue-loader and its .vue files and its scripts within those vue files.

Summed up:
If you dont use typescript you need to delete the .cache/vue-loader but if you use TypeScript you need to delete both .cache/vue-loader and .cache/ts-loader

This is not the same issue as I describe in the issue summary. I am not using typescript, and I do not have a vue-loader folder in .cache.

It's possible that the issues are related but this is not a workaround for the issue I reported.

[gdmoore]

My issue is actually the opposite with respect to the .cache folder.

With the vue-cli-babel-err repo in the issue summary, if I delete the cache before building, my build will always fail with Unexpected console statement. The cache must exist, or else I cannot successfully build.

It seems likely that depending on your loader usage and linting levels, the build results may actually be different on the first build versus every subsequent build.

[activenode]

@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');
  }
};

[gdmoore]

@activenode see the repository in the issue summary. main.js is a single line, which is console.log(...).

I believe you did not see that I have Babel configured with transform-remove-console so that line should always be removed. The expected result is that the build should succeed every time.

Also if you do build my repository, notice that when it builds successfully, the console.log statement is not present in the built app.[hash].hs. This means on a rebuild, Babel runs correctly and the build output is correct.

I suspect that the issue I reported and the issue you are experiencing are strongly related, but not identical.