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

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.

CodePudding user response：

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

CodePudding user response：

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).