Rails precompile error: syntax Error at line: 1, column 38 for bootstrap import

Question

When running: rake assets:precompile RUBY_ENV=production or when it automatically precompiles for deployment it gets this error message:

/usr/share/rvm/rubies/ruby-2.7.4/lib/ruby/2.7.0/net/protocol.rb:66: warning: already initialized constant Net::ProtocRetryError
/home/tbtonner/.rvm/gems/ruby-2.7.4/gems/net-protocol-0.1.3/lib/net/protocol.rb:68: warning: previous definition of ProtocRetryError was here
/usr/share/rvm/rubies/ruby-2.7.4/lib/ruby/2.7.0/net/protocol.rb:206: warning: already initialized constant Net::BufferedIO::BUFSIZE
/home/tbtonner/.rvm/gems/ruby-2.7.4/gems/net-protocol-0.1.3/lib/net/protocol.rb:208: warning: previous definition of BUFSIZE was here
/usr/share/rvm/rubies/ruby-2.7.4/lib/ruby/2.7.0/net/protocol.rb:503: warning: already initialized constant Net::NetPrivate::Socket
/home/tbtonner/.rvm/gems/ruby-2.7.4/gems/net-protocol-0.1.3/lib/net/protocol.rb:504: warning: previous definition of Socket was here
Compiling...
Compilation failed:
Hash: 0d1853ed830e6c3e5bae
Version: webpack 4.46.0
Time: 3670ms
Built at: 08/22/2022 4:30:23 PM
 3 assets
Entrypoint application = js/application-c19864950abec08bba5f.js js/application-c19864950abec08bba5f.js.map
 [8] ./node_modules/@popperjs/core/lib/dom-utils/listScrollParents.js + 2 modules 1.84 KiB {0} [built]
     |    3 modules
[13] ./node_modules/@popperjs/core/lib/dom-utils/getCompositeRect.js + 5 modules 2.41 KiB {0} [built]
     |    6 modules
[14] ./node_modules/@popperjs/core/lib/dom-utils/getCommonOffsetParent.js + 2 modules 2.74 KiB {0} [built]
     |    3 modules
[15] ./node_modules/@popperjs/core/lib/utils/validateModifiers.js + 1 modules 3.43 KiB {0} [built]
     |    2 modules
[16] ./node_modules/@popperjs/core/lib/dom-utils/addClientRectMargins.js + 1 modules 826 bytes {0} [built]
     |    2 modules
[17] multi ./app/frontend/packs/application.js ./app/frontend/packs/application.scss 40 bytes {0} [built]
[18] ./app/frontend/packs/application.scss 664 bytes {0} [built]
[20] ./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/frontend/packs/application.scss 1.9 KiB {0} [built] [failed] [1 error]
[21] ./app/frontend/packs/application.js + 12 modules 198 KiB {0} [built]
     | ./app/frontend/packs/application.js 899 bytes [built]
     | ./app/frontend/js/bootstrap_js_files.js 402 bytes [built]
     |     + 11 hidden modules
    + 13 hidden modules

ERROR in ./app/frontend/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/frontend/packs/application.scss)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
ParserError: Syntax Error at line: 1, column 38
    at /home/tbtonner/woodvilla/app/frontend/packs/application.scss:6:67385
    at Parser.error (/home/tbtonner/woodvilla/node_modules/postcss-values-parser/lib/parser.js:127:11)
    at Parser.operator (/home/tbtonner/woodvilla/node_modules/postcss-values-parser/lib/parser.js:162:20)
    at Parser.parseTokens (/home/tbtonner/woodvilla/node_modules/postcss-values-parser/lib/parser.js:245:14)
    at Parser.loop (/home/tbtonner/woodvilla/node_modules/postcss-values-parser/lib/parser.js:132:12)
    at Parser.parse (/home/tbtonner/woodvilla/node_modules/postcss-values-parser/lib/parser.js:51:17)
    at parse (/home/tbtonner/woodvilla/node_modules/postcss-custom-properties/index.cjs.js:47:30)
    at /home/tbtonner/woodvilla/node_modules/postcss-custom-properties/index.cjs.js:333:24
    at /home/tbtonner/woodvilla/node_modules/postcss/lib/container.js:194:18
    at /home/tbtonner/woodvilla/node_modules/postcss/lib/container.js:139:18
    at Rule.each (/home/tbtonner/woodvilla/node_modules/postcss/lib/container.js:105:16)
    at Rule.walk (/home/tbtonner/woodvilla/node_modules/postcss/lib/container.js:135:17)
    at /home/tbtonner/woodvilla/node_modules/postcss/lib/container.js:152:24
    at Root.each (/home/tbtonner/woodvilla/node_modules/postcss/lib/container.js:105:16)
    at Root.walk (/home/tbtonner/woodvilla/node_modules/postcss/lib/container.js:135:17)
    at Root.walkDecls (/home/tbtonner/woodvilla/node_modules/postcss/lib/container.js:192:19)
    at transformProperties (/home/tbtonner/woodvilla/node_modules/postcss-custom-properties/index.cjs.js:330:8)
    at Object.syncTransform [as plugin] (/home/tbtonner/woodvilla/node_modules/postcss-custom-properties/index.cjs.js:522:5)
    at /home/tbtonner/woodvilla/node_modules/postcss-preset-env/index.js:459:97
 @ ./app/frontend/packs/application.scss 2:26-228
 @ multi ./app/frontend/packs/application.js ./app/frontend/packs/application.scss 

The line it's pointing to as a syntax error is @import 'bootstrap/dist/css/bootstrap'; in packs/application.scss.

Bootstrap is fully working with rails s and bin/webpack-dev-server running, so I'm unsure why it's throwing a syntax error here when precompiling the assets.

Answer 1

Upgrade bootstrap, better explanation here: https://github.com/rails/webpacker/issues/3188

Answer 2

There's a bug in Bootstrap 5.2.0 that is causing this. I had the exact same error, line 1 col 38.

See this issue and this one. My temporary solution was to downgrade Bootstrap to 5.1.3 while this is not fixed (the problem was patched in 5.1.2 (the first highlight) but is present in 5.2.0).

Edit: This PR fixes it. It should be released with 5.2.1.

Edit2: Bootstrap 5.2.1 is now released and should fix this.