Netlify Deployment not working with PostCSS plugin @tailwindcss/custom-forms

Support
1

I have a site with VueJS and TailwindCSS that I am building. The beginning of last week my deployment was running fine. The only thing different is that I added a new Post CSS plugin called @tailwindcss/custom-forms; I followed the install instructions found at the link.

This morning I tried to build/deploy my site, and I start getting the below error:

Summary 
7:51:25 AM: Build ready to start
7:51:27 AM: build-image version: 9e0f207a27642d0115b1ca97cd5e8cebbe492f63
7:51:27 AM: build-image tag: v3.3.2
7:51:27 AM: buildbot version: 89a70647dd4caa4f3273ade0957c10d63327cb10
7:51:27 AM: Fetching cached dependencies
7:51:27 AM: Starting to download cache of 122.1MB
7:51:29 AM: Finished downloading cache in 1.403381954s
7:51:29 AM: Starting to extract cache
7:51:34 AM: Finished extracting cache in 5.79353842s
7:51:34 AM: Finished fetching cache in 7.297798026s
7:51:34 AM: Starting to prepare the repo for build
7:51:35 AM: Preparing Git Reference refs/heads/master
7:51:37 AM: Starting build script
7:51:37 AM: Installing dependencies
7:51:38 AM: Started restoring cached node version
7:51:40 AM: Finished restoring cached node version
7:51:41 AM: v10.16.3 is already installed.
7:51:42 AM: Now using node v10.16.3 (npm v6.9.0)
7:51:43 AM: Attempting ruby version 2.6.2, read from environment
7:51:44 AM: Using ruby version 2.6.2
7:51:44 AM: Using PHP version 5.6
7:51:44 AM: Started restoring cached node modules
7:51:44 AM: Finished restoring cached node modules
7:51:45 AM: Installing NPM modules using NPM version 6.9.0
7:52:00 AM: added 1 package from 1 contributor and audited 44836 packages in 14.074s
7:52:00 AM: found 65 vulnerabilities (64 low, 1 critical)
7:52:00 AM:   run `npm audit fix` to fix them, or `npm audit` for details
7:52:00 AM: NPM modules installed
7:52:01 AM: Started restoring cached go cache
7:52:01 AM: Finished restoring cached go cache
7:52:01 AM: unset GOOS;
7:52:01 AM: unset GOARCH;
7:52:01 AM: export GOROOT='/opt/buildhome/.gimme/versions/go1.12.linux.amd64';
7:52:01 AM: export PATH="/opt/buildhome/.gimme/versions/go1.12.linux.amd64/bin:${PATH}";
7:52:01 AM: go version >&2;
7:52:01 AM: export GIMME_ENV='/opt/buildhome/.gimme/env/go1.12.linux.amd64.env';
7:52:01 AM: go version go1.12 linux/amd64
7:52:01 AM: Installing missing commands
7:52:01 AM: Verify run directory
7:52:01 AM: Executing user command: npm run build
7:52:01 AM: > goals@0.1.0 build /opt/build/repo
7:52:01 AM: > vue-cli-service build
7:52:02 AM: -  Building for production...
7:52:21 AM:  ERROR  Failed to compile with 6 errors1:52:21 PM
7:52:21 AM:  error  in ./src/main.css
7:52:21 AM: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
7:52:21 AM: ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
7:52:21 AM: Error: Cannot find module '@tailwindcss/custom-forms'
7:52:21 AM:     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
7:52:21 AM:     at Function.Module._load (internal/modules/cjs/loader.js:562:25)
7:52:21 AM:     at Module.require (internal/modules/cjs/loader.js:692:17)
7:52:21 AM:     at require (internal/modules/cjs/helpers.js:25:18)
7:52:21 AM:     at Object.<anonymous> (/opt/build/repo/tailwind.config.js:72:9)
7:52:21 AM:     at Module._compile (internal/modules/cjs/loader.js:778:30)
7:52:21 AM:     at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
7:52:21 AM:     at Module.load (internal/modules/cjs/loader.js:653:32)
7:52:21 AM:     at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
7:52:21 AM:     at Function.Module._load (internal/modules/cjs/loader.js:585:3)
7:52:21 AM:     at Module.require (internal/modules/cjs/loader.js:692:17)
7:52:21 AM:     at require (internal/modules/cjs/helpers.js:25:18)
7:52:21 AM:     at /opt/build/repo/node_modules/tailwindcss/lib/index.js:54:83
7:52:21 AM:     at /opt/build/repo/node_modules/tailwindcss/lib/processTailwindFeatures.js:32:20
7:52:21 AM:     at LazyResult.run (/opt/build/repo/node_modules/postcss/lib/lazy-result.js:295:14)
7:52:21 AM:     at LazyResult.asyncTick (/opt/build/repo/node_modules/postcss/lib/lazy-result.js:208:26)
7:52:21 AM:     at runLoaders (/opt/build/repo/node_modules/webpack/lib/NormalModule.js:301:20)
7:52:21 AM: failed during stage 'building site': Build script returned non-zero exit code: 1
7:52:21 AM:     at /opt/build/repo/node_modules/loader-runner/lib/LoaderRunner.js:367:11
7:52:21 AM:     at /opt/build/repo/node_modules/loader-runner/lib/LoaderRunner.js:233:18
7:52:21 AM:     at context.callback (/opt/build/repo/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
7:52:21 AM:     at Promise.resolve.then.then.catch (/opt/build/repo/node_modules/postcss-loader/src/index.js:208:9)
7:52:21 AM:  @ ./src/main.js 7:0-20
7:52:21 AM:  @ multi ./src/main.js
7:52:21 AM:  error  in ./src/components/Calculator.vue?vue&type=style&index=0&id=11b8fed4&scoped=true&lang=scss&
7:52:21 AM: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
7:52:21 AM: ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
7:52:21 AM: Error: Cannot find module '@tailwindcss/custom-forms'
7:52:21 AM:     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
7:52:21 AM:     at Function.Module._load (internal/modules/cjs/loader.js:562:25)
7:52:21 AM:     at Module.require (internal/modules/cjs/loader.js:692:17)
7:52:21 AM:     at require (internal/modules/cjs/helpers.js:25:18)
7:52:21 AM:     at Object.<anonymous> (/opt/build/repo/tailwind.config.js:72:9)
7:52:21 AM:     at Module._compile (internal/modules/cjs/loader.js:778:30)
7:52:21 AM:     at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
7:52:21 AM:     at Module.load (internal/modules/cjs/loader.js:653:32)
7:52:21 AM:     at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
7:52:21 AM:     at Function.Module._load (internal/modules/cjs/loader.js:585:3)
7:52:21 AM:     at Module.require (internal/modules/cjs/loader.js:692:17)
7:52:21 AM:     at require (internal/modules/cjs/helpers.js:25:18)
7:52:21 AM:     at /opt/build/repo/node_modules/tailwindcss/lib/index.js:54:83
7:52:21 AM:     at /opt/build/repo/node_modules/tailwindcss/lib/processTailwindFeatures.js:32:20
7:52:21 AM:     at LazyResult.run (/opt/build/repo/node_modules/postcss/lib/lazy-result.js:295:14)
7:52:21 AM:     at LazyResult.asyncTick (/opt/build/repo/node_modules/postcss/lib/lazy-result.js:208:26)
7:52:21 AM:     at runLoaders (/opt/build/repo/node_modules/webpack/lib/NormalModule.js:301:20)
7:52:21 AM:     at /opt/build/repo/node_modules/loader-runner/lib/LoaderRunner.js:367:11
7:52:21 AM:     at /opt/build/repo/node_modules/loader-runner/lib/LoaderRunner.js:233:18
7:52:21 AM:     at context.callback (/opt/build/repo/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
7:52:21 AM:     at Promise.resolve.then.then.catch (/opt/build/repo/node_modules/postcss-loader/src/index.js:208:9)
7:52:21 AM:  @ ./src/components/Calculator.vue?vue&type=style&index=0&id=11b8fed4&scoped=true&lang=scss& 1:0-534 1:550-553 1:555-1086 1:555-1086
7:52:21 AM:  @ ./src/components/Calculator.vue
7:52:21 AM:  @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&
7:52:21 AM:  @ ./src/App.vue?vue&type=script&lang=js&
7:52:21 AM:  @ ./src/App.vue
7:52:21 AM:  @ ./src/main.js
7:52:21 AM:  @ multi ./src/main.js
7:52:21 AM:  error  in ./src/components/CalculationResult.vue?vue&type=style&index=0&id=4c2cd4d4&scoped=true&lang=scss&
7:52:21 AM: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
7:52:21 AM: ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
7:52:21 AM: Error: Cannot find module '@tailwindcss/custom-forms'
7:52:21 AM:     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
7:52:21 AM:     at Function.Module._load (internal/modules/cjs/loader.js:562:25)
7:52:21 AM:     at Module.require (internal/modules/cjs/loader.js:692:17)
7:52:21 AM:     at require (internal/modules/cjs/helpers.js:25:18)
7:52:21 AM:     at Object.<anonymous> (/opt/build/repo/tailwind.config.js:72:9)
7:52:21 AM:     at Module._compile (internal/modules/cjs/loader.js:778:30)
7:52:21 AM:     at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
7:52:21 AM:     at Module.load (internal/modules/cjs/loader.js:653:32)
7:52:21 AM:     at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
7:52:21 AM:     at Function.Module._load (internal/modules/cjs/loader.js:585:3)
7:52:21 AM:     at Module.require (internal/modules/cjs/loader.js:692:17)
7:52:21 AM:     at require (internal/modules/cjs/helpers.js:25:18)
7:52:21 AM:     at /opt/build/repo/node_modules/tailwindcss/lib/index.js:54:83
7:52:21 AM:     at /opt/build/repo/node_modules/tailwindcss/lib/processTailwindFeatures.js:32:20
7:52:21 AM:     at LazyResult.run (/opt/build/repo/node_modules/postcss/lib/lazy-result.js:295:14)
7:52:21 AM:     at LazyResult.asyncTick (/opt/build/repo/node_modules/postcss/lib/lazy-result.js:208:26)
7:52:21 AM:     at runLoaders (/opt/build/repo/node_modules/webpack/lib/NormalModule.js:301:20)
7:52:21 AM:     at /opt/build/repo/node_modules/loader-runner/lib/LoaderRunner.js:367:11
7:52:21 AM:     at /opt/build/repo/node_modules/loader-runner/lib/LoaderRunner.js:233:18
7:52:21 AM:     at context.callback (/opt/build/repo/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
7:52:21 AM:     at Promise.resolve.then.then.catch (/opt/build/repo/node_modules/postcss-loader/src/index.js:208:9)
7:52:21 AM:  @ ./src/components/CalculationResult.vue?vue&type=style&index=0&id=4c2cd4d4&scoped=true&lang=scss& 1:0-541 1:557-560 1:562-1100 1:562-1100
7:52:21 AM:  @ ./src/components/CalculationResult.vue
7:52:21 AM:  @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Calculator.vue?vue&type=script&lang=js&
7:52:21 AM:  @ ./src/components/Calculator.vue?vue&type=script&lang=js&
7:52:21 AM:  @ ./src/components/Calculator.vue
7:52:21 AM:  @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&
7:52:21 AM:  @ ./src/App.vue?vue&type=script&lang=js&
7:52:21 AM:  @ ./src/App.vue
7:52:21 AM:  @ ./src/main.js
7:52:21 AM:  @ multi ./src/main.js
7:52:21 AM:  error  in ./src/components/AddCalculation.vue?vue&type=style&index=0&id=347271c2&scoped=true&lang=scss&
7:52:21 AM: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
7:52:21 AM: ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
7:52:21 AM: Error: Cannot find module '@tailwindcss/custom-forms'
7:52:21 AM:     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
7:52:21 AM:     at Function.Module._load (internal/modules/cjs/loader.js:562:25)
7:52:21 AM:     at Module.require (internal/modules/cjs/loader.js:692:17)
7:52:21 AM:     at require (internal/modules/cjs/helpers.js:25:18)
7:52:21 AM:     at Object.<anonymous> (/opt/build/repo/tailwind.config.js:72:9)
7:52:21 AM:     at Module._compile (internal/modules/cjs/loader.js:778:30)
7:52:21 AM:     at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
7:52:21 AM:     at Module.load (internal/modules/cjs/loader.js:653:32)
7:52:21 AM:     at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
7:52:21 AM:     at Function.Module._load (internal/modules/cjs/loader.js:585:3)
7:52:21 AM:     at Module.require (internal/modules/cjs/loader.js:692:17)
7:52:21 AM:     at require (internal/modules/cjs/helpers.js:25:18)
7:52:21 AM:     at /opt/build/repo/node_modules/tailwindcss/lib/index.js:54:83
7:52:21 AM:     at /opt/build/repo/node_modules/tailwindcss/lib/processTailwindFeatures.js:32:20
7:52:21 AM:     at LazyResult.run (/opt/build/repo/node_modules/postcss/lib/lazy-result.js:295:14)
7:52:21 AM:     at LazyResult.asyncTick (/opt/build/repo/node_modules/postcss/lib/lazy-result.js:208:26)
7:52:21 AM:     at runLoaders (/opt/build/repo/node_modules/webpack/lib/NormalModule.js:301:20)
7:52:21 AM:     at /opt/build/repo/node_modules/loader-runner/lib/LoaderRunner.js:367:11
7:52:21 AM:     at /opt/build/repo/node_modules/loader-runner/lib/LoaderRunner.js:233:18
7:52:21 AM:     at context.callback (/opt/build/repo/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
7:52:21 AM:     at Promise.resolve.then.then.catch (/opt/build/repo/node_modules/postcss-loader/src/index.js:208:9)
7:52:21 AM:  @ ./src/components/AddCalculation.vue?vue&type=style&index=0&id=347271c2&scoped=true&lang=scss& 1:0-538 1:554-557 1:559-1094 1:559-1094
7:52:21 AM:  @ ./src/components/AddCalculation.vue
7:52:21 AM:  @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Calculator.vue?vue&type=script&lang=js&
7:52:21 AM:  @ ./src/components/Calculator.vue?vue&type=script&lang=js&
7:52:21 AM:  @ ./src/components/Calculator.vue
7:52:21 AM:  @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&
7:52:21 AM:  @ ./src/App.vue?vue&type=script&lang=js&
7:52:21 AM:  @ ./src/App.vue
7:52:21 AM:  @ ./src/main.js
7:52:21 AM:  @ multi ./src/main.js
7:52:21 AM:  error  in ./src/components/Calculation.vue?vue&type=style&index=0&id=4e715b69&scoped=true&lang=scss&
7:52:21 AM: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
7:52:21 AM: ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
7:52:21 AM: Error: Cannot find module '@tailwindcss/custom-forms'
7:52:21 AM:     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
7:52:21 AM:     at Function.Module._load (internal/modules/cjs/loader.js:562:25)
7:52:21 AM:     at Module.require (internal/modules/cjs/loader.js:692:17)
7:52:21 AM:     at require (internal/modules/cjs/helpers.js:25:18)
7:52:21 AM:     at Object.<anonymous> (/opt/build/repo/tailwind.config.js:72:9)
7:52:21 AM:     at Module._compile (internal/modules/cjs/loader.js:778:30)
7:52:21 AM:     at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
7:52:21 AM:     at Module.load (internal/modules/cjs/loader.js:653:32)
7:52:21 AM:     at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
7:52:21 AM:     at Function.Module._load (internal/modules/cjs/loader.js:585:3)
7:52:21 AM:     at Module.require (internal/modules/cjs/loader.js:692:17)
7:52:21 AM:     at require (internal/modules/cjs/helpers.js:25:18)
7:52:21 AM:     at /opt/build/repo/node_modules/tailwindcss/lib/index.js:54:83
7:52:21 AM:     at /opt/build/repo/node_modules/tailwindcss/lib/processTailwindFeatures.js:32:20
7:52:21 AM:     at LazyResult.run (/opt/build/repo/node_modules/postcss/lib/lazy-result.js:295:14)
7:52:21 AM:     at LazyResult.asyncTick (/opt/build/repo/node_modules/postcss/lib/lazy-result.js:208:26)
7:52:21 AM:     at runLoaders (/opt/build/repo/node_modules/webpack/lib/NormalModule.js:301:20)
7:52:21 AM:     at /opt/build/repo/node_modules/loader-runner/lib/LoaderRunner.js:367:11
7:52:21 AM:     at /opt/build/repo/node_modules/loader-runner/lib/LoaderRunner.js:233:18
7:52:21 AM:     at context.callback (/opt/build/repo/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
7:52:21 AM:     at Promise.resolve.then.then.catch (/opt/build/repo/node_modules/postcss-loader/src/index.js:208:9)
7:52:21 AM:  @ ./src/components/Calculation.vue?vue&type=style&index=0&id=4e715b69&scoped=true&lang=scss& 1:0-535 1:551-554 1:556-1088 1:556-1088
7:52:21 AM:  @ ./src/components/Calculation.vue
7:52:21 AM:  @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Calculator.vue?vue&type=script&lang=js&
7:52:21 AM:  @ ./src/components/Calculator.vue?vue&type=script&lang=js&
7:52:21 AM:  @ ./src/components/Calculator.vue
7:52:21 AM:  @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&
7:52:21 AM:  @ ./src/App.vue?vue&type=script&lang=js&
7:52:21 AM:  @ ./src/App.vue
7:52:21 AM:  @ ./src/main.js
7:52:21 AM:  @ multi ./src/main.js
7:52:21 AM:  error  in ./src/components/CalculationStatsTotal.vue?vue&type=style&index=0&id=7dc65164&scoped=true&lang=scss&
7:52:21 AM: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
7:52:21 AM: ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
7:52:21 AM: Error: Cannot find module '@tailwindcss/custom-forms'
7:52:21 AM:     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
7:52:21 AM:     at Function.Module._load (internal/modules/cjs/loader.js:562:25)
7:52:21 AM:     at Module.require (internal/modules/cjs/loader.js:692:17)
7:52:21 AM:     at require (internal/modules/cjs/helpers.js:25:18)
7:52:21 AM:     at Object.<anonymous> (/opt/build/repo/tailwind.config.js:72:9)
7:52:21 AM:     at Module._compile (internal/modules/cjs/loader.js:778:30)
7:52:21 AM:     at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
7:52:21 AM:     at Module.load (internal/modules/cjs/loader.js:653:32)
7:52:21 AM:     at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
7:52:21 AM:     at Function.Module._load (internal/modules/cjs/loader.js:585:3)
7:52:21 AM:     at Module.require (internal/modules/cjs/loader.js:692:17)
7:52:21 AM:     at require (internal/modules/cjs/helpers.js:25:18)
7:52:21 AM:     at /opt/build/repo/node_modules/tailwindcss/lib/index.js:54:83
7:52:21 AM:     at /opt/build/repo/node_modules/tailwindcss/lib/processTailwindFeatures.js:32:20

The relevent part being:

7:52:21 AM: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
7:52:21 AM: ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
7:52:21 AM: Error: Cannot find module '@tailwindcss/custom-forms'

I can build it fine on my local machine using the command:
NODE_ENV=production npm run build --scripts-prepend-node-path=auto

I get no errors, and I have been Googling around, I found people saying I need to make sure that I have installed the Post CSS plugin. I have, it’s installed in my devDependencies, which I don’t think it’s a problem since TailwindCSS is in there too.

I am new to VueJS too, so my ignorance may be showing and this may not be a Netlify problem. However, as mentioned, it builds fine on my local machine.

The only other thing I can think of is that I turned Asset Optimization on between last week and this week. I don’t know enough about Netlify to know if that could be a factor though. Any thoughts would be helpful!

2

Hi, Can you please provide a link to one of your failed deploys? Thanks.

3

Hello! Thanks for the reply.

Through some debugging steps I found it will successfully deploy if I use Netlify Cli netlify dev --prod. https://app.netlify.com/sites/eloquent-tesla-f22e6a/deploys/5d88c1e53db6a9dcfcfdf6c5

However, if it’s coming from my Git repository, it doesn’t deploy:
https://app.netlify.com/sites/eloquent-tesla-f22e6a/deploys/5d88c33ab3c17d408e492f55

Things I’ve tried:

  • I tried disabling Asset Optimization to no effect.
  • I also used nvm to switch to the same version of Node and NPM locally that Netlify was using in that failed build. It built just fine with no errors.
  • I even ran npm clean-install and it builds fine.
  • However if I clear the cache in Netlify and build it:
    https://app.netlify.com/sites/eloquent-tesla-f22e6a/deploys/5d88c30e28ffa50f4abd85bf I get a Vue Cli error. Then if I do nothing and re-trigger a build I get that same error about @tailwindcss/custom-forms. Back to square one.

So I’m not sure what to try next.

4

The netlify dev --prod deploy just publishes the “publish directory” which normally contains the files which are prebuilt locally. This skips the build process at Netlify.

Here is one way to troubleshoot the build issue:

  1. Create a new empty directory (do not use the exist git repo directory)
  2. Make a new git clone of the site repo in the empty directory
  3. Change to the directory of the newly cloned repo
  4. Run npm install
  5. Run npm run build

Does this build succeed in the new clone? If not, you have reproduced the same error and can troubleshoot it locally. Once the local error is fixed, the build should also succeed at Netlify.

If it does succeed locally, the next thing to check for is differences in file capitalization. MacOS treats differences in capitalization as the same file. Most other OSes do not do this. Example:

MacOS: file.txt = File.txt
Linux: file.txt ≠ File.txt

Would you try the “new clone” test and let us know the results?

5

Luke,

Thanks for the troubleshooting step! I followed your instructions and was hoping to be able to debug locally, but unfortunately, it built just fine locally.

Going down the rabbit hole of naming issues, I looked in the my node_modules folder and my @tailwindcss/custom-forms folder didn’t seem out of the ordinary, except within that folder there was no index.js file. Then I thought maybe some magic was going on, and in Linux it wasn’t getting picked up. So I changed the path to the plugin to require('@tailwindcss/custom-forms/src/index') and when it built successfully locally, I rebuilt on Netlify. Now I have a new error:

6:35:39 AM: > vue-cli-service build

6:35:40 AM: - Building for production...

6:35:58 AM: ERROR Failed to compile with 6 errors12:35:58 PM

6:35:58 AM: failed during stage 'building site': Build script returned non-zero exit code: 1

6:35:58 AM: error in ./src/main.css

6:35:58 AM: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):

6:35:59 AM: Shutting down logging, 235 messages pending

https://app.netlify.com/sites/eloquent-tesla-f22e6a/deploys/5d8b5ef6692edb09efe13918

Just to ensure that my local environment is working properly with that tailwind plugin, I changed the require to foo and it failed with module not found, and changed it again to uuid and it didn’t fail. This got me thinking maybe there’s an error internally to tailwind that is being silenced. So I used the command line:


➜  goals git:(master) ✗ npx tailwind build ./src/main.css -o ./output.css
 
   tailwindcss 1.1.2
 
   🚀 Building... src/main.css
 
   ✅ Finished in 1.13 s
   📦 Size: 936.8KB
   💾 Saved to output.css

But it built fine. I know this particular plugin works with Netlify because their docs are hosted on Netlify: https://tailwindcss-custom-forms.netlify.com/.

6

I’d suggest the debug flow here. I think it may make things obvious and you seem to have plenty of clue that it won’t be a huge timesink:

That will leave you in the build filesystem after the build fails to read e.g. debug logs and see what is really in node_modules