search

railsadminteam / rails_admin

RailsAdmin is a Rails engine that provides an easy-to-use interface for managing your data
MIT License
7.88k stars 2.25k forks source link

LexerError: Lexical error on line 1: Unrecognized text. #3565

Closed andreierdoss closed 1 year ago

andreierdoss commented 1 year ago

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

mshibuya commented 1 year ago

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

andreierdoss commented 1 year ago 
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 commented 1 year ago

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

andreierdoss commented 1 year ago

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 commented 1 year ago

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

andreierdoss commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

Having the same issue upgrading from 3.0 to 3.1.0

mshibuya commented 1 year ago

@mjtribble Then could you follow this comment? https://github.com/railsadminteam/rails_admin/issues/3565#issuecomment-1328217022

mjtribble commented 1 year ago

@mshibuya Continuing from the error listed here https://github.com/railsadminteam/rails_admin/issues/3565#issuecomment-1323515910 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 commented 1 year ago

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 https://github.com/FortAwesome/Font-Awesome/issues/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')
   ]
 }