create-react-app: UnhandledPromiseRejectionWarning: TypeError: match.loader.options.plugins is not a function

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

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

really work for me

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

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

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!

(#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.

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”

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

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

really work for me

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

(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!

@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.