LexerError: Lexical error on line 1: Unrecognized text.

[andreierdoss]

Describe the bug
In production (Heroku) assets fail to compile due to a lack of interpolation for an SCSS variable. Locally it compiles without issues. From my research, it seems that the $avatar-size variable should be wrapped in #{} Similar issue was found here.

Reproduction steps
git push heroku master

Expected behavior
Assets should compile with any issues.

Additional context

• rails version: 6
• rails_admin version: 3.1.0
• rails_admin npm package version: 3.1.0
• line code causing the error I noticed that in that file, some variables use interpolation others don't.
• full stack trace (if there's an exception)

remote:        JisonLexerError: Lexical error on line 1: Unrecognized text.
remote:
remote:          Erroneous area:
remote:        1: (40px - $avatar-size) / 2
remote:        ^..........^
remote:            at /tmp/build_0af411aa/css/rails_admin-86279344.css:14:202126
remote:            at Object.parseError (/tmp/build_0af411aa/node_modules/postcss-calc/dist/parser.js:1200:15)
remote:            at Object.lexer_parseError [as parseError] (/tmp/build_0af411aa/node_modules/postcss-calc/dist/parser.js:2333:44)
remote:            at Object.lexer_next [as next] (/tmp/build_0af411aa/node_modules/postcss-calc/dist/parser.js:3328:22)
remote:            at Object.lexer_fastLex [as fastLex] (/tmp/build_0af411aa/node_modules/postcss-calc/dist/parser.js:3403:18)
remote:            at fastLex (/tmp/build_0af411aa/node_modules/postcss-calc/dist/parser.js:1603:27)
remote:            at Parser.parse (/tmp/build_0af411aa/node_modules/postcss-calc/dist/parser.js:1677:30)
remote:            at /tmp/build_0af411aa/node_modules/postcss-calc/dist/lib/transform.js:33:30
remote:            at walk (/tmp/build_0af411aa/node_modules/postcss-calc/node_modules/postcss-value-parser/lib/walk.js:7:16)
remote:            at ValueParser.walk (/tmp/build_0af411aa/node_modules/postcss-calc/node_modules/postcss-value-parser/lib/index.js:18:3)
remote:            at transformValue (/tmp/build_0af411aa/node_modules/postcss-calc/dist/lib/transform.js:24:50)
remote:            at _default (/tmp/build_0af411aa/node_modules/postcss-calc/dist/lib/transform.js:66:100)
remote:            at /tmp/build_0af411aa/node_modules/postcss-calc/dist/index.js:27:32
remote:            at /tmp/build_0af411aa/node_modules/postcss/lib/container.js:135:18
remote:            at Rule.each (/tmp/build_0af411aa/node_modules/postcss/lib/container.js:101:16)
remote:            at Rule.walk (/tmp/build_0af411aa/node_modules/postcss/lib/container.js:131:17)
remote:            at /tmp/build_0af411aa/node_modules/postcss/lib/container.js:148:24
remote:            at Root.each (/tmp/build_0af411aa/node_modules/postcss/lib/container.js:101:16)
remote:            at Root.walk (/tmp/build_0af411aa/node_modules/postcss/lib/container.js:131:17)
remote:            at /tmp/build_0af411aa/node_modules/postcss-calc/dist/index.js:23:9
remote:            at initializePlugin (/tmp/build_0af411aa/node_modules/cssnano/dist/index.js:31:51)

[mshibuya]

Could you find the way to reproduce it locally, not on Heroku? What's the difference?

[andreierdoss]

RAILS_ENV=production rails assets:precompile
yarn install v1.22.19
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
warning Resolution field "jquery@3.5.1" is incompatible with requested version "jquery@^3.6.0"
[3/5] 🚚  Fetching packages...
[4/5] 🔗  Linking dependencies...
warning " > expose-loader@0.7.5" has unmet peer dependency "webpack@^2.0.0 || ^3.0.0 || ^4.0.0".
warning " > webpack-dev-server@3.11.0" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.7.2" has unmet peer dependency "webpack@^4.0.0".
[5/5] 🔨  Building fresh packages...
✨  Done in 3.27s.
Compiling...
Compilation failed:
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
JisonLexerError: Lexical error on line 1: Unrecognized text.

  Erroneous area:
1: (40px - $avatar-size) / 2
^..........^
    at /Users/andrei/Workspace/web/css/rails_admin-22dff549.css:14:202126
    at Object.parseError (/Users/andrei/Workspace/web/node_modules/postcss-calc/dist/parser.js:1200:15)
    at Object.lexer_parseError [as parseError] (/Users/andrei/Workspace/web/node_modules/postcss-calc/dist/parser.js:2333:44)
    at Object.lexer_next [as next] (/Users/andrei/Workspace/web/node_modules/postcss-calc/dist/parser.js:3328:22)
    at Object.lexer_fastLex [as fastLex] (/Users/andrei/Workspace/web/node_modules/postcss-calc/dist/parser.js:3403:18)
    at fastLex (/Users/andrei/Workspace/web/node_modules/postcss-calc/dist/parser.js:1603:27)
    at Parser.parse (/Users/andrei/Workspace/web/node_modules/postcss-calc/dist/parser.js:1677:30)
    at /Users/andrei/Workspace/web/node_modules/postcss-calc/dist/lib/transform.js:33:30
    at walk (/Users/andrei/Workspace/web/node_modules/postcss-calc/node_modules/postcss-value-parser/lib/walk.js:7:16)
    at ValueParser.walk (/Users/andrei/Workspace/web/node_modules/postcss-calc/node_modules/postcss-value-parser/lib/index.js:18:3)
    at transformValue (/Users/andrei/Workspace/web/node_modules/postcss-calc/dist/lib/transform.js:24:50)
    at _default (/Users/andrei/Workspace/web/node_modules/postcss-calc/dist/lib/transform.js:66:100)
    at /Users/andrei/Workspace/web/node_modules/postcss-calc/dist/index.js:27:32
    at /Users/andrei/Workspace/web/node_modules/postcss/lib/container.js:135:18
    at Rule.each (/Users/andrei/Workspace/web/node_modules/postcss/lib/container.js:101:16)
    at Rule.walk (/Users/andrei/Workspace/web/node_modules/postcss/lib/container.js:131:17)
    at /Users/andrei/Workspace/web/node_modules/postcss/lib/container.js:148:24
    at Root.each (/Users/andrei/Workspace/web/node_modules/postcss/lib/container.js:101:16)
    at Root.walk (/Users/andrei/Workspace/web/node_modules/postcss/lib/container.js:131:17)
    at /Users/andrei/Workspace/web/node_modules/postcss-calc/dist/index.js:23:9
    at initializePlugin (/Users/andrei/Workspace/web/node_modules/cssnano/dist/index.js:31:51)

[mshibuya]

Thanks, could you provide your package.json and webpack.config.js ?

[andreierdoss]

package.json

{
  "name": "web",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.13.0",
    "@rails/activestorage": "^6.0.3-1",
    "@rails/ujs": "^6.0.3-1",
    "@rails/webpacker": "5.1.1",
    "@ttskch/select2-bootstrap4-theme": "^1.3.2",
    "bootstrap": "^4.5",
    "bootstrap-datepicker": "^1.9.0",
    "chart.js": "^2.9.3",
    "cocoon": "github:anxgang/cocoon",
    "expose-loader": "^0.7.5",
    "js.cookie": "^0.0.4",
    "popper.js": "^1.16.1",
    "rails_admin": "3.1.0",
    "raty-js": "^2.9.0",
    "select2": "^4.0.13",
    "simple-line-icons": "^2.4.1",
    "trix": "^1.2.3",
    "turbolinks": "^5.2.0"
  },
  "engines": {
    "node": "14.x"
  },
  "resolutions": {
    "jquery": "3.5.1"
  },
  "devDependencies": {
    "webpack-dev-server": "^3.11.0"
  }
}

