Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
saad696 opened this issue Dec 16, 2021 · 29 comments

Comments

@saad696
Copy link

saad696 commented Dec 16, 2021

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
Copy link
Contributor

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
Copy link

@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
Copy link

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

@saad696
Copy link
Author

saad696 commented Dec 17, 2021

thanks guys

@saad696
Copy link
Author

saad696 commented Dec 17, 2021

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
Copy link
Contributor

raix commented Dec 17, 2021

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
Copy link
Author

saad696 commented Dec 17, 2021

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

@shivani805
Copy link

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

really work for me

@raix
Copy link
Contributor

raix commented Dec 17, 2021

@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

l3keboy added a commit to l3keboy/lukehendriks.net-v1 that referenced this issue Dec 17, 2021
- Updated to TailwindCSS 3.0 (WARNING: This is using own workarounds: 1-[Craco config changed](facebook/create-react-app#11777 (comment)) 2-manually installed babel-runtime
@DigitalNaut
Copy link

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
Copy link

atrimn commented Dec 21, 2021

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
Copy link

postcssOptions

Your error resloved?

@saipepu
Copy link

saipepu commented Jan 9, 2022

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
Copy link

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
Copy link

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

@toviszsolt
Copy link

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

@albeniskerqeli10
Copy link

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

@toviszsolt
Copy link

(#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
Copy link

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

really work for me

@toviszsolt
Copy link

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
Copy link

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

@albeniskerqeli10
Copy link

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
Copy link

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
Copy link

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

@DanielleZeff
Copy link

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
Copy link

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
Copy link

postcssOptions

Thank you sir! Worked for me.

@Tagaca19e
Copy link

Tagaca19e commented Aug 1, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests