Production build fails due to eslint `console.log()` errors, possible issue with NODE_ENV

[tmrd]

Hello!

I’m experiencing an odd issue. My build is failing because eslint is detecting console.log() statements.

Funny thing is, I’m using babel-plugin-transform-remove-console to suppress these in production, and my I can generate a production build on my local machine without issue.

In my babel.config.js:

const removeConsolePlugin = []
if (process.env.NODE_ENV === 'production') {
  removeConsolePlugin.push('transform-remove-console')
}

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: removeConsolePlugin
}

I’ve also tried using the uglifyjs-webpack-plugin, with the same end result: I can generate a production build on my local machine with all console.log() statements suppressed, but it fails in Netlify’s CD environment.

In theory, the command yarn build should automatically set NODE_ENV=production, so I can’t think why Netlify’s build environment should make a difference. Node/npm/yarn version perhaps?

12:46:39 PM: Build ready to start

12:46:41 PM: build-image version: 9cade8af58c2cf3a17a1e9433d2e979149488837

12:46:41 PM: build-image tag: v3.3.5

12:46:41 PM: buildbot version: 2fd8f04962d5dbc77b79b9c2f5ab7a077e87376b

12:46:41 PM: Fetching cached dependencies

12:46:41 PM: Starting to download cache of 143.5MB

12:46:42 PM: Finished downloading cache in 720.727279ms

12:46:42 PM: Starting to extract cache

12:46:47 PM: Finished extracting cache in 5.486130182s

12:46:47 PM: Finished fetching cache in 6.300013687s

12:46:47 PM: Starting to prepare the repo for build

12:46:48 PM: Preparing Git Reference refs/heads/live

12:46:49 PM: Starting build script

12:46:49 PM: Installing dependencies

12:46:49 PM: Started restoring cached node version

12:46:52 PM: Finished restoring cached node version

12:46:53 PM: v10.19.0 is already installed.

12:46:53 PM: Now using node v10.19.0 (npm v6.13.4)

12:46:54 PM: Attempting ruby version 2.6.2, read from environment

12:46:55 PM: Using ruby version 2.6.2

12:46:55 PM: Using PHP version 5.6

12:46:55 PM: Started restoring cached node modules

12:46:55 PM: Finished restoring cached node modules

12:46:55 PM: Started restoring cached yarn cache

12:46:55 PM: Finished restoring cached yarn cache

12:46:56 PM: Installing NPM modules using Yarn version 1.17.0

12:46:57 PM: yarn install v1.17.0

12:46:57 PM: [1/4] Resolving packages...

12:46:57 PM: [2/4] Fetching packages...

12:47:22 PM: info fsevents@1.2.11: The platform "linux" is incompatible with this module.

12:47:22 PM: info "fsevents@1.2.11" is an optional dependency and failed compatibility check. Excluding it from installation.

12:47:22 PM: [3/4] Linking dependencies...

12:47:22 PM: warning " > vue-apollo@3.0.3" has unmet peer dependency "apollo-link@^1.0.0".

12:47:22 PM: warning " > sass-loader@8.0.2" has unmet peer dependency "webpack@^4.36.0 || ^5.0.0".

12:47:33 PM: [4/4] Building fresh packages...

12:47:53 PM: Done in 56.85s.

12:47:53 PM: NPM modules installed using Yarn

12:47:54 PM: Started restoring cached go cache

12:47:54 PM: Finished restoring cached go cache

12:47:54 PM: unset GOOS;

12:47:54 PM: unset GOARCH;

12:47:54 PM: export GOROOT='/opt/buildhome/.gimme/versions/go1.12.linux.amd64';

12:47:54 PM: export PATH="/opt/buildhome/.gimme/versions/go1.12.linux.amd64/bin:${PATH}";

12:47:54 PM: go version >&2;

12:47:54 PM: export GIMME_ENV='/opt/buildhome/.gimme/env/go1.12.linux.amd64.env';

12:47:54 PM: go version go1.12 linux/amd64

12:47:54 PM: Installing missing commands

12:47:54 PM: Verify run directory

12:47:54 PM: Executing user command: yarn build

12:47:55 PM: yarn run v1.17.0

12:47:55 PM: $ vue-cli-service build

12:47:56 PM: - Building for production...

12:48:25 PM: ERROR Failed to compile with 6 errors12:48:25 PM

12:48:25 PM: error in ./src/views/Login.vue

12:48:25 PM: Module Error (from ./node_modules/eslint-loader/index.js):