I couldn't find webpack.config.js, but this is the babel.config.js

module.exports = function(api) {
  var validEnv = ['development', 'test', 'production']
  var currentEnv = api.env()
  var isDevelopmentEnv = api.env('development')
  var isProductionEnv = api.env('production')
  var isTestEnv = api.env('test')

  if (!validEnv.includes(currentEnv)) {
    throw new Error(
      'Please specify a valid `NODE_ENV` or ' +
        '`BABEL_ENV` environment variables. Valid values are "development", ' +
        '"test", and "production". Instead, received: ' +
        JSON.stringify(currentEnv) +
        '.'
    )
  }

  return {
    presets: [
      isTestEnv && [
        '@babel/preset-env',
        {
          targets: {
            node: 'current'
          }
        }
      ],
      (isProductionEnv || isDevelopmentEnv) && [
        '@babel/preset-env',
        {
          forceAllTransforms: true,
          useBuiltIns: 'entry',
          corejs: 3,
          modules: false,
          exclude: ['transform-typeof-symbol']
        }
      ]
    ].filter(Boolean),
    plugins: [
      'babel-plugin-macros',
      '@babel/plugin-syntax-dynamic-import',
      isTestEnv && 'babel-plugin-dynamic-import-node',
      '@babel/plugin-transform-destructuring',
      [
        '@babel/plugin-proposal-class-properties',
        {
          loose: true
        }
      ],
      [
        '@babel/plugin-proposal-object-rest-spread',
        {
          useBuiltIns: true
        }
      ],
      [
        '@babel/plugin-transform-runtime',
        {
          helpers: false,
          regenerator: true,
          corejs: false
        }
      ],
      [
        '@babel/plugin-transform-regenerator',
        {
          async: false
        }
      ]
    ].filter(Boolean)
  }
}

