Browserslist Error on Angular Build

Question

I have an Angular 4 app that recently started having issues on our build server. The Angular version is ^4.4.6 and the CLI version is 1.5.5. Up until this week, there were no issues building the application on the build server, and we did not change any package versions. This build error occurs while a Docker image is being built on the build server. The application also builds just fine on my local machine. Here's an output of the errors, along with related package versions:

The raw output is:

ERROR in ./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--8-3!./src/styles.scss
Module build failed: 
@include caret;
        ^
    No mixin named caret
    in /usr/src/app/node_modules/bootstrap/scss/_dropdown.scss (line 11, column 12)
ERROR in ./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/material-design-iconic-font/dist/css/material-design-iconic-font.min.css
Module build failed: BrowserslistError: Write any browsers query (for instance, `defaults`) before `not ie <= 11`
    at /usr/src/app/node_modules/browserslist/index.js:139:15
    at Array.reduce (<anonymous>)
    at resolve (/usr/src/app/node_modules/browserslist/index.js:132:18)
    at browserslist (/usr/src/app/node_modules/browserslist/index.js:224:16)
    at Browsers.parse (/usr/src/app/node_modules/autoprefixer/lib/browsers.js:61:16)
    at new Browsers (/usr/src/app/node_modules/autoprefixer/lib/browsers.js:52:30)
    at loadPrefixes (/usr/src/app/node_modules/autoprefixer/lib/autoprefixer.js:70:24)
    at plugin (/usr/src/app/node_modules/autoprefixer/lib/autoprefixer.js:81:24)
    at LazyResult.run (/usr/src/app/node_modules/postcss/lib/lazy-result.js:277:20)
    at LazyResult.asyncTick (/usr/src/app/node_modules/postcss/lib/lazy-result.js:192:32)
    at /usr/src/app/node_modules/postcss/lib/lazy-result.js:197:27
    at <anonymous>
ERROR in ./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/animate.css/animate.min.css
Module build failed: BrowserslistError: Write any browsers query (for instance, `defaults`) before `not ie <= 11`
    at /usr/src/app/node_modules/browserslist/index.js:139:15
    at Array.reduce (<anonymous>)
    at resolve (/usr/src/app/node_modules/browserslist/index.js:132:18)
    at browserslist (/usr/src/app/node_modules/browserslist/index.js:224:16)
    at Browsers.parse (/usr/src/app/node_modules/autoprefixer/lib/browsers.js:61:16)
    at new Browsers (/usr/src/app/node_modules/autoprefixer/lib/browsers.js:52:30)
    at loadPrefixes (/usr/src/app/node_modules/autoprefixer/lib/autoprefixer.js:70:24)
    at plugin (/usr/src/app/node_modules/autoprefixer/lib/autoprefixer.js:81:24)
    at LazyResult.run (/usr/src/app/node_modules/postcss/lib/lazy-result.js:277:20)
    at LazyResult.asyncTick (/usr/src/app/node_modules/postcss/lib/lazy-result.js:192:32)
    at LazyResult.asyncTick (/usr/src/app/node_modules/postcss/lib/lazy-result.js:204:22)
    at LazyResult.asyncTick (/usr/src/app/node_modules/postcss/lib/lazy-result.js:204:22)
    at LazyResult.asyncTick (/usr/src/app/node_modules/postcss/lib/lazy-result.js:204:22)
    at /usr/src/app/node_modules/postcss/lib/lazy-result.js:197:27
    at <anonymous>
