"Uncaught ReferenceError: process is not defined" when importing "tailwindcss/resolveConfig" with Webpack 5 (v3.3.0)

[sgarcia-dev]

What version of Tailwind CSS are you using?

v3.3.0

What build tool (or framework if it abstracts the build tool) are you using?

Webpack 5.77.0

What version of Node.js are you using?

For example: v14.18.1

What browser are you using?

For example: Chrome

What operating system are you using?

For example: macOS (intel=

Describe your issue

After upgrading to tailwind v3.3.0 from v3.2.7 we got this warning at runtime, causing the app to fail from running

sharedState.js:30 Uncaught ReferenceError: process is not defined
    at ./node_modules/tailwindcss/lib/lib/sharedState.js (sharedState.js:30:1)
    at __webpack_require__ (bootstrap:19:1)
    at ./node_modules/tailwindcss/lib/featureFlags.js (featureFlags.js:18:22)
    at __webpack_require__ (bootstrap:19:1)
    at ./node_modules/tailwindcss/lib/util/normalizeConfig.js (normalizeConfig.js:9:23)
    at __webpack_require__ (bootstrap:19:1)
    at ./node_modules/tailwindcss/lib/util/resolveConfig.js (resolveConfig.js:15:26)
    at __webpack_require__ (bootstrap:19:1)
    at ./node_modules/tailwindcss/lib/public/resolve-config.js (resolve-config.js:9:61)
    at __webpack_require__ (bootstrap:19:1)

This was caused by one of our components import of import resolveConfig from 'tailwindcss/resolveConfig' with Webpack 5. Which causes the following process.env check to throw a runtime error.

tailwindcss/src/lib/sharedState.js

Line 6 in b1f4da7

DEBUG: resolveDebug(process.env.DEBUG),

Apparently it's caused by Webpack 5's removal of polyfills.

webpack 5 does no longer include a polyfill for this Node.js variable. Avoid using it in the frontend code.

There are workarounds for this such as including a process polyfill with webpack.DefinePlugin, but I think this should probably not be necessary.

I wonder if this could be fixed by just adding a typeof process !== 'undefined' && before it? We also got this issue as well on upgrading, so maybe they are related? Downgrading for now
#10894

In case its relevant, we're mixing ESM modules with CommonJS, which is also similar in the bug above.

I'm sorry I don't have a runnable example, but I hope this information proves useful to fixing this.

[reinink]

Hey! Thanks for reporting this. We actually just bumped into this issue ourselves while working on fixing something else. We've got a fix for this in #10919 👍

[reinink]

Hey thanks again for reporting this. This has been fixed and will be released as part of v3.3.1. Let us know if you have any further issues 👍

[sgarcia-dev]

Thank you @reinink ! Will test ´v3.3.1´ when we get the chance and come back if we encounter any issues. Have a lovely day 👋

[rixyane]

Still an issue for v3.3.1 (using with nuxt v3.3.2 and @nuxtjs/tailwindcss 6.6.5)

[reinink]

@rixyane Hey can you please share a minimal reproduction of this as a Git repo for us to test out?

[r4zendev]

Solved with installing version 3.3.2 for me in React project using Vite.