[mshibuya]

Could you try upgrading @rails/webpacker to the latest version?
https://www.npmjs.com/package/@rails/webpacker

[andreierdoss]

I updated @rails/webpacker to 5.4.3 and I ran RAILS_ENV=production rails assets:precompile with the following result:

yarn install v1.22.19
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
warning Resolution field "jquery@3.5.1" is incompatible with requested version "jquery@^3.6.0"
[3/5] 🚚  Fetching packages...
[4/5] 🔗  Linking dependencies...
warning " > expose-loader@0.7.5" has unmet peer dependency "webpack@^2.0.0 || ^3.0.0 || ^4.0.0".
warning " > webpack-dev-server@3.11.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
[5/5] 🔨  Building fresh packages...
✨  Done in 5.07s.
Compiling...
Compilation failed:
Hash: d5b68adba5e784ae40b2
Version: webpack 4.46.0
Time: 25600ms
Built at: 11/22/2022 1:16:40 PM
 34 assets
Entrypoint application = css/application-13615f31.css js/application-9f20a9ba8d5c6d84b7c9.js js/application-9f20a9ba8d5c6d84b7c9.js.map
Entrypoint dashboard = js/dashboard-a61d25bd8f53cf308351.js js/dashboard-a61d25bd8f53cf308351.js.map
Entrypoint rails_admin = js/rails_admin-7d5ba8e9b8fccef5d347.js js/rails_admin-7d5ba8e9b8fccef5d347.js.map
 [23] ./node_modules/@popperjs/core/lib/createPopper.js + 6 modules 14.5 KiB {3} [built]
      |    7 modules
 [24] (webpack)/buildin/global.js 474 bytes {1} {3} [built]