ERROR in ./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/nouislider/distribute/nouislider.min.css
Module build failed: BrowserslistError: Write any browsers query (for instance, `defaults`) before `not ie <= 11`
    at /usr/src/app/node_modules/browserslist/index.js:139:15
    at Array.reduce (<anonymous>)
    at resolve (/usr/src/app/node_modules/browserslist/index.js:132:18)
    at browserslist (/usr/src/app/node_modules/browserslist/index.js:224:16)
    at Browsers.parse (/usr/src/app/node_modules/autoprefixer/lib/browsers.js:61:16)
    at new Browsers (/usr/src/app/node_modules/autoprefixer/lib/browsers.js:52:30)
    at loadPrefixes (/usr/src/app/node_modules/autoprefixer/lib/autoprefixer.js:70:24)
    at plugin (/usr/src/app/node_modules/autoprefixer/lib/autoprefixer.js:81:24)
    at LazyResult.run (/usr/src/app/node_modules/postcss/lib/lazy-result.js:277:20)
    at LazyResult.asyncTick (/usr/src/app/node_modules/postcss/lib/lazy-result.js:192:32)
    at LazyResult.asyncTick (/usr/src/app/node_modules/postcss/lib/lazy-result.js:204:22)
    at LazyResult.asyncTick (/usr/src/app/node_modules/postcss/lib/lazy-result.js:204:22)
    at LazyResult.asyncTick (/usr/src/app/node_modules/postcss/lib/lazy-result.js:204:22)
    at /usr/src/app/node_modules/postcss/lib/lazy-result.js:197:27
    at <anonymous>
ERROR in ./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/dropzone/dist/min/dropzone.min.css
Module build failed: BrowserslistError: Write any browsers query (for instance, `defaults`) before `not ie <= 11`
    at /usr/src/app/node_modules/browserslist/index.js:139:15
    at Array.reduce (<anonymous>)
    at resolve (/usr/src/app/node_modules/browserslist/index.js:132:18)
    at browserslist (/usr/src/app/node_modules/browserslist/index.js:224:16)
    at Browsers.parse (/usr/src/app/node_modules/autoprefixer/lib/browsers.js:61:16)
    at new Browsers (/usr/src/app/node_modules/autoprefixer/lib/browsers.js:52:30)
    at loadPrefixes (/usr/src/app/node_modules/autoprefixer/lib/autoprefixer.js:70:24)
    at plugin (/usr/src/app/node_modules/autoprefixer/lib/autoprefixer.js:81:24)
    at LazyResult.run (/usr/src/app/node_modules/postcss/lib/lazy-result.js:277:20)
    at LazyResult.asyncTick (/usr/src/app/node_modules/postcss/lib/lazy-result.js:192:32)
    at LazyResult.asyncTick (/usr/src/app/node_modules/postcss/lib/lazy-result.js:204:22)
    at LazyResult.asyncTick (/usr/src/app/node_modules/postcss/lib/lazy-result.js:204:22)
    at LazyResult.asyncTick (/usr/src/app/node_modules/postcss/lib/lazy-result.js:204:22)
    at /usr/src/app/node_modules/postcss/lib/lazy-result.js:197:27
    at <anonymous>

The frustrating thing is that locally I've checked the version of bootstrap and what's installed in the node_modules folder, for example, and the file that it references, _dropdown.scss isn't trying to use a mixin called caret at all.

Again, I'm not seeing these issues when building for any environment locally, only on the build server, inside a TeamCity container. I've tried changing the package.json to install specific versions of packages as well, but to no avail.

Is there a way to debug this and determine exactly what version of the packages are being installed and how to fix the errors?

Edit

I added up above the note that this error happens while I'm building a Docker image for this app. The Dockerfile is as follows:

FROM johnpapa/angular-cli as angular-build
WORKDIR /usr/src/app
COPY package.json package.json
RUN npm install --silent
# RUN npm install typescript@'>=2.1.0 <2.4.0'
COPY . .
RUN ng build --env=test

FROM nginx:alpine
LABEL author="Preston Lamb"
COPY nginx.conf /etc/nginx/nginx.conf
COPY --from=angular-build /usr/src/app/dist /usr/share/nginx/html
EXPOSE 80 443
ENTRYPOINT [ "nginx", "-g", "daemon off;" ]

Answer 1

Something you can try is to remove all of the carets from your package.json. If any of your deps had a minor version that broke you, fixing the versioning will get you past this minor revision issues. But, you will eventually need to go back and find out which dep caused the issue. It may take some time. I would suggest divide and conquer. Add half of the carets back in. If the error comes back, it was one of them. And keep going half and half until you find which one it was. If it was more than one, then your life will suck.

Best of luck! Cheers Preston!