Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bootstrap variant not working with latest bootstrap (5.2.0+) #315

Closed
eoinkelly opened this issue Jul 20, 2022 · 3 comments · Fixed by #320
Closed

Bootstrap variant not working with latest bootstrap (5.2.0+) #315

eoinkelly opened this issue Jul 20, 2022 · 3 comments · Fixed by #320
Labels
bug Something isn't working

Comments

@eoinkelly
Copy link
Contributor

Overview

bootstrap 5.1.3 works fine but bootstrap 5.2.0 fails to rails assets:precompile. This will cause problems for anybody using the bootstrap variant and it will also cause CI to fail for any changes made from now on.

assets:precompile output - click to expand 
Compiling...
Compilation failed:
Hash: 11e9c57b673d9982806c
Version: webpack 4.46.0
Time: 3509ms
Built at: 21/07/2022 9:56:16 am
 3 assets
Entrypoint application = js/application-bbd332414ccc6dcc6e44.js js/application-bbd332414ccc6dcc6e44.js.map
 [9] ./node_modules/@sentry/core/node_modules/@sentry/utils/esm/object.js + 1 modules 13 KiB {0} [built]
     |    2 modules
[13] (webpack)/buildin/global.js 475 bytes {0} [built]
[14] (webpack)/buildin/harmony-module.js 625 bytes {0} [built]
[15] ./node_modules/@sentry/browser/node_modules/@sentry/utils/esm/stacktrace.js + 1 modules 8.65 KiB {0} [built]
     |    2 modules
[27] ./node_modules/@sentry/core/node_modules/@sentry/utils/esm/stacktrace.js + 1 modules 8.65 KiB {0} [built]
     |    2 modules
[32] ./app/frontend/stylesheets/application.scss 3.78 KiB {0} [built] [failed] [1 error]
[33] ./node_modules/@popperjs/core/lib/index.js + 54 modules 72.9 KiB {0} [built]
     |    55 modules
[34] ./app/frontend/packs/application.js + 49 modules 265 KiB {0} [built]
     | ./app/frontend/packs/application.js 2.34 KiB [built]
     | ./app/frontend/js/bootstrap.js 1.38 KiB [built]
     |     + 48 hidden modules
    + 77 hidden modules

ERROR in ./app/frontend/stylesheets/application.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
ParserError: Syntax Error at line: 1, column 38
    at /Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/app/frontend/stylesheets/application.scss:1:65117
    at Parser.error (/Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/postcss-values-parser/lib/parser.js:127:11)
    at Parser.operator (/Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/postcss-values-parser/lib/parser.js:162:20)
    at Parser.parseTokens (/Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/postcss-values-parser/lib/parser.js:245:14)
    at Parser.loop (/Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/postcss-values-parser/lib/parser.js:132:12)
    at Parser.parse (/Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/postcss-values-parser/lib/parser.js:51:17)
    at parse (/Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/postcss-custom-properties/index.cjs.js:47:30)
    at /Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/postcss-custom-properties/index.cjs.js:333:24
    at /Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/postcss-loader/node_modules/postcss/lib/container.js:194:18
    at /Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/postcss-loader/node_modules/postcss/lib/container.js:139:18
    at Rule.each (/Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/postcss-loader/node_modules/postcss/lib/container.js:105:16)
    at Rule.walk (/Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/postcss-loader/node_modules/postcss/lib/container.js:135:17)
    at /Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/postcss-loader/node_modules/postcss/lib/container.js:152:24
    at Root.each (/Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/postcss-loader/node_modules/postcss/lib/container.js:105:16)
    at Root.walk (/Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/postcss-loader/node_modules/postcss/lib/container.js:135:17)
    at Root.walkDecls (/Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/postcss-loader/node_modules/postcss/lib/container.js:192:19)
    at transformProperties (/Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/postcss-custom-properties/index.cjs.js:330:8)
    at Object.syncTransform [as plugin] (/Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/postcss-custom-properties/index.cjs.js:522:5)
    at /Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/postcss-preset-env/index.js:459:97
    at /Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/webpack/lib/NormalModule.js:316:20
    at /Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/postcss-loader/src/index.js:208:9
 @ ./app/frontend/packs/application.js 11:66-106
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-1!node_modules/postcss-loader/src/index.js??ref--6-2!node_modules/sass-loader/dist/cjs.js??ref--6-3!app/frontend/stylesheets/application.scss:
    Entrypoint mini-css-extract-plugin = *
    [0] ./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/stylesheets/application.scss 3.01 KiB {0} [built] [failed] [1 error]
    
    ERROR in ./app/frontend/stylesheets/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/stylesheets/application.scss)
    Module build failed (from ./node_modules/postcss-loader/src/index.js):
    ParserError: Syntax Error at line: 1, column 38
        at /Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/app/frontend/stylesheets/application.scss:1:65117
        at Parser.error (/Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/postcss-values-parser/lib/parser.js:127:11)
        at Parser.operator (/Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/postcss-values-parser/lib/parser.js:162:20)
        at Parser.parseTokens (/Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/postcss-values-parser/lib/parser.js:245:14)
        at Parser.loop (/Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/postcss-values-parser/lib/parser.js:132:12)
        at Parser.parse (/Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/postcss-values-parser/lib/parser.js:51:17)
        at parse (/Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/postcss-custom-properties/index.cjs.js:47:30)
        at /Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/postcss-custom-properties/index.cjs.js:333:24
        at /Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/postcss-loader/node_modules/postcss/lib/container.js:194:18
        at /Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/postcss-loader/node_modules/postcss/lib/container.js:139:18
        at Rule.each (/Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/postcss-loader/node_modules/postcss/lib/container.js:105:16)
        at Rule.walk (/Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/postcss-loader/node_modules/postcss/lib/container.js:135:17)
        at /Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/postcss-loader/node_modules/postcss/lib/container.js:152:24
        at Root.each (/Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/postcss-loader/node_modules/postcss/lib/container.js:105:16)
        at Root.walk (/Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/postcss-loader/node_modules/postcss/lib/container.js:135:17)
        at Root.walkDecls (/Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/postcss-loader/node_modules/postcss/lib/container.js:192:19)
        at transformProperties (/Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/postcss-custom-properties/index.cjs.js:330:8)
        at Object.syncTransform [as plugin] (/Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/postcss-custom-properties/index.cjs.js:522:5)
        at /Users/eoinkelly/Code/repos/rails-template/tmp/builds/tmpl_bootstrap_app/node_modules/postcss-preset-env/index.js:459:97