[201] multi ./app/webpacker/packs/application.js ./app/webpacker/packs/application.scss 40 bytes {1} [built]
[202] ./app/webpacker/packs/application.js 1.19 KiB {1} [built]
[213] ./app/webpacker/src/javascripts/cocoon.js 96 bytes {1} [built]
[214] ./app/webpacker/src/javascripts/helpers.js 760 bytes {1} [built]
[215] ./app/webpacker/src/javascripts/gdpr.js 1.46 KiB {1} [built]
[217] ./app/webpacker/src/javascripts/rater.js 62 bytes {1} [built]
[219] ./app/webpacker/packs/application.scss 39 bytes {1} [built]
[220] ./app/webpacker/packs/dashboard.js 1.3 KiB {2} [built]
[221] (webpack)/buildin/module.js 547 bytes {2} [built]
[222] ./node_modules/moment/locale sync ^\.\/.*$ 3.13 KiB {2} [optional] [built]
[223] ./app/webpacker/packs/rails_admin.js 85 bytes {3} [built]
[240] ./app/webpacker/src/stylesheets/rails_admin.scss 2.76 KiB {3} [built] [failed] [1 error]
[241] ./node_modules/@hotwired/turbo-rails/app/javascript/turbo/index.js + 5 modules 131 KiB {3} [built]
      |    6 modules
    + 234 hidden modules

ERROR in ./app/webpacker/src/stylesheets/rails_admin.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 30
    at /Users/andrei/Workspace/web/app/webpacker/src/stylesheets/rails_admin.scss:9:1271
    at Parser.error (/Users/andrei/Workspace/web/node_modules/postcss-values-parser/lib/parser.js:127:11)
    at Parser.operator (/Users/andrei/Workspace/web/node_modules/postcss-values-parser/lib/parser.js:162:20)
    at Parser.parseTokens (/Users/andrei/Workspace/web/node_modules/postcss-values-parser/lib/parser.js:245:14)
    at Parser.loop (/Users/andrei/Workspace/web/node_modules/postcss-values-parser/lib/parser.js:132:12)
    at Parser.parse (/Users/andrei/Workspace/web/node_modules/postcss-values-parser/lib/parser.js:51:17)
    at parse (/Users/andrei/Workspace/web/node_modules/postcss-custom-properties/index.cjs.js:47:30)
    at /Users/andrei/Workspace/web/node_modules/postcss-custom-properties/index.cjs.js:333:24
    at /Users/andrei/Workspace/web/node_modules/postcss/lib/container.js:190:18
    at /Users/andrei/Workspace/web/node_modules/postcss/lib/container.js:135:18
    at Rule.each (/Users/andrei/Workspace/web/node_modules/postcss/lib/container.js:101:16)
    at Rule.walk (/Users/andrei/Workspace/web/node_modules/postcss/lib/container.js:131:17)
    at /Users/andrei/Workspace/web/node_modules/postcss/lib/container.js:148:24
    at Root.each (/Users/andrei/Workspace/web/node_modules/postcss/lib/container.js:101:16)
    at Root.walk (/Users/andrei/Workspace/web/node_modules/postcss/lib/container.js:131:17)
    at Root.walkDecls (/Users/andrei/Workspace/web/node_modules/postcss/lib/container.js:188:19)
    at transformProperties (/Users/andrei/Workspace/web/node_modules/postcss-custom-properties/index.cjs.js:330:8)
    at Object.syncTransform [as plugin] (/Users/andrei/Workspace/web/node_modules/postcss-custom-properties/index.cjs.js:522:5)
    at /Users/andrei/Workspace/web/node_modules/postcss-preset-env/index.js:443:97
    at /Users/andrei/Workspace/web/node_modules/webpack/lib/NormalModule.js:316:20
    at /Users/andrei/Workspace/web/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/andrei/Workspace/web/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/andrei/Workspace/web/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/andrei/Workspace/web/node_modules/postcss-loader/src/index.js:208:9
 @ ./app/webpacker/packs/rails_admin.js 1:41-85
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/webpacker/packs/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/webpacker/packs/application.scss 1.11 MiB {0} [built]
        + 22 hidden modules
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/webpacker/src/stylesheets/rails_admin.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/webpacker/src/stylesheets/rails_admin.scss 2.17 KiB {0} [built] [failed] [1 error]

    ERROR in ./app/webpacker/src/stylesheets/rails_admin.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/webpacker/src/stylesheets/rails_admin.scss)
    Module build failed (from ./node_modules/postcss-loader/src/index.js):
    ParserError: Syntax Error at line: 1, column 30
        at /Users/andrei/Workspace/web/app/webpacker/src/stylesheets/rails_admin.scss:9:1271
        at Parser.error (/Users/andrei/Workspace/web/node_modules/postcss-values-parser/lib/parser.js:127:11)
        at Parser.operator (/Users/andrei/Workspace/web/node_modules/postcss-values-parser/lib/parser.js:162:20)
        at Parser.parseTokens (/Users/andrei/Workspace/web/node_modules/postcss-values-parser/lib/parser.js:245:14)
        at Parser.loop (/Users/andrei/Workspace/web/node_modules/postcss-values-parser/lib/parser.js:132:12)
        at Parser.parse (/Users/andrei/Workspace/web/node_modules/postcss-values-parser/lib/parser.js:51:17)
        at parse (/Users/andrei/Workspace/web/node_modules/postcss-custom-properties/index.cjs.js:47:30)
        at /Users/andrei/Workspace/web/node_modules/postcss-custom-properties/index.cjs.js:333:24
        at /Users/andrei/Workspace/web/node_modules/postcss/lib/container.js:190:18
        at /Users/andrei/Workspace/web/node_modules/postcss/lib/container.js:135:18
        at Rule.each (/Users/andrei/Workspace/web/node_modules/postcss/lib/container.js:101:16)
        at Rule.walk (/Users/andrei/Workspace/web/node_modules/postcss/lib/container.js:131:17)
        at /Users/andrei/Workspace/web/node_modules/postcss/lib/container.js:148:24
        at Root.each (/Users/andrei/Workspace/web/node_modules/postcss/lib/container.js:101:16)
        at Root.walk (/Users/andrei/Workspace/web/node_modules/postcss/lib/container.js:131:17)
        at Root.walkDecls (/Users/andrei/Workspace/web/node_modules/postcss/lib/container.js:188:19)
        at transformProperties (/Users/andrei/Workspace/web/node_modules/postcss-custom-properties/index.cjs.js:330:8)
        at Object.syncTransform [as plugin] (/Users/andrei/Workspace/web/node_modules/postcss-custom-properties/index.cjs.js:522:5)
        at /Users/andrei/Workspace/web/node_modules/postcss-preset-env/index.js:443:97


DEPRECATION WARNING: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(20em, 16) or calc(20em / 16)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
12 │ $fa-fw-width:          (20em / 16);
   │                         ^^^^^^^^^
   ╵
    node_modules/@fortawesome/fontawesome-free/scss/_variables.scss 12:25  @import
    node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss 5:9   @import
    app/webpacker/packs/application.scss 2:9                               root stylesheet

DEPRECATION WARNING: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(4em, 3) or calc(4em / 3)

More info and automated migrator: https://sass-lang.com/d/slash-div

  ╷
6 │   font-size: (4em / 3);
  │               ^^^^^^^
  ╵
    node_modules/@fortawesome/fontawesome-free/scss/_larger.scss 6:15     @import
    node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss 8:9  @import
    app/webpacker/packs/application.scss 2:9                              root stylesheet

DEPRECATION WARNING: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(3em, 4) or calc(3em / 4)

More info and automated migrator: https://sass-lang.com/d/slash-div

  ╷
7 │   line-height: (3em / 4);
  │                 ^^^^^^^
  ╵
    node_modules/@fortawesome/fontawesome-free/scss/_larger.scss 7:17     @import
    node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss 8:9  @import
    app/webpacker/packs/application.scss 2:9                              root stylesheet

DEPRECATION WARNING: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($fa-li-width * 5, 4) or calc($fa-li-width * 5 / 4)

