Can't run npm run build with react bootstrap + ts + sass

[ikkerens]

Describe the bug

With the latest version, it is not possible to run the build script. It gives a syntax error (see screenshots). The mentioned line and column in the error is consistent irregardless of where the bootstrap import line is.

To Reproduce

Steps to reproduce the behavior:

# 1. Create a basic react typescript template
npx create-react-app my-app --template typescript
# 2. Install react-bootstrap, bootstrap and sass
npm install react-bootstrap@next bootstrap@5.1.0 sass
# 3. Change the template css to scss
mv src/App.css src/App.scss
# 4. Add @import "~bootstrap/scss/bootstrap"; to the top of App.scss
# 5. Change the import from css to scss in App.tsx

Reproducible Example

Cannot reproduce on CodeSandbox, since you can't run builds there (or I'm blind)

Expected behavior

The build script to complete successfully and filling the build folder.

Screenshots

Environment (please complete the following information)

• Operating System: Windows, also tested on Debian Linux
• Browser: Irrelevant
• React-Bootstrap Version: 2.0.0-beta.6

Additional context

Tried talking about this in the Discord channel, at least one other user has the same issue.

[obrunopolo]

I am actually using this setup and it works fine, using webpack to build. Of course, some configuration might be needed.

What I dont do is importing SCSS inside TSX files. SCSS is built separately into CSS files and those files are added to the HTML.

[kyletsang]

Seems like it's caused by the margin values inside make-row in mixins/_grid.scss.

It'll compile if I change this:

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

to this:

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

[frankv12]

Most likely an issue with sass as it does work with node-sass (which is discontinued unfortunately).

[djcolon]

I've been battling this same issue and can confirm that kyletsang's change fixed it for me.
I'll have to write a custom bootstrap import scss for now as a work-around.
The error message (adding as text to be searchable)

./src/App.scss
ParserError: Syntax Error at line: 1, column 25

Was particularly unhelpful.
For reference, I'm on:

• sass@1.42.0
• react-scripts@4.0.3
• bootstrap@5.1.1
• react-bootstrap@2.0.0-beta.6

For anyone else facing this issue, I've implemented the following workaround:

• Replace @import "~bootstrap/scss/bootstrap"; by @import "BootstrapImport"; in App.scss
• Create a file _BootstrapImport.scss next to App.scss, this should be a copy of node_modules/bootstrap/scss/bootstrap.scss
  Replace the line @import "~bootstrap/scss/mixins/grid"; by:

  // Split up the mixins to import our customised grid version.
  @import "~bootstrap/scss/vendor/rfs";
  @import "~bootstrap/scss/mixins/deprecate";
  @import "~bootstrap/scss/mixins/breakpoints";
  @import "~bootstrap/scss/mixins/color-scheme";
  @import "~bootstrap/scss/mixins/image";
  @import "~bootstrap/scss/mixins/resize";
  @import "~bootstrap/scss/mixins/visually-hidden";
  @import "~bootstrap/scss/mixins/reset-text";
  @import "~bootstrap/scss/mixins/text-truncate";
  @import "~bootstrap/scss/mixins/utilities";
  @import "~bootstrap/scss/mixins/alert";
  @import "~bootstrap/scss/mixins/backdrop";
  @import "~bootstrap/scss/mixins/buttons";
  @import "~bootstrap/scss/mixins/caret";
  @import "~bootstrap/scss/mixins/pagination";
  @import "~bootstrap/scss/mixins/lists";
  @import "~bootstrap/scss/mixins/list-group";
  @import "~bootstrap/scss/mixins/forms";
  @import "~bootstrap/scss/mixins/table-variants";
  @import "~bootstrap/scss/mixins/border-radius";
  @import "~bootstrap/scss/mixins/box-shadow";
  @import "~bootstrap/scss/mixins/gradients";
  @import "~bootstrap/scss/mixins/transition";
  @import "~bootstrap/scss/mixins/clearfix";
  @import "~bootstrap/scss/mixins/container";
  //@import "~bootstrap/scss/mixins/grid";
  @import "BootstrapGridMixinOverride";
  

• Create a file _BootstrapGridMixinOverride.scss next to App.scss, this should be a copy of node_modules/bootstrap/scss/mixins/_grid.scss
  In this file replace the contents of make-row as described by @kyletsang

Obviously change filenames/locations to whatever suits you. But this fixed the issue for me without modifying any files in node_modules.

[axelra82]

Can confirm the same issue. Also double checked with steps to reproduce, same problem.

Solution from @kyletsang solves the issue for me as well. We be great if we could get a PR up for this. Seems like a major issue (not being able to build) with a minor change 😃

I'm on the same versions as @djcolon with the exception of react-bootstrap which is on 2.0.0-rc.0

[ikkerens]

Seems like @kyletsang already set up a PR here: twbs/bootstrap#35033
Chances are that when this PR gets merged the fix in this lib is as simple as changing the bootstrap version in your own project.

[kyletsang]

Bootstrap 5.1.2 has been released with the workaround