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

[saad696]

trafficstars

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]

gsoft-inc/craco/issues/313 gsoft-inc/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: https://github.com/facebook/create-react-app/pull/11786

[DigitalNaut]

gsoft-inc/craco/issues/313 gsoft-inc/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
+                }
             };
         }
     }

Thank you! That worked like a charm. First time using patch-package, it's great

[atrimn]

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

same issue

[hisamc91237]

postcssOptions

Your error resloved?

[saipepu]

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

You also need to change in the Dependencies-> "postcss" to "postcssOptions"

[albeniskerqeli10]

I didn't change anything to dependencies and it works for me, but yeah for others this can be a another useful option to solve this issue 👍

[phiho2419]

step 3 you need add this line in taiwind.config.js file https://tailwindcss.com/docs/guides/create-react-app

[toviszsolt]

(https://github.com/facebook/create-react-app/issues/11777#issuecomment-996276161)

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

Just seems like it works! There is no postcssOptions in craco.config.js, so that option will be ignored! The desired parameters will not be loaded into Postcss!

[albeniskerqeli10]

(https://github.com/facebook/create-react-app/issues/11777#issuecomment-996276161)

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

Just seems like it works! There is no postcssOptions in craco.config.js, so that option will be ignored! The desired parameters will not be loaded into Postcss!

this option maybe cannot exist in postcss, but this method worked for me to ignore this error tbh I don't know the reason why you disliked that comment 😂🤦‍♂️

[toviszsolt]

(#11777 (comment))

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

Just seems like it works! There is no postcssOptions in craco.config.js, so that option will be ignored! The desired parameters will not be loaded into Postcss!

this option maybe cannot exist in postcss, but this method worked for me to ignore this error tbh I don't know the reason why you disliked that comment 😂🤦‍♂️

Yes you ignored the entire postcss config, so you ignored the error message also. If it's raining and the umbrella doesn't work, the solution is not to throw the umbrella away, but to try to fix it so it doesn't get wet.

[ahsaanshuja]

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

really work for me

[toviszsolt]

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

really work for me

Why do you say it is work for you? Postcss NOT RUN for you, so it is NOT WORK! Craco has NOT postcssOptions configuration, you can check in Craco documentation. You could even write it there doesNotCareOptions! Let's try it!

[toviszsolt]

Replace postcss to postcssOptions is EQUAL with delete complete postcss configurations! Please don't be sick guys, and stop spreading the nonsense!

[albeniskerqeli10]

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

You can now install the new craco version which can fix this issue https://www.npmjs.com/package/@craco/craco/v/7.0.0-alpha.3 P.S first option still works well though

[AndrejGajdos]

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

You can now install the new craco version which can fix this issue https://www.npmjs.com/package/@craco/craco/v/7.0.0-alpha.3 P.S first option still works well though

I tried this out, but it didn't help. I opened an issue here. I tried to replace postcss to postcssOptions, but it doesn't solve the issue. It removes the error message, but css is not processed.

[danoldnyamsi7]

adding postcssOptions instead of postcss inside craco.config.js worked for me too. Thanks

[DanielleZeff]

What solved it for me was to change postcss to postcssOptions in craco.config.js and install this package: npm install --save-dev postcss-loader postcss

[madesurya]

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

till today, still worked for me. thanks

[toannguyen3105]

postcssOptions

Thank you sir! Worked for me.

[Tagaca19e]

I had this problem with an untouched project for about a year. I was able to solve it by the following steps.

Step 1. Update postcss.js file with the following below.

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
+                }
             };
         }
     }

Step 2. Change postcss to postcssOptions in craco.config.js file.

// craco.config.js file.
module.exports = {
  style: {
    // Changed here.
    postcssOptions: {
      plugins: [require("tailwindcss"), require("autoprefixer")],
    },
  },
};

Step 3. Update your postcss version in your package.json file. I did this by removing the postcss version on my package.json then using npm i postcss.

  // Package.json file.
  "private": true,
  "dependencies": {
    "@craco/craco": "^6.0.0",
    "@material-ui/icons": "^4.11.2",
    "@tailwindcss/postcss7-compat": "^2.0.2",
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.6.0",
    "autoprefixer": "^9.8.6",
    "custom-cursor-react": "^1.0.5",
    "gh-pages": "^3.2.3",
    "lottie-web": "^5.7.5",
    // Changed here.
    "postcss": "^8.4.14",
    "react": "^17.0.1",

Let me know if this works :)