Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Adding purge whitelist options breaks Production Build

See original GitHub issue

Version

@nuxtjs/tailwindcss: 1.4.1 nuxt: 2.11.0

Reproduction Link

None as Build fails, bug is in dev env.

Steps to reproduce

Add purge options as mentioned in the docs - https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css

Example:

module.exports = {
  purge: {
    options: {
      whitelistPatterns: [/agile*/],
      whitelistPatternsChildren: [/agile*/]
    }
  },
  variants: {},
  plugins: []
}

What is Expected?

Skip the agile classes and add them in the css output in production build

What is actually happening?

Breaks the production build with the below error.

ERROR in ./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css& (./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/string-replace-loader??ref--12!./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css&)
8:10:13 PM: Module build failed (from ./node_modules/postcss-loader/src/index.js):
8:10:13 PM: TypeError: Cannot read property 'filter' of undefined
8:10:13 PM:     at /opt/build/repo/node_modules/tailwindcss/node_modules/@fullhuman/postcss-purgecss/lib/postcss-purgecss.js:1:483
8:10:13 PM:     at LazyResult.run (/opt/build/repo/node_modules/postcss/lib/lazy-result.js:295:14)
8:10:13 PM:     at LazyResult.asyncTick (/opt/build/repo/node_modules/postcss/lib/lazy-result.js:208:26)
8:10:13 PM:     at LazyResult.asyncTick (/opt/build/repo/node_modules/postcss/lib/lazy-result.js:221:14)
8:10:13 PM:     at LazyResult.asyncTick (/opt/build/repo/node_modules/postcss/lib/lazy-result.js:221:14)
8:10:13 PM:     at LazyResult.asyncTick (/opt/build/repo/node_modules/postcss/lib/lazy-result.js:221:14)
8:10:13 PM:     at LazyResult.asyncTick (/opt/build/repo/node_modules/postcss/lib/lazy-result.js:221:14)
8:10:13 PM:     at LazyResult.asyncTick (/opt/build/repo/node_modules/postcss/lib/lazy-result.js:221:14)
8:10:13 PM:     at LazyResult.asyncTick (/opt/build/repo/node_modules/postcss/lib/lazy-result.js:221:14)
8:10:13 PM:     at LazyResult.asyncTick (/opt/build/repo/node_modules/postcss/lib/lazy-result.js:221:14)
8:10:13 PM:     at /opt/build/repo/node_modules/postcss/lib/lazy-result.js:250:14
8:10:13 PM:     at new Promise (<anonymous>)
8:10:13 PM:     at LazyResult.async (/opt/build/repo/node_modules/postcss/lib/lazy-result.js:246:23)
8:10:13 PM:     at LazyResult.then (/opt/build/repo/node_modules/postcss/lib/lazy-result.js:127:17)
8:10:13 PM:     at LazyResult.asyncTick (/opt/build/repo/node_modules/postcss/lib/lazy-result.js:212:17)
8:10:13 PM:     at LazyResult.asyncTick (/opt/build/repo/node_modules/postcss/lib/lazy-result.js:221:1

Issue Analytics

State:
Created 3 years ago
Reactions:2
Comments:12

Top GitHub Comments

1reaction

jhullcommented, Jun 20, 2020

Same issue here. Whitelisting not working at all…(nuxt 2.13)

1reaction

fayazaracommented, Jun 16, 2020

Nope, does not work. I tried manually adding every single agile class in the whitelist array, it still didnt work.

I know its not vue-agile’s issue because it works in dev server.

How it looks in dev server

Here is how it looks in production build

I even tried

purge: {
  enabled: false
}

The slider still wont work, this is very frustating, I used to work with tailwindcss and nuxt every single time in my work flow and never came across this issue.