[5.4] Can't compile Bootstrap 5.1.1 in production

[tagliala]

Hi,

this is not an issue with Webpacker, but I would like to report this here for searching purposes, hopefully save time to others for a subtle issue you may not notice in development and tests, and maybe there is someone willing to fix an issue in a direct Webpacker dependency.

The issue has been fixed in Bootstrap 5.1.2

How to reproduce:

$ rails _6.1.4.1_ new syntax-error-webpacker --skip-active-record --skip-javascript
$ cd syntax-error-webpacker/
$ echo "{ \"private\": true }" > package.json
$ echo "gem 'webpacker', '5.4.3'" >> Gemfile
$ bundle
$ bundle exec rails webpacker:install
$ yarn add bootstrap @popperjs/core@^2.10.1
$ echo "@import \"~bootstrap/scss/bootstrap\";" > app/javascript/packs/application.scss
$ NODE_ENV=production bin/webpack # does not happen in development

Error:

ERROR in ./app/javascript/packs/application.scss (./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/src??ref--6-2!./node_modules/sass-loader/dist/cjs.js??ref--6-3!./app/javascript/packs/application.scss)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
ParserError: Syntax Error at line: 1, column 25
    at ~/tests/syntax-error-webpacker/app/javascript/packs/application.scss:6:8164
    at Parser.error (~/tests/syntax-error-webpacker/node_modules/postcss-values-parser/lib/parser.js:127:11)
    at Parser.operator (~/tests/syntax-error-webpacker/node_modules/postcss-values-parser/lib/parser.js:162:20)
    at Parser.parseTokens (~/tests/syntax-error-webpacker/node_modules/postcss-values-parser/lib/parser.js:245:14)
    at Parser.loop (~/tests/syntax-error-webpacker/node_modules/postcss-values-parser/lib/parser.js:132:12)
    at Parser.parse (~/tests/syntax-error-webpacker/node_modules/postcss-values-parser/lib/parser.js:51:17)
    at parse (~/tests/syntax-error-webpacker/node_modules/postcss-custom-properties/index.cjs.js:47:30)
    at ~/tests/syntax-error-webpacker/node_modules/postcss-custom-properties/index.cjs.js:333:24
    at ~/tests/syntax-error-webpacker/node_modules/postcss/lib/container.js:194:18
    at ~/tests/syntax-error-webpacker/node_modules/postcss/lib/container.js:139:18
    at Rule.each (~/tests/syntax-error-webpacker/node_modules/postcss/lib/container.js:105:16)
    at Rule.walk (~/tests/syntax-error-webpacker/node_modules/postcss/lib/container.js:135:17)
    at ~/tests/syntax-error-webpacker/node_modules/postcss/lib/container.js:152:24
    at Root.each (~/tests/syntax-error-webpacker/node_modules/postcss/lib/container.js:105:16)
    at Root.walk (~/tests/syntax-error-webpacker/node_modules/postcss/lib/container.js:135:17)
    at Root.walkDecls (~/tests/syntax-error-webpacker/node_modules/postcss/lib/container.js:192:19)
    at transformProperties (~/tests/syntax-error-webpacker/node_modules/postcss-custom-properties/index.cjs.js:330:8)
    at Object.syncTransform [as plugin] (~/tests/syntax-error-webpacker/node_modules/postcss-custom-properties/index.cjs.js:522:5)
    at ~/tests/syntax-error-webpacker/node_modules/postcss-preset-env/index.js:443:97
 @ ./app/javascript/packs/application.scss 2:26-228
 @ multi ./app/javascript/packs/application.js ./app/javascript/packs/application.scss

Note that this may also be an issue with Webpacker 6 if you are going to recreate the same stack as Webpacker 5

Ref:

• Cannot parse calculations without spaces around the * operator shellscape/postcss-values-parser#138
• Add workaround for dart sass compile error twbs/bootstrap#35033

[chuckbenger]

Thanks for posting this! I had same error and upgraded to new bootstrap version to fix.

[Kawsay]

Really appreciate your initiative, had the exact same issue and your solution solved it perfectly. Thanks a lot !

[zavan]

If anyone falls here and is using Bootstrap 5.2.0, looks like the error is back, my solution was to downgrade to Bootstrap 5.1.3 for now.

See this and this.

[pipe2k27]

Same issue as zavan

[tagliala]

5.2.1 should fix this twbs/bootstrap#37079

[zavan]

5.2.1 is now released!