React Build Fails with 5.2 #36851

pipe2k27 · 2022-07-26T16:33:25Z

Prerequisites

I have searched for duplicate or closed issues
I have validated any HTML to avoid common problems
I have read the contributing guidelines

Describe the issue

React Build Fails when using bootstrap 5.2 and trying to parse SCSS files. Rolled back to 5.1.3 version and build runs fine.
Console shows parserError: Syntax error but nothing is wrong with the file. When running the project locally it is fine too! Just trying to build breaks the code.

Any help or insight will be appreciated

Thank you very much!!

Reduced test cases

What operating system(s) are you seeing the problem on?

Linux

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

v5.2.0

tetuaoro · 2022-07-27T04:32:03Z

Same problems like @pipe2k27 when I cloned my repo from another computer. I rolled back to v5.1.3 too and the build runs fine.

EDITED
The console output shows another error, here the build output :

Import trace for requested module:
./styles/globals.scss
./pages/_app.tsx

./styles/globals.scss
SassError: Undefined variable.
    ╷
142 │       values: $utilities-border-colors
    │               ^^^^^^^^^^^^^^^^^^^^^^^^

The variable $utilities-border-colors is undefined.

globals.scss

@import "bootstrap/scss/functions";

$primary: #d4262f;

@import "bootstrap/scss/variables";

$table-hover-bg: rgba($primary, $table-hover-bg-factor);

@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$colors: map-remove($colors, "blue", "indigo", "purple", "pink", "red", "orange", "yellow", "green", "teal", "cyan");
$theme-colors: map-remove($theme-colors, "info", "warning", "success", "danger", "secondary");

@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";

@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/transitions";
@import "bootstrap/scss/nav";
@import "bootstrap/scss/navbar";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/card";
@import "bootstrap/scss/tables";

@import "bootstrap/scss/helpers/position";
@import "bootstrap/scss/utilities/api";

// @import "bootstrap"

mdo · 2022-07-27T04:55:24Z

You have to include the new maps.scss file. See the blog post for details: https://blog.getbootstrap.com/2022/07/19/bootstrap-5-2-0/.

ahmadasjad · 2022-08-01T06:59:55Z

Even after adding maps.scss, I'm getting ParserError: Syntax Error at line: 1, column 38
Working fine when commented/removed some of the components.

These are the culprits

@import "../node_modules/bootstrap/scss/list-group";
@import "../node_modules/bootstrap/scss/toasts";
@import "../node_modules/bootstrap/scss/modal";
@import "../node_modules/bootstrap/scss/popover";

Below is custom.scss

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";

@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/root";

// 6. Optionally include any other parts as needed
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/tables";
@import "../node_modules/bootstrap/scss/forms";
@import "../node_modules/bootstrap/scss/buttons";
@import "../node_modules/bootstrap/scss/transitions";
@import "../node_modules/bootstrap/scss/dropdown";
@import "../node_modules/bootstrap/scss/button-group";
@import "../node_modules/bootstrap/scss/nav";
@import "../node_modules/bootstrap/scss/navbar";
@import "../node_modules/bootstrap/scss/card";
@import "../node_modules/bootstrap/scss/breadcrumb";
@import "../node_modules/bootstrap/scss/pagination";
@import "../node_modules/bootstrap/scss/badge";
@import "../node_modules/bootstrap/scss/alert";
@import "../node_modules/bootstrap/scss/progress";
// @import "../node_modules/bootstrap/scss/list-group";
@import "../node_modules/bootstrap/scss/close";
// @import "../node_modules/bootstrap/scss/toasts";
// @import "../node_modules/bootstrap/scss/modal";
@import "../node_modules/bootstrap/scss/tooltip";
// @import "../node_modules/bootstrap/scss/popover";
@import "../node_modules/bootstrap/scss/carousel";
@import "../node_modules/bootstrap/scss/spinners";
@import "../node_modules/bootstrap/scss/helpers";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

// 8. Add additional custom code here

mcmillion · 2022-08-15T21:07:59Z

I'm seeing the same thing as @ahmadasjad so I'm not sure why this is closed.

I'm not doing any custom imports, just @import "~bootstrap/scss/bootstrap"; like the docs say and I get the same error: ParserError: Syntax Error at line: 1, column 38

mdo · 2022-08-16T08:20:25Z

Any chance someone can create a live example in Stackblitz that we could test with? I'm on vacation and don't have time to do this myself.

afrz · 2022-08-18T13:04:34Z

My 2 cents. I have the same problem using CRA 4.0.3 + Dart-SASS 1.54.4 for Bootstrap 5.2.

Seems that is related to following issue bootstrap 1496.
Somehow postcss-values-parser in the toolchain can not figure out some SASS syntax correctly.

