Search code examples
ruby-on-railsherokusasswebpacker

ParserError: Syntax Error at line: 1, column 25 - Error compiling sass only when deploying to production or running CI

I am failing to see what is the reason for the compilation error.

Also, it is worth noting that I can run my app locally. ./bin/webpack-dev-server works just fine. Running tests locally also work.

I am out of ideas, specially given I never really understood the ins and outs of webpack and all the transpilation hackery.

ERROR in ./app/javascript/src/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 25
    at /home/runner/work/my_app/my_app/app/javascript/src/application.scss:6:7298
    at Parser.error (/home/runner/work/my_app/my_app/node_modules/postcss-values-parser/lib/parser.js:127:11)
    at Parser.operator (/home/runner/work/my_app/my_app/node_modules/postcss-values-parser/lib/parser.js:162:20)
    at Parser.parseTokens (/home/runner/work/my_app/my_app/node_modules/postcss-values-parser/lib/parser.js:245:14)
    at Parser.loop (/home/runner/work/my_app/my_app/node_modules/postcss-values-parser/lib/parser.js:132:12)
    at Parser.parse (/home/runner/work/my_app/my_app/node_modules/postcss-values-parser/lib/parser.js:51:17)
    at parse (/home/runner/work/my_app/my_app/node_modules/postcss-custom-properties/index.cjs.js:47:30)
    at /home/runner/work/my_app/my_app/node_modules/postcss-custom-properties/index.cjs.js:333:24
    at /home/runner/work/my_app/my_app/node_modules/postcss/lib/container.js:194:18
    at /home/runner/work/my_app/my_app/node_modules/postcss/lib/container.js:139:18
    at Rule.each (/home/runner/work/my_app/my_app/node_modules/postcss/lib/container.js:105:16)
    at Rule.walk (/home/runner/work/my_app/my_app/node_modules/postcss/lib/container.js:135:17)
    at /home/runner/work/my_app/my_app/node_modules/postcss/lib/container.js:152:24
    at Root.each (/home/runner/work/my_app/my_app/node_modules/postcss/lib/container.js:105:16)
    at Root.walk (/home/runner/work/my_app/my_app/node_modules/postcss/lib/container.js:135:17)
    at Root.walkDecls (/home/runner/work/my_app/my_app/node_modules/postcss/lib/container.js:192:19)
    at transformProperties (/home/runner/work/my_app/my_app/node_modules/postcss-custom-properties/index.cjs.js:330:8)
    at /home/runner/work/my_app/my_app/node_modules/webpack/lib/NormalModule.js:316:20
    at /home/runner/work/my_app/my_app/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /home/runner/work/my_app/my_app/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/home/runner/work/my_app/my_app/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /home/runner/work/my_app/my_app/node_modules/postcss-loader/src/index.js:208:9
 @ ./app/javascript/packs/application.js 5:30-62
Solution

  • I just fixed it. I had to comment out a few lines at a time in my sass fieles until I realized bootstrap could not compile. I updated it from version 5.0.0 to version 5.1.3 (latest at the time of this writing) and it fixed it.