More info and automated migrator: https://sass-lang.com/d/slash-div

  ╷
6 │   margin-left: $fa-li-width * 5/4;
  │                ^^^^^^^^^^^^^^^^^^
  ╵
    node_modules/@fortawesome/fontawesome-free/scss/_list.scss 6:16        @import
    node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss 10:9  @import
    app/webpacker/packs/application.scss 2:9                               root stylesheet

DEPRECATION WARNING: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 2) or calc($spacer / 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
308 │ $headings-margin-bottom:      $spacer / 2 !default;
    │                               ^^^^^^^^^^^
    ╵
    node_modules/bootstrap/scss/_variables.scss 308:31  @import
    node_modules/bootstrap/scss/bootstrap.scss 9:9      @import
    app/webpacker/packs/application.scss 14:9           root stylesheet

WARNING: 70 repetitive deprecation warnings omitted.

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
DEPRECATION WARNING: $weight: Passing a number without unit % (100) is deprecated.

To preserve current behavior: $weight * 1%

More info: https://sass-lang.com/d/function-units

    ╷
201 │   @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100);
    │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    node_modules/rails_admin/node_modules/bootstrap/scss/_functions.scss 201:11            opaque()
    node_modules/rails_admin/node_modules/bootstrap/scss/mixins/_table-variants.scss 4:28  table-variant()
    node_modules/rails_admin/node_modules/bootstrap/scss/_tables.scss 147:3                @import
    node_modules/rails_admin/node_modules/bootstrap/scss/bootstrap.scss 20:9               @import
    node_modules/rails_admin/src/rails_admin/styles/base.scss 20:9                         @import
    app/webpacker/src/stylesheets/rails_admin.scss 1:9                                     root stylesheet

[mshibuya]

What do you have in config/webpacker.yml and app/webpacker/src/stylesheets/rails_admin.scss ?

Sorry for asking many questions, but I can't reproduce this. If you can reproduce by using dummy_app it'll be easier for me to track down the cause.

[andreierdoss]

This is the config/webpacker.yml

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/webpacker
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  check_yarn_integrity: false
  webpack_compile_output: true

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  # Extract and emit a css file
  extract_css: false

  static_assets_extensions:
    - .jpg
    - .jpeg
    - .png
    - .gif
    - .tiff
    - .ico
    - .svg
    - .eot
    - .otf
    - .ttf
    - .woff
    - .woff2

  extensions:
    - .mjs
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: true

  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
  check_yarn_integrity: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    pretty: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: '**/node_modules/**'


test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true

and this is app/webpacker/src/stylesheets/rails_admin.scss

@import "rails_admin/src/rails_admin/styles/base";

[mshibuya]

Still unreproducible by using package.json and webpacker.yaml you provided.
Please try yarn upgrade, and if it doesn't work could you upload your yarn.lock as an attachment?

[mjtribble]

Having the same issue upgrading from 3.0 to 3.1.0

[mshibuya]

@mjtribble Then could you follow this comment?
#3565 (comment)

[mjtribble]

@mshibuya Continuing from the error listed here #3565 (comment) after rails asset:precompile

...
Compiling...
Compilation failed:
Hash: d8eee1e158633aa62f91
Version: webpack 4.46.0
Time: 8360ms
Built at: 11/29/2022 3:15:02 PM
 7 assets
Entrypoint application = js/application-bb5ae4dee5c094a5130f.js js/application-bb5ae4dee5c094a5130f.js.map
Entrypoint rails_admin = js/rails_admin-12e6e988d08cca291290.js js/rails_admin-12e6e988d08cca291290.js.map
[15] ./app/javascript/packs/application.js 480 bytes {1} [built]
[16] ./app/javascript/channels/index.js 205 bytes {1} [built]
[17] ./app/javascript/channels sync _channel\.js$ 160 bytes {1} [built]
[25] ./app/javascript/stylesheets/rails_admin.scss 664 bytes {2} [built]
[27] ./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/javascript/stylesheets/rails_admin.scss 2.72 KiB {2} [built] [failed] [1 error]
[28] ./app/javascript/packs/rails_admin.js + 81 modules 493 KiB {2} [built]
     | ./app/javascript/packs/rails_admin.js 81 bytes [built]
     |     + 81 hidden modules
