Tailwindcss: [Potential BUG?] PurgeCSS breaks gatsby develop on version 1.4.x (working on 1.2.0)

[marckraw]

Hi,
after updating to 1.4.x i have a problem with tailwind using Gatsby. Followin error appear, when i run gatsby develop

TypeError: The "original" argument must be of type Function

Dunno if the reason is gatsby or what, but i think it comes from purgecss, because on version 1.2.0 everything works perfect.

i'm using scss, and in gatsby-config have something like that:

{
      resolve: `gatsby-plugin-sass`,
      options: {
        postCssPlugins: [
          require("tailwindcss")
        ]
      }
    }

(was just following guide from here: https://www.gatsbyjs.org/docs/tailwind-css/)

and here is my main.scss file which i import

@tailwind base;

@tailwind components;

@tailwind utilities;

body {
  font-family: "Unna", serif !important;
}

-- Full error here: --

Uncaught TypeError: The "original" argument must be of type Function
    at promisify (util.js:602)
    at Module.<anonymous> (purgecss.esm.js:1)
    at Module../node_modules/purgecss/lib/purgecss.esm.js (purgecss.esm.js:1)
    at __webpack_require__ (bootstrap:789)
    at fn (bootstrap:100)
    at Module../node_modules/@fullhuman/postcss-purgecss/lib/postcss-purgecss.esm.js (postcss-purgecss.esm.js:1)
    at __webpack_require__ (bootstrap:789)
    at fn (bootstrap:100)
    at Object../node_modules/tailwindcss/lib/lib/purgeUnusedStyles.js (purgeUnusedStyles.js:12)
    at __webpack_require__ (bootstrap:789)
    at fn (bootstrap:100)
    at Object../node_modules/tailwindcss/lib/processTailwindFeatures.js (processTailwindFeatures.js:24)
    at __webpack_require__ (bootstrap:789)
    at fn (bootstrap:100)
    at Object../node_modules/tailwindcss/lib/index.js (index.js:15)
    at __webpack_require__ (bootstrap:789)
    at fn (bootstrap:100)
    at Object.<anonymous> (gatsby-config.js:55)
    at Object../gatsby-config.js (gatsby-config.js:4)
    at __webpack_require__ (bootstrap:789)
    at fn (bootstrap:100)
    at Module.<anonymous> (layout.js:8)
    at Module../src/pages/editor.js (editor.js:37)
    at __webpack_require__ (bootstrap:789)
    at fn (bootstrap:100)
    at Object.<anonymous> (sync-requires.js:9)
    at Object../.cache/sync-requires.js (sync-requires.js:4)
    at __webpack_require__ (bootstrap:789)
    at fn (bootstrap:100)
    at Module.<anonymous> (api-runner-browser.js:7)
    at Module../.cache/app.js (app.js:16)
    at __webpack_require__ (bootstrap:789)
    at fn (bootstrap:100)
    at Object.0 (storyblok-entry.js:5)
    at __webpack_require__ (bootstrap:789)
    at bootstrap:856
    at bootstrap:856

[kukicado]

This happens on Hugo deploys with Netlify as well :( A different error though:

Tailwind 1.2.0 works perfectly, 1.4, without any code changes breaks.

11:23:46 AM: /opt/build/repo/node_modules/fs-extra/lib/mkdirs/make-dir.js:86
11:23:46 AM:       } catch {
11:23:46 AM:               ^
11:23:46 AM: SyntaxError: Unexpected token {
11:23:46 AM:     at createScript (vm.js:80:10)
11:23:46 AM:     at Object.runInThisContext (vm.js:139:10)
11:23:46 AM:     at Module._compile (module.js:617:28)
11:23:46 AM:     at Object.Module._extensions..js (module.js:664:10)
11:23:46 AM:     at Module.load (module.js:566:32)
11:23:46 AM:     at tryModuleLoad (module.js:506:12)
11:23:46 AM:     at Function.Module._load (module.js:498:3)
11:23:46 AM:     at Module.require (module.js:597:17)
11:23:46 AM:     at require (internal/module.js:11:18)
11:23:46 AM:     at Object.<anonymous> (/opt/build/repo/node_modules/fs-extra/lib/mkdirs/index.js:3:44)
11:23:46 AM: Total in 490 ms
11:23:46 AM: Error: Error building site: POSTCSS: failed to transform "css/styles.css" (text/css): /opt/build/repo/node_modules/fs-extra/lib/mkdirs/make-dir.js:86
11:23:46 AM:       } catch {
11:23:46 AM:               ^
11:23:46 AM: SyntaxError: Unexpected token {
11:23:46 AM:     at createScript (vm.js:80:10)
11:23:46 AM:     at Object.runInThisContext (vm.js:139:10)
11:23:46 AM:     at Module._compile (module.js:617:28)
11:23:46 AM:     at Object.Module._extensions..js (module.js:664:10)
11:23:46 AM:     at Module.load (module.js:566:32)
11:23:46 AM:     at tryModuleLoad (module.js:506:12)
11:23:46 AM:     at Function.Module._load (module.js:498:3)
11:23:46 AM:     at Module.require (module.js:597:17)
11:23:46 AM:     at require (internal/module.js:11:18)
11:23:46 AM:     at Object.<anonymous> (/opt/build/repo/node_modules/fs-extra/lib/mkdirs/index.js:3:44)

[kukicado]

I solved my issue. On my local machine I was running Node 12 and Tailwind worked perfectly, but Netlify was trying to run it with Node 8 and I was seeing that issue.

Maybe your node version is out of date/unsupported?

[taylorbryant]

@marckraw Here’s a doc that might be helpful if you want to try out what @kukicado said: https://docs.netlify.com/configure-builds/manage-dependencies/#node-js-and-javascript

[marckraw]

@taylorbryant will take a look, although my problem was in local development, with node 12.x version

[fabiogiolito]

Can confirm @kukicado's issue on Node 8. Updating to Node 12 fixed it.

It is specified in the docs that Purge only works with Node 9+:

It's important to note that because of the negative lookbehind in this regex, it's only compatible with Node.js 9.11.2 and above. If you need to use an older version of Node.js to build your assets, you can use this regular expression instead:

https://tailwindcss.com/docs/controlling-file-size/#understanding-the-regex

But to clarify this is not a fix for OP (@marckraw) issue.
Not the same error, and he's already on Node 12.

[mrkaluzny]

I have the same problem both on Node 12.X and 13.X, @marckraw have you found any solution? If not could you share your package.json details here?

@kukicado Could you also share your package.json?

[marckraw]

@mrkaluzny nope, i've used version, without purge css build in, and actually was not doing a lot of stuff on that project since then. Here is a package.json

{
  "name": "gatsby-storyblok-starter",
  "version": "1.0.0",
  "dependencies": {
    "@storyblok-components/simple-text-block": "^0.1.5",
    "@storyblok-components/utils": "^0.3.4",
    "@storyblok-components/video-component": "^0.3.2",
    "babel-plugin-styled-components": "^1.10.7",
    "core-js": "^2.6.11",
    "date-fns": "^2.10.0",
    "formik": "^2.1.4",
    "gatsby": "2.21.37",
    "gatsby-image": "^2.2.41",
    "gatsby-plugin-google-gtag": "^1.1.14",
    "gatsby-plugin-layout": "^1.1.13",
    "gatsby-plugin-manifest": "^2.2.26",
    "gatsby-plugin-offline": "^3.0.18",
    "gatsby-plugin-react-helmet": "^3.1.13",
    "gatsby-plugin-sass": "^2.3.1",
    "gatsby-plugin-sharp": "^2.2.34",
    "gatsby-plugin-styled-components": "^3.1.19",
    "gatsby-source-filesystem": "^2.1.35",
    "gatsby-source-storyblok": "^0.2.6",
    "gatsby-transformer-sharp": "^2.3.16",
    "http-proxy-middleware": "^1.0.4",
    "lodash": "^4.17.15",
    "netlify-lambda": "^1.6.3",
    "node-sass": "^4.14.1",
    "nodemailer": "^6.4.8",
    "npm-run-all": "^4.1.5",
    "query-string": "^6.9.0",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-helmet": "^5.2.1",
    "react-markdown": "^4.3.1",
    "react-modal": "^3.11.1",
    "react-player": "^1.14.0",
    "react-portal": "^4.2.1",
    "react-scroll": "^1.7.16",
    "storyblok-react": "0.0.10",
    "styled-components": "^5.1.0",
    "tailwindcss": "1.2.0"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "npm-run-all --parallel build:**",
    "build:app": "gatsby build",
    "build:functions": "netlify-lambda build functions",
    "start": "npm-run-all --parallel start:app start:server",
    "start:app": "gatsby develop",
    "start:server": "netlify-lambda serve functions",
    "start:mobile": "gatsby develop -H 0.0.0.0",
    "format": "prettier --write \"src/**/*.js\"",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
    "serve": "gatsby serve",
    "clean": "gatsby clean"
  },
  "devDependencies": {
    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.8",
    "prettier": "^1.14.2"
  }
}

[adamwathan]

Can you create a simple project that reproduces the issue? We got a lot of issues that require me to manually recreate someone's project from scratch and I unfortunately just don't have time for that so things end up going unfixed. If you can provide something I can clone and start troubleshooting with right away it's much easier for me to find time to diagnose and fix the issue.

[mrkaluzny]

Hey @adamwathan yeah, we'll working on a Gatsby starter that uses Tailwind, I first downgraded Tailwind to use 1.3.1. After your comment I've updated the packages on our starter to the latest one, and there's an issue with purgecss, but the website builds as expected on 1.7.6 (some styles are getting purged due to the current setup).

If you want to replicate you can basically use the starter and simply change the version of tailwind there, I had this issue in this exact project and we're still fine tuning the starter for our needs.

Here's the link to the project -> https://github.com/clean-commit/gatsby-starter-henlo it's still in early development ;)

I'll check out the issue with latest version but I'm 90% certain it was resolved with the latest release.

[adamwathan]

Cool, going to close for now but feel free to open a new issue if you see it again.

[mrkaluzny]

@adamwathan It persists on 1.8.5

[adamwathan]

Please open a new issue and include a link to a repository that reproduces so I can troubleshoot.

[Ongarr]

@mrkaluzny any news about supporting a newer version of tailwind then 1.3.1 in your starter?