Bootstrap 5.1.2 has introduce workounds here but Bootstrap 5.2 has not (like here).

When I remove such SASS lines, I have no more parser errors.

tagliala · 2022-09-02T16:58:06Z

@afrz is this problem only related to margin rules?

In other word, does it compile if the multiplication is left as-is in rules like box-shadow?

bootstrap/scss/_accordion.scss

Line 50 in 337068f

    
           box-shadow: inset 0 calc(var(--#{$prefix}accordion-border-width) * -1) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list

pipe2k27 · 2022-09-02T18:22:12Z

Still having the issue. Maps import did not solve. only downgrading to 5.1.3 will make build pass.

pipe2k27 · 2022-09-02T18:23:29Z

We do have a custonBootstrap file where we override default bootstrap and that seems to be the issue. whenever you try to import @import '../../../node_modules/bootstrap/scss/bootstrap'; build will fail

julien-deramond · 2022-09-02T18:32:43Z

Any chance someone can create a live example in Stackblitz that we could test with?

postcss-values-parser returns a syntax error when a negative value is provided in a `calc` function after a CSS variable. This is not an issue with Bootstrap itself, but a workaround to allow projects using postcss-values-parser to keep upgrading and compiling bootstrap Ref: shellscape/postcss-values-parser#138, twbs#35033 Fix: twbs#36851

tagliala · 2022-09-03T07:14:29Z

Hi,

I have a reproducible (not-so-reduced) test case

$ gem install rails -v 6.1.6.1 # If Rails 6.x is not installed. sudo may be needed
$ rails _6.1.6.1_ new syntax-error-webpacker --skip-active-record --skip-javascript # Any 6.1.x will work
$ 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
$ echo "@import \"~bootstrap/scss/bootstrap\";" > app/javascript/packs/application.scss
$ NODE_ENV=production bin/webpack # does not happen in development

Output:

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 38
    at ~/dev/tests/syntax-error-webpacker/app/javascript/packs/application.scss:6:65128
    at Parser.error (~/dev/tests/syntax-error-webpacker/node_modules/postcss-values-parser/lib/parser.js:127:11)
    at Parser.operator (~/dev/tests/syntax-error-webpacker/node_modules/postcss-values-parser/lib/parser.js:162:20)
    at Parser.parseTokens (~/dev/tests/syntax-error-webpacker/node_modules/postcss-values-parser/lib/parser.js:245:14)
    at Parser.loop (~/dev/tests/syntax-error-webpacker/node_modules/postcss-values-parser/lib/parser.js:132:12)
    at Parser.parse (~/dev/tests/syntax-error-webpacker/node_modules/postcss-values-parser/lib/parser.js:51:17)
    at parse (~/dev/tests/syntax-error-webpacker/node_modules/postcss-custom-properties/index.cjs.js:47:30)
    at ~/dev/tests/syntax-error-webpacker/node_modules/postcss-custom-properties/index.cjs.js:333:24
    at ~/dev/tests/syntax-error-webpacker/node_modules/postcss/lib/container.js:194:18
    at ~/dev/tests/syntax-error-webpacker/node_modules/postcss/lib/container.js:139:18
    at Rule.each (~/dev/tests/syntax-error-webpacker/node_modules/postcss/lib/container.js:105:16)
    at Rule.walk (~/dev/tests/syntax-error-webpacker/node_modules/postcss/lib/container.js:135:17)
    at ~/dev/tests/syntax-error-webpacker/node_modules/postcss/lib/container.js:152:24
    at Root.each (~/dev/tests/syntax-error-webpacker/node_modules/postcss/lib/container.js:105:16)
    at Root.walk (~/dev/tests/syntax-error-webpacker/node_modules/postcss/lib/container.js:135:17)
    at Root.walkDecls (~/dev/tests/syntax-error-webpacker/node_modules/postcss/lib/container.js:192:19)
    at transformProperties (~/dev/tests/syntax-error-webpacker/node_modules/postcss-custom-properties/index.cjs.js:330:8)
    at Object.syncTransform [as plugin] (~/dev/tests/syntax-error-webpacker/node_modules/postcss-custom-properties/index.cjs.js:522:5)
    at ~/dev/tests/syntax-error-webpacker/node_modules/postcss-preset-env/index.js:459:97
 @ ./app/javascript/packs/application.scss 2:26-228
 @ multi ./app/javascript/packs/application.js ./app/javascript/packs/application.scss

A draft PR to workaround this issue is available at #37079, but this probably needs a sort of check to prevent addition of new calculations that break postcss-values-parser

julien-deramond · 2022-09-03T08:42:28Z

For future self, need to sudo gem install rails -v 6.1.6.1 as first step.

I confirm that the issue shown in the reproductible steps and that the draft PR fix the compilation (thanks a lot @tagliala for that) so @mdo I'm reopening the issue for further investigations; I need to check why we rollbacked the inversion of negative value multipicators in calc().

tagliala · 2022-09-03T08:46:09Z

Welcome!

For future self, need to sudo gem install rails -v 6.1.6.1 as first step.

Will fix instructions

I need to check why we rollbacked the inversion of negative value multipicators in calc().

Don't know if it is a rollback. Some values are still inverted in v5.2.0 as pointed out in #36851 (comment)

bootstrap/scss/mixins/_grid.scss

Lines 11 to 13 in edf9c40

    
           margin-top: calc(-1 * var(--#{$prefix}gutter-y)); // stylelint-disable-line function-disallowed-list 
        
           margin-right: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list 
        
           margin-left: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list

I wonder why if a custom linter can be implemented to prevent this issue to come back in the future

julien-deramond · 2022-09-03T08:58:30Z

Some modifications linked to the errors in the history:

As you said @tagliala it doesn't seem to be a rollback but rather something we have forgotten along the way or we weren't aware of (authors/reviewers of PRs).
I'll double-check the PR but it seems to fix the issue already.

I wonder why if a custom linter can be implemented to check this problem in advance

Would be great indeed to avoid reintroducing issues that we can't be aware of with our current CI. I don't have any ideas atm on how to do that. Feel free to propose something if you have any idea :)

tagliala · 2022-09-03T09:06:04Z

As far as I can tell, calc($sass-variable * -1) works fine and the problem is only with CSS variables and negative values.

I think this has been involuntarily introduced in 5.2.0 because of the migration to CSS variables. Example from #34622

https://github.com/twbs/bootstrap/pull/34622/files#diff-784199f5a3b8476a11197627a5c80662fb117f6039b7feac1c472f2ed3d04d26R63

Feel free to propose something if you have any idea :)

I only have in mind a regular expression and that is definitely a bad idea prone to false positives :(

afrz · 2022-09-03T17:07:49Z

@afrz is this problem only related to margin rules?

No as you figure it out already I guess :)

As far as I can tell, calc($sass-variable * -1) works fine and the problem is only with CSS variables and negative values.

Yes, it seems the problem is combining calc() with a CSS variable multiplied by negative values.
Reversing the order of the multiplication arguments should do the trick !

Edited : I just saw the PR : Good job 🥇

postcss-values-parser returns a syntax error when a negative value is provided in a `calc` function after a CSS variable. This is not an issue with Bootstrap itself, but a workaround to allow projects using postcss-values-parser to keep upgrading and compiling bootstrap Ref: shellscape/postcss-values-parser#138, #35033 Fix: #36851

pipe2k27 · 2022-09-14T15:38:08Z

This issue has been solved with 5.2.1 Thanks everyone for support and help! much appreciated!

kevinhq · 2023-03-25T10:33:39Z

@pipe2k27

This issue has been solved with 5.2.1 Thanks everyone for support and help! much appreciated!

This is still happening on 5.2.3. Exactly same error when running rake assets:precompile

tagliala · 2023-03-25T11:40:50Z

Hi @kevinhq, I can't confirm

$ gem install rails -v 7.0.4.3 # If Rails 7.x is not installed. sudo may be needed
$ rails _7.0.4.3_ new syntax-error-webpacker --skip-active-record --skip-javascript
$ cd syntax-error-webpacker/
$ echo "{ \"private\": true }" > package.json
$ echo "gem 'webpacker', '5.4.4'" >> Gemfile
$ bundle
$ bundle exec rails webpacker:install
$ yarn add bootstrap @popperjs/core
$ echo "@import \"~bootstrap/scss/bootstrap\";" > app/javascript/packs/application.scss
$ NODE_ENV=production RAILS_ENV=production rails assets:precompile

Output:

Compiling...
Compiled all packs in ~/dev/tests/syntax-error-webpacker/public/packs
Hash: 6c9bb683e16bb72f8e62
Version: webpack 4.46.0
Time: 2545ms
Built at: 03/25/2023 12:27:09 PM
                                        Asset       Size  Chunks                                Chunk Names
       js/application-f94efae3d24600285e6e.js    728 KiB       0  [emitted] [immutable]  [big]  application
    js/application-f94efae3d24600285e6e.js.br   73.6 KiB          [emitted]                     
    js/application-f94efae3d24600285e6e.js.gz    120 KiB          [emitted]                     
   js/application-f94efae3d24600285e6e.js.map    757 KiB       0  [emitted] [dev]               application
js/application-f94efae3d24600285e6e.js.map.br   79.2 KiB          [emitted]                     
js/application-f94efae3d24600285e6e.js.map.gz    127 KiB          [emitted]                     
                                manifest.json  364 bytes          [emitted]                     
                             manifest.json.br  129 bytes          [emitted]                     
                             manifest.json.gz  142 bytes          [emitted]                     
Entrypoint application [big] = js/application-f94efae3d24600285e6e.js js/application-f94efae3d24600285e6e.js.map
[0] multi ./app/javascript/packs/application.js ./app/javascript/packs/application.scss 40 bytes {0} [built]
[1] ./app/javascript/packs/application.js 845 bytes {0} [built]
[2] ./app/javascript/packs/application.scss 664 bytes {0} [built]
[4] ./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 724 KiB {0} [built]
    + 2 hidden modules

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  js/application-f94efae3d24600285e6e.js (728 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  application (728 KiB)
      js/application-f94efae3d24600285e6e.js

I've also a repository that works (but I cannot test on heroku at the moment) https://github.com/diowa/ruby3-rails7-bootstrap-heroku

kevinhq · 2023-03-25T12:27:23Z

You have to include the new maps.scss file. See the blog post for details: https://blog.getbootstrap.com/2022/07/19/bootstrap-5-2-0/.

@tagliala no worry. I just tried this one, and it works. Thanks.

mdo closed this as not planned Won't fix, can't repro, duplicate, stale Jul 27, 2022

ahmadasjad mentioned this issue Aug 1, 2022

Webpack build fails with "SassError: Undefined variable" when updating 5.1.3 -> 5.2.0 #36785

Closed

3 tasks

twbs deleted a comment from tungphan995 Aug 17, 2022

zavan mentioned this issue Sep 1, 2022

[5.4] Can't compile Bootstrap 5.1.1 in production rails/webpacker#3188

Closed

tagliala mentioned this issue Sep 3, 2022

Add workarounds for postcss values parser error #37079

Merged

julien-deramond reopened this Sep 3, 2022

mdo closed this as completed in #37079 Sep 4, 2022

julien-deramond mentioned this issue Sep 4, 2023

CSS: postcss parser error fix #39108

Closed

10 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React Build Fails with 5.2 #36851

React Build Fails with 5.2 #36851

pipe2k27 commented Jul 26, 2022 •

edited

tetuaoro commented Jul 27, 2022 •

edited

mdo commented Jul 27, 2022

ahmadasjad commented Aug 1, 2022

mcmillion commented Aug 15, 2022

mdo commented Aug 16, 2022

afrz commented Aug 18, 2022

tagliala commented Sep 2, 2022

pipe2k27 commented Sep 2, 2022

pipe2k27 commented Sep 2, 2022

julien-deramond commented Sep 2, 2022

tagliala commented Sep 3, 2022 •

edited

julien-deramond commented Sep 3, 2022

tagliala commented Sep 3, 2022 •

edited

julien-deramond commented Sep 3, 2022

tagliala commented Sep 3, 2022 •

edited

afrz commented Sep 3, 2022 •

edited

pipe2k27 commented Sep 14, 2022

kevinhq commented Mar 25, 2023

tagliala commented Mar 25, 2023 •

edited

kevinhq commented Mar 25, 2023

React Build Fails with 5.2 #36851

React Build Fails with 5.2 #36851

Comments

pipe2k27 commented Jul 26, 2022 • edited

Prerequisites

Describe the issue

Reduced test cases

What operating system(s) are you seeing the problem on?

What browser(s) are you seeing the problem on?

What version of Bootstrap are you using?

tetuaoro commented Jul 27, 2022 • edited

mdo commented Jul 27, 2022

ahmadasjad commented Aug 1, 2022

mcmillion commented Aug 15, 2022

mdo commented Aug 16, 2022

afrz commented Aug 18, 2022

tagliala commented Sep 2, 2022

pipe2k27 commented Sep 2, 2022

pipe2k27 commented Sep 2, 2022

julien-deramond commented Sep 2, 2022

tagliala commented Sep 3, 2022 • edited

julien-deramond commented Sep 3, 2022

tagliala commented Sep 3, 2022 • edited

julien-deramond commented Sep 3, 2022

tagliala commented Sep 3, 2022 • edited

afrz commented Sep 3, 2022 • edited

pipe2k27 commented Sep 14, 2022

kevinhq commented Mar 25, 2023

tagliala commented Mar 25, 2023 • edited

kevinhq commented Mar 25, 2023

pipe2k27 commented Jul 26, 2022 •

edited

tetuaoro commented Jul 27, 2022 •

edited

tagliala commented Sep 3, 2022 •

edited

tagliala commented Sep 3, 2022 •

edited

tagliala commented Sep 3, 2022 •

edited

afrz commented Sep 3, 2022 •

edited

tagliala commented Mar 25, 2023 •

edited