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

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

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

@jawadsh123

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

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

thanks guys

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

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

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

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

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

really work for me

@saad696

@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

Version 1.0.8

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

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 👍

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

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

(#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 😂🤦‍♂️

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

really work 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

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!

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.

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

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.

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

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

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

postcssOptions

Thank you sir! Worked for me.

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 :)

Navigation Menu

Repository navigation

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

package.json

craco.config.js

3 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

package.json

craco.config.js

Activity

jawadsh123 commented on Dec 16, 2021

patricklafrance commented on Dec 16, 2021

albeniskerqeli10 commented on Dec 16, 2021

saad696 commented on Dec 17, 2021

saad696 commented on Dec 17, 2021

raix commented on Dec 17, 2021

saad696 commented on Dec 17, 2021

raix commented on Dec 17, 2021

shivani805 commented on Dec 17, 2021

raix commented on Dec 17, 2021

DigitalNaut commented on Dec 21, 2021

3 remaining items

albeniskerqeli10 commented on Jan 9, 2022

phiho2419 commented on Jan 30, 2022

toviszsolt commented on Feb 16, 2022

albeniskerqeli10 commented on Feb 16, 2022

toviszsolt commented on Feb 16, 2022

ahsaanshuja commented on Mar 12, 2022

toviszsolt commented on Mar 12, 2022

toviszsolt commented on Mar 12, 2022

albeniskerqeli10 commented on Apr 3, 2022

AndrejGajdos commented on May 1, 2022

danoldnyamsi7 commented on May 28, 2022

DanielleZeff commented on May 29, 2022

madesurya commented on Jun 2, 2022

toannguyen3105 commented on Jun 19, 2022

Tagaca19e commented on Aug 1, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions