Major version 3 & 4 not working (Rails / Webpacker 6)

[jamesst20]

packages.json

{
  "name": "kawab-v3",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.2",
    "@popperjs/core": "^2.6.0",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "6.0.0-beta.7",
    "@stripe/stripe-js": "^1.13.1",
    "axios": "^0.21.1",
    "bootstrap": "^5.0.0",
    "css-loader": "^5.1.1",
    "css-minimizer-webpack-plugin": "^3.0.0",
    "flex-gap-polyfill": "2.0.0",
    "mini-css-extract-plugin": "^1.3.9",
    "postcss": "^8.2.7",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-import": "^14.0.0",
    "postcss-loader": "^5.1.0",
    "postcss-preset-env": "^6.7.0",
    "sass": "^1.32.8",
    "sass-loader": "^11.0.0",
    "webpack": "^5.11.0",
    "webpack-cli": "^4.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "@webpack-cli/serve": "^1.3.0",
    "webpack-dev-server": "^3.11.2"
  },
  "babel": {
    "presets": [
      "./node_modules/@rails/webpacker/package/babel/preset.js"
    ]
  },
  "browserslist": [
    "defaults"
  ]
}

postcss.config.js

module.exports = {
  plugins: [
    require('postcss-import'),
    require('flex-gap-polyfill'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    }),
  ]
}

Upgrading to version 3 or 4 breaks compilation: "flex-gap-polyfill": "^4.0.0"

Error

[Webpacker] Compiling...
[Webpacker] Compilation failed:
assets by chunk 1.62 MiB (id hint: vendors)
  asset js/vendors-node_modules_fortawesome_fontawesome-free_js_all_js-node_modules_rails_activestorage_-a4abd5-4cd3d3c143f71678446e.js 1.55 MiB [emitted] [immutable] (id hint: vendors) 1 related asset
  asset js/vendors-node_modules_babel_runtime_regenerator_index_js-node_modules_stripe_stripe-js_dist_st-990793-411db816232e667b7f04.js 80.7 KiB [emitted] [immutable] (id hint: vendors) 1 related asset
asset js/website-6698940e1ebf8fabc153.js 12.8 KiB [emitted] [immutable] (name: website) 1 related asset
asset js/runtime-6ac31981503f92501d2d.js 6.89 KiB [emitted] [immutable] (name: runtime) 1 related asset
asset js/admin-227c5e031914f0c4eed2.js 5.66 KiB [emitted] [immutable] (name: admin) 1 related asset
asset manifest.json 2.33 KiB [emitted]
Entrypoint admin 1.56 MiB (1.56 MiB) = js/runtime-6ac31981503f92501d2d.js 6.89 KiB js/vendors-node_modules_fortawesome_fontawesome-free_js_all_js-node_modules_rails_activestorage_-a4abd5-4cd3d3c143f71678446e.js 1.55 MiB js/admin-227c5e031914f0c4eed2.js 5.66 KiB 3 auxiliary assets
Entrypoint website 1.64 MiB (1.65 MiB) = js/runtime-6ac31981503f92501d2d.js 6.89 KiB js/vendors-node_modules_fortawesome_fontawesome-free_js_all_js-node_modules_rails_activestorage_-a4abd5-4cd3d3c143f71678446e.js 1.55 MiB js/vendors-node_modules_babel_runtime_regenerator_index_js-node_modules_stripe_stripe-js_dist_st-990793-411db816232e667b7f04.js 80.7 KiB js/website-6698940e1ebf8fabc153.js 12.8 KiB 4 auxiliary assets
runtime modules 3.6 KiB 7 modules
modules by path ./node_modules/ 1.53 MiB
  modules by path ./node_modules/@popperjs/core/lib/ 73.2 KiB 58 modules
  modules by path ./node_modules/axios/ 41.3 KiB 27 modules
  modules by path ./node_modules/@rails/ 60.2 KiB
    ./node_modules/@rails/ujs/lib/assets/compiled/rails-ujs.js 27.6 KiB [built] [code generated]
    ./node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js 32.6 KiB [built] [code generated]
  5 modules
modules by path ./app/packs/ 7.74 KiB
  modules by path ./app/packs/src/ 7.02 KiB
    modules by path ./app/packs/src/website/javascripts/ 6.45 KiB 5 modules
    modules by path ./app/packs/src/admin/javascripts/ 588 bytes 3 modules
  modules by path ./app/packs/entrypoints/ 736 bytes
    modules by path ./app/packs/entrypoints/*.js 658 bytes 2 modules
    modules with errors 78 bytes [errors] 2 modules

ERROR in ./app/packs/entrypoints/admin.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: postcssValuesParser.parse is not a function
    at /Users/james/Projects/KawabV3/app/packs/entrypoints/admin.scss:6731:1
    at /Users/james/Projects/KawabV3/node_modules/flex-gap-polyfill/dist/index.js:326:33
    at Array.forEach (<anonymous>)
    at rewriteMargin (/Users/james/Projects/KawabV3/node_modules/flex-gap-polyfill/dist/index.js:308:16)
    at /Users/james/Projects/KawabV3/node_modules/flex-gap-polyfill/dist/index.js:609:13
    at /Users/james/Projects/KawabV3/node_modules/postcss/lib/container.js:115:18
    at /Users/james/Projects/KawabV3/node_modules/postcss/lib/container.js:74:18
    at Root.each (/Users/james/Projects/KawabV3/node_modules/postcss/lib/container.js:60:16)
    at Root.walk (/Users/james/Projects/KawabV3/node_modules/postcss/lib/container.js:71:17)
    at Root.walkRules (/Users/james/Projects/KawabV3/node_modules/postcss/lib/container.js:113:19)
    at Object.Once (/Users/james/Projects/KawabV3/node_modules/flex-gap-polyfill/dist/index.js:541:12)
    at processResult (/Users/james/Projects/KawabV3/node_modules/webpack/lib/NormalModule.js:703:19)
    at /Users/james/Projects/KawabV3/node_modules/webpack/lib/NormalModule.js:809:5
    at /Users/james/Projects/KawabV3/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /Users/james/Projects/KawabV3/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/Users/james/Projects/KawabV3/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/Users/james/Projects/KawabV3/node_modules/postcss-loader/dist/index.js:96:7)

ERROR in ./app/packs/entrypoints/website.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: postcssValuesParser.parse is not a function
    at /Users/james/Projects/KawabV3/app/packs/entrypoints/website.scss:6605:1
    at /Users/james/Projects/KawabV3/node_modules/flex-gap-polyfill/dist/index.js:326:33
    at Array.forEach (<anonymous>)
    at rewriteMargin (/Users/james/Projects/KawabV3/node_modules/flex-gap-polyfill/dist/index.js:308:16)
    at /Users/james/Projects/KawabV3/node_modules/flex-gap-polyfill/dist/index.js:609:13
    at /Users/james/Projects/KawabV3/node_modules/postcss/lib/container.js:115:18
    at /Users/james/Projects/KawabV3/node_modules/postcss/lib/container.js:74:18
    at Root.each (/Users/james/Projects/KawabV3/node_modules/postcss/lib/container.js:60:16)
    at Root.walk (/Users/james/Projects/KawabV3/node_modules/postcss/lib/container.js:71:17)
    at Root.walkRules (/Users/james/Projects/KawabV3/node_modules/postcss/lib/container.js:113:19)
    at Object.Once (/Users/james/Projects/KawabV3/node_modules/flex-gap-polyfill/dist/index.js:541:12)
    at processResult (/Users/james/Projects/KawabV3/node_modules/webpack/lib/NormalModule.js:703:19)
    at /Users/james/Projects/KawabV3/node_modules/webpack/lib/NormalModule.js:809:5
    at /Users/james/Projects/KawabV3/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /Users/james/Projects/KawabV3/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/Users/james/Projects/KawabV3/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/Users/james/Projects/KawabV3/node_modules/postcss-loader/dist/index.js:96:7)

2 ERRORS in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack 5.38.1 compiled with 4 errors in 4588 ms

[gavinmcfarland]

Thanks for flagging this.

I think this is an issue with a module dependency.

Could you try manually installing postcss-values-parser?

npm install postcss-values-parser

For some reason, it seems to have moved it to a peer dependency in the later releases.

[gavinmcfarland]

Closing for now, feel free to comment if you still experience the issue.