[31] ./node_modules/@hotwired/turbo-rails/node_modules/@rails/actioncable/src/index.js + 9 modules 20.6 KiB {0} [built]
     |    10 modules
    + 26 hidden modules

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

config/webpacker.yml

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  webpack_compile_output: true

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  additional_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  # Extract and emit a css file
  extract_css: false

  static_assets_extensions:
    - .jpg
    - .jpeg
    - .png
    - .gif
    - .tiff
    - .ico
    - .svg
    - .eot
    - .otf
    - .ttf
    - .woff
    - .woff2

  extensions:
    - .mjs
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    pretty: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: '**/node_modules/**'


test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

staging:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true

package.json

{
 "dependencies": {
   "@rails/actioncable": "^6.0.0",
   "@rails/activestorage": "^6.0.0",
   "@rails/ujs": "^6.0.0",
   "@rails/webpacker": "5.4.2",
   "rails_admin": "3.1.0",
   "turbolinks": "^5.2.0",
   "webpack": "^4.46.0",
   "webpack-cli": "^3.3.12"
 },
 "version": "0.1.0",
 "devDependencies": {
   "webpack-dev-server": "^4.2.0"
 }
}

yarn.lock

[mshibuya]

Let me summarize here.

The original issue

JisonLexerError: Lexical error on line 1: Unrecognized text.

  Erroneous area:
1: (40px - $avatar-size) / 2
^..........^
    at /Users/andrei/Workspace/web/css/rails_admin-22dff549.css:14:202126

seems to be fixed by upgrading dependencies, so I won't go into details now.

And for the second one,

ParserError: Syntax Error at line: 1, column 30
    at /Users/andrei/Workspace/web/app/webpacker/src/stylesheets/rails_admin.scss:9:1271
    at Parser.error (/Users/andrei/Workspace/web/node_modules/postcss-values-parser/lib/parser.js:127:11)

I struggled a bit to reproduce but finally I could. This happens only with the combination of Font-Awesome 6.x and postcss-preset-env(Webpacker uses it by default). RailsAdmin 3.1.0 switched its FontAwesome dependency from 5.x to 6.x, so Webpacker users are facing this issue upon RailsAdmin 3.1.0 upgrade.

The issue is tracked in Font-Awesome side as FortAwesome/Font-Awesome#18899, but seeing no progress as of now. postcss-values-parser already has the fix in place, but it's impossible to use it since the webpacker npm package is locked against the older version.

So the solution here is one of following:

1. Downgrade Font-Awesome to 5.x by adding a resolutions field to package.json

      "devDependencies": {
        "webpack-dev-server": "^4.2.0"
   +  },
   +  "resolutions": {
   +    "rails_admin/@fortawesome/fontawesome-free": "^5.15.0"
      }
    }

2. Use the patched version of Font-Awesome, by putting this into package.json

     "resolutions": {
       "@fortawesome/fontawesome-free": "git+https://github.com/mshibuya/Font-Awesome#postcss-workaround"
     }
   

3. Upgrade to shakapacker , the successor of Webpacker which allows you to have newer postcss dependency

4. Stop using postcss-preset-env altogether by editing postcss.config.js like

    module.exports = {
      plugins: [
        require('postcss-import'),
   -    require('postcss-flexbugs-fixes'),
   -    require('postcss-preset-env')({
   -      autoprefixer: {
   -        flexbox: 'no-2009'
   -      },
   -      stage: 3
   -    })
   +    require('postcss-flexbugs-fixes')
      ]
    }