12:48:25 PM: error: Unexpected console statement (no-console) at......

…clipped

12:48:25 PM: ERROR Build failed with errors.

12:48:25 PM: error Command failed with exit code 1.

12:48:25 PM: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

12:48:25 PM: Skipping functions preparation step: no functions directory set

12:48:25 PM: Caching artifacts

12:48:25 PM: Started saving node modules

12:48:25 PM: Finished saving node modules

12:48:25 PM: Started saving yarn cache

12:48:25 PM: Finished saving yarn cache

12:48:25 PM: Started saving pip cache

12:48:30 PM: Finished saving pip cache

12:48:30 PM: Started saving emacs cask dependencies

12:48:30 PM: Finished saving emacs cask dependencies

12:48:30 PM: Started saving maven dependencies

12:48:30 PM: Finished saving maven dependencies

12:48:30 PM: Started saving boot dependencies

12:48:30 PM: Finished saving boot dependencies

12:48:30 PM: Started saving go dependencies

12:48:30 PM: Finished saving go dependencies

12:48:30 PM: Error running command: Build script returned non-zero exit code: 1

12:48:30 PM: Failing build: Failed to build site

12:48:30 PM: failed during stage 'building site': Build script returned non-zero exit code: 1

12:48:30 PM: Finished processing build request in 1m49.340003562s

Rather confused! Help greatly appreciated.

[Dennis]

Based on the Vuejs docs, the build command’s NODE_ENV would depend on the mode you are running in. That said, you can try explicitly setting the variable in your site’s dashboard, as mentioned here. Let me know if that works.

[tmrd]

Hi Dennis, thanks for your help.

I’ve tried setting the environment variable explicitly, however the build also fails under that condition.

Because dev dependencies aren’t installed when NODE_ENV is set via the Netlify dashboard, it means that the vue-cli-service is missing, so yarn build doesn’t work.

[jen]

Hey there. I think next steps at this point would be to take a look at this build debugging article:

[Support Guide] Debugging Netlify site builds

Last reviewed by Netlify Support - August, 2023 Note: This article is only about builds within Netlify’s Continuous Integration (CI) environment, as triggered from git commits or from incoming build webhooks. You can learn more in depth about how Netlify builds your site in this article about how our build bots build sites. Some background There are a fair number of reasons that a build could fail in Netlify’s CI environment, even if building works locally. Testing locally is always the place …

It includes some troubleshooting ideas, including pulling our Docker image and looking at build errors that occur when you run your code in that build environment (those errors don’t make it through the build log in the Netify UI). If that still doesn’t help, there are three things we ask for at the end of that article- send them over and we’ll take another look

[tmrd]

Thanks jen, pulling the Docker image is a great idea, I’ll work through these articles and report back.

[Dennis]

Another thing to test is to move vue-cli-service to the dependencies object instead of devDependencies so that it continues to be available even when NODE_ENV is set to production.

[ross.coundon]

I remember having this issue a while ago and ultimately gave up trying to fix it. I think I ended up turning off the eslint no-console rule. So following in case you find a solution

[tmrd]

That’s interesting Ross, I have a suspicion I’ll be doing the same in the end. I’ll be working on this part of the project again next week, hopefully I’ll have some further insight soon.

[jen]

Hmmm… one more idea to try: rereading your earlier posts, I wonder if it would make sense to try listing some of your dev dependencies under production dependencies instead so that they all get installed and are available for your build steps, and then try both deploying from there (where we assume that yarn build sets NODE_ENV to prod) and if that doesn’t work, then explicitly setting the NODE_ENV var to production as you described trying above. It seems like you maybe don’t have access to things you need during build.

Also, just to do a sanity check, your uglify and transform-remove-console plugins aren’t installed globally on your local machine, are they?

Looking forward to hearing how it goes!

[divya]

Hey @tmrd,

I’ve had similar issues with the netlify build bot yelling about unexpected console logs (and debuggers!) as well. However, this generally shouldn’t cause the build to fail, so I’m as puzzled by this error as you are. One thing to check as @jen and @Dennis mentioned is to move your babel-eslint and babel-plugin-transform-remove-console packages to dependencies rather than devDependencies so they are installed when the build runs.

I’ve tried to copy your test config in a vue project of mine and it seems to successfully build and suppress all console.logs, though it does yell at me for unexpected console.logs. Here’s a reference to that project if it’s of any help: GitHub - shortdiv/vue-three

Hope that helps!