UnhandledPromiseRejectionWarning: TypeError: match.loader.options.plugins is not a function

[saad696]

package.json

`{

"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
    "@craco/craco": "^6.4.3",
    "@emotion/react": "^11.7.0",
    "@emotion/styled": "^11.6.0",
    "@mui/icons-material": "^5.2.0",
    "@mui/material": "^5.2.1",
    "@testing-library/jest-dom": "^5.15.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "axios": "^0.24.0",
    "dotenv": "^10.0.0",
    "eslint": "^7.32.0",
    "firebase": "^9.5.0",
    "history": "^5.1.0",
    "moment": "^2.29.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router": "^6.0.2",
    "react-router-dom": "^6.0.2",
    "react-scripts": "^5.0.0",
    "react-toastify": "^8.1.0",
    "stream-chat": "^4.4.3",
    "stream-chat-react": "^6.12.0",
    "typescript": "^4.5.4",
    "universal-cookie": "^4.0.4",
    "web-vitals": "^1.1.2"
},
"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject",
    "lint": "eslint ./src --ext .js",
    "lint:fix": "npm run lint -- --fix",
    "prettier:format": "prettier --write \"**/*.+(js|jsx|ts|tsx|json|scss|md)\"",
    "pre:commit": "npm run lint && npm run prettier:format"
},
"eslintConfig": {
    "extends": [
        "react-app",
        "react-app/jest"
    ]
},
"browserslist": {
    "production": [
        ">0.2%",
        "not dead",
        "not op_mini all"
    ],
    "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
    ]
},
"devDependencies": {
    "autoprefixer": "^9.8.8",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.27.1",
    "eslint-plugin-react-hooks": "^4.3.0",
    "postcss": "^7.0.39",
    "prettier": "^2.5.1",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
}

}
`

craco.config.js

`module.exports = {

style: {
    postcss: {
        plugins: [require('tailwindcss'), require('autoprefixer')],
    },
},

};`

I have just shifted to react scripts 5.0.0 for in order to get rid of this issue and now im getting an error in vs code console while doing npm start, which goes like UnhandledPromiseRejectionWarning: TypeError: match.loader.options.plugins is not a function and i don't know what is causing this error can someone please help out with this

[jawadsh123]

dilanx/craco/issues/313 dilanx/craco#353
craco does not support CRA v5 yet
we've fixed this in our projects temporarily by patching craco (can use something like patch-package)

diff --git a/lib/features/webpack/style/postcss.js b/lib/features/webpack/style/postcss.js
index e77f534f5df4327e4f2d19261f3f75d915afa5a1..c16149d9c9534d98e524aaad15cc47f8c0d218af 100644
--- a/lib/features/webpack/style/postcss.js
+++ b/lib/features/webpack/style/postcss.js
@@ -51,7 +51,7 @@ function extendsPostcss(match, { plugins, env }) {
             let craPlugins = [];
 
             if (match.loader.options) {
-                craPlugins = match.loader.options.plugins();
+                craPlugins = match.loader.options.postcssOptions.plugins;
             }
 
             postcssPlugins = craPlugins || [];
@@ -64,10 +64,12 @@ function extendsPostcss(match, { plugins, env }) {
         }
 
         if (match.loader.options) {
-            match.loader.options.plugins = () => postcssPlugins;
+            match.loader.options.postcssOptions.plugins = postcssPlugins;
         } else {
             match.loader.options = {
-                plugins: () => postcssPlugins
+                postcssOptions: {
+                    plugins: postcssPlugins
+                }
             };
         }
     }

[patricklafrance]

@jawadsh123 you should submit a PR to CRACO instead ;)

If it's backward compatible, I could release it without waiting for full support of CRA 5.

[albeniskerqeli10]

try to replace "postcss" with "postcssOptions" in craco config
I had the same problem , this method works for me.

[saad696]

thanks guys

[saad696]

Compiled with problems:X

ERROR in ./node_modules/dotenv/lib/main.js 24:11-24

Module not found: Error: Can't resolve 'fs' in 'E:\react\ReChat\client\node_modules\dotenv\lib'

ERROR in ./node_modules/dotenv/lib/main.js 26:13-28

Module not found: Error: Can't resolve 'path' in 'E:\react\ReChat\client\node_modules\dotenv\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }

ERROR in ./node_modules/dotenv/lib/main.js 28:11-24

Module not found: Error: Can't resolve 'os' in 'E:\react\ReChat\client\node_modules\dotenv\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
- install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "os": false }

ERROR in ./node_modules/stream-chat-react/dist/css/index.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/stream-chat-react/dist/css/index.css)

Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: PostCSS plugin postcss-flexbugs-fixes requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
at Processor.normalize (E:\react\ReChat\client\node_modules\postcss\lib\processor.js:153:15)
at new Processor (E:\react\ReChat\client\node_modules\postcss\lib\processor.js:56:25)
at postcss (E:\react\ReChat\client\node_modules\postcss\lib\postcss.js:55:10)
at Object.loader (E:\react\ReChat\client\node_modules\postcss-loader\dist\index.js:96:17)

ERROR in ./src/App.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/App.css)

Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: PostCSS plugin postcss-flexbugs-fixes requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
at Processor.normalize (E:\react\ReChat\client\node_modules\postcss\lib\processor.js:153:15)
at new Processor (E:\react\ReChat\client\node_modules\postcss\lib\processor.js:56:25)
at postcss (E:\react\ReChat\client\node_modules\postcss\lib\postcss.js:55:10)
at Object.loader (E:\react\ReChat\client\node_modules\postcss-loader\dist\index.js:96:17)

ERROR in ./src/tailwind.config.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/tailwind.config.css)

Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: PostCSS plugin postcss-flexbugs-fixes requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
at Processor.normalize (E:\react\ReChat\client\node_modules\postcss\lib\processor.js:153:15)
at new Processor (E:\react\ReChat\client\node_modules\postcss\lib\processor.js:56:25)
at postcss (E:\react\ReChat\client\node_modules\postcss\lib\postcss.js:55:10)
at Object.loader (E:\react\ReChat\client\node_modules\postcss-loader\dist\index.js:96:17)

Still gettings these error after patching postcss in craco

[raix]

Webpack 5 and CRA v5 don't add fallbacks for nodejs modules any more, it's a breaking change - dotenv should not be added in the browser code related issues closed in dotenv repo

[saad696]

i needed to use env variables that's the reason i added dotenv in frontend...

[raix]

https://create-react-app.dev/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env

[shivani805]

try to replace "postcss" with "postcssOptions" in craco config I had the same problem , this method works for me.

really work for me

[raix]

@saad696 I'm confused by the title of this issue - is it related to Tailwind or DotEnv?
(if both then let's create two separate issues, one topic per issue :) - also move craco discussion to their repository)

Regarding Tailwind theres a PR improving the documentation: #11786