Cause

The bug is actually in the version of postcss-values-parser used by Webpacker. The bug is definitely in postcss-values-parser v2.0.1 but v6.0.2 is the current version (webpacker pulls in very old version)

This is the postcss-values-parser issue: shellscape/postcss-values-parser#138

There are many changes between 5.1.3 and 5.2.0 - see twbs/bootstrap@v5.1.3...v5.2.0 so I'm not sure which lines are triggering the bug.

bootstrap shipped a partial workaround but it doesn't seem to work - see twbs/bootstrap#35011

Workarounds

If you need bootstrap for a project right now then the easiest fix is to lock to version 5.1.3
for now e.g.

yarn add bootstrap@5.1.3

What next?

Explore if we can update postcss-values-parser in our bundle without updating webpacker. Alternatively perhaps moving to shakapacker would fix this by pulling in more modern dependencies.
robotdana added a commit that referenced this issue Jul 20, 2022
@robotdana
Pin boostrap version
4a9906a 
the new version of bootstrap doesn't play nice with an old version of
postcss-values-parser we're stuck with because webpacker

this is significantly easier than migrating to shakapacker or
jsbundling-rails

see #315
@G-Rath
Copy link
Contributor

G-Rath commented Jul 20, 2022

fwiw I've opened #307 which moves us to shakapacker - so it sounds like if we could get that reviewed and landed it'd solve our problems?

robotdana added a commit that referenced this issue Jul 20, 2022
@robotdana
Pin boostrap version
d588df0 
the new version of bootstrap doesn't play nice with an old version of
postcss-values-parser we're stuck with because webpacker

this is significantly easier than migrating to shakapacker or
jsbundling-rails

see #315
robotdana added a commit that referenced this issue Jul 20, 2022
@robotdana
Pin boostrap version
d6e449f 
the new version of bootstrap doesn't play nice with an old version of
postcss-values-parser we're stuck with because webpacker

this is significantly easier than migrating to shakapacker or
jsbundling-rails

see #315
eoinkelly pushed a commit that referenced this issue Jul 20, 2022
@robotdana
Ensure secret key isn't reused from the one in example.env (#313)
35cec3e 
* Ensure secret key isn't in example.env

fixes: #242

* Add instructions for generating a new key

* Pin boostrap version

the new version of bootstrap doesn't play nice with an old version of
postcss-values-parser we're stuck with because webpacker

this is significantly easier than migrating to shakapacker or
jsbundling-rails

see #315
@eoinkelly
Copy link
Contributor Author

@G-Rath I tested #307 locally and it also has this problem in the bootstrap variant.

I think we should (for now) pin the bootstrap version to 5.1.3. @robotdana has done this as part of #313

@eoinkelly eoinkelly added the bug Something isn't working label Jul 21, 2022
@G-Rath
Copy link
Contributor

G-Rath commented Jul 30, 2022 •
edited
Loading

The OP is now wrong because we're no longer using postcss - instead the error is about missing variables:

ERROR in ./app/frontend/stylesheets/application.scss (./app/frontend/stylesheets/application.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./app/frontend/stylesheets/application.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
    ╷
142 │       values: $utilities-border-colors
    │               ^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules/bootstrap/scss/_utilities.scss 142:15       @import
  app/frontend/stylesheets/customized_bootstrap.scss 27:9  @import
  app/frontend/stylesheets/application.scss 1:9            root stylesheet
SassError: SassError: Undefined variable.

I've opened #320 which should fix this

@G-Rath G-Rath mentioned this issue Jul 30, 2022
Merged
@zavan zavan mentioned this issue Sep 1, 2022
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: import default scss bootstrap maps ackama/rails-template
2 participants
@eoinkelly @G-Rath