search

rmosolgo / graphiql-rails

Mount the GraphiQL query editor in a Rails app
MIT License
447 stars 135 forks source link

Build issue when bumping graphiql-rails from 1.8.0 to 1.9.0 #106

Closed eddiecheung-shopify closed 7 months ago

eddiecheung-shopify commented 1 year ago

Issue

When our repo bumping graphiql-rails from 1.8.0 to 1.9.0, we experience the following issue:


Downloaded schema cache identity_graph/schema_cache.yml
--
  | W, [2023-03-15T16:25:35.087838 #213]  WARN -- : Removed sourceMappingURL comment for missing asset 'graphiql/rails/graphiql.js.map' from /artifacts/bundle/ruby/3.2.0/gems/graphiql-rails-1.9.0/app/assets/javascripts/graphiql/rails/graphiql-2.4.0.js
  | rake aborted!
  | SassC::SyntaxError: Error: Function hsla is missing argument $lightness.
  | on line 342 of stdin
  | >> nt-tooltip,reach-portal):is(button){color:hsla(var(--color-neutral),1);font-
  | ------------------------------------------^
  | stdin:342
  | /artifacts/bundle/ruby/3.2.0/gems/sassc-2.4.0/lib/sassc/engine.rb:50:in `render'
  | /artifacts/bundle/ruby/3.2.0/gems/sassc-rails-2.1.2/lib/sassc/rails/compressor.rb:29:in `call'
  | /artifacts/bundle/ruby/3.2.0/gems/sprockets-4.2.0/lib/sprockets/sass_compressor.rb:30:in `call'
  | /artifacts/bundle/ruby/3.2.0/gems/sprockets-4.2.0/lib/sprockets/processor_utils.rb:84:in `call_processor'
  | /artifacts/bundle/ruby/3.2.0/gems/sprockets-4.2.0/lib/sprockets/processor_utils.rb:66:in `block in call_processors'
  | /artifacts/bundle/ruby/3.2.0/gems/sprockets-4.2.0/lib/sprockets/processor_utils.rb:65:in `reverse_each'
  | /artifacts/bundle/ruby/3.2.0/gems/sprockets-4.2.0/lib/sprockets/processor_utils.rb:65:in `call_processors'
  | /artifacts/bundle/ruby/3.2.0/gems/sprockets-4.2.0/lib/sprockets/loader.rb:182:in `load_from_unloaded'
  | /artifacts/bundle/ruby/3.2.0/gems/sprockets-4.2.0/lib/sprockets/loader.rb:59:in `block in load'
  | /artifacts/bundle/ruby/3.2.0/gems/sprockets-4.2.0/lib/sprockets/loader.rb:337:in `fetch_asset_from_dependency_cache'
  | /artifacts/bundle/ruby/3.2.0/gems/sprockets-4.2.0/lib/sprockets/loader.rb:43:in `load'
  | /artifacts/bundle/ruby/3.2.0/gems/sprockets-4.2.0/lib/sprockets/cached_environment.rb:44:in `block in load'
  | /artifacts/bundle/ruby/3.2.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/map.rb:207:in `block in fetch_or_store'
  | /artifacts/bundle/ruby/3.2.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/map.rb:187:in `fetch'
  | /artifacts/bundle/ruby/3.2.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/map.rb:206:in `fetch_or_store'
  | /artifacts/bundle/ruby/3.2.0/gems/sprockets-4.2.0/lib/sprockets/cached_environment.rb:44:in `load'
  | /artifacts/bundle/ruby/3.2.0/gems/sprockets-4.2.0/lib/sprockets/base.rb:81:in `find_asset'
  | /artifacts/bundle/ruby/3.2.0/gems/sprockets-4.2.0/lib/sprockets/base.rb:88:in `find_all_linked_assets'
  | /artifacts/bundle/ruby/3.2.0/gems/sprockets-4.2.0/lib/sprockets/manifest.rb:125:in `each'
  | /artifacts/bundle/ruby/3.2.0/gems/sprockets-4.2.0/lib/sprockets/manifest.rb:125:in `to_a'
  | /artifacts/bundle/ruby/3.2.0/gems/sprockets-4.2.0/lib/sprockets/manifest.rb:125:in `block (2 levels) in find'
  | /artifacts/bundle/ruby/3.2.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/executor/safe_task_executor.rb:24:in `block in execute'
  | /artifacts/bundle/ruby/3.2.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/synchronization/mutex_lockable_object.rb:48:in `block in synchronize'
  | /artifacts/bundle/ruby/3.2.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/synchronization/mutex_lockable_object.rb:48:in `synchronize'
  | /artifacts/bundle/ruby/3.2.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/synchronization/mutex_lockable_object.rb:48:in `synchronize'
  | /artifacts/bundle/ruby/3.2.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/executor/safe_task_executor.rb:22:in `execute'
  | /artifacts/bundle/ruby/3.2.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/promise.rb:564:in `block in realize'
  | /artifacts/bundle/ruby/3.2.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/executor/ruby_thread_pool_executor.rb:352:in `run_task'
  | /artifacts/bundle/ruby/3.2.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/executor/ruby_thread_pool_executor.rb:343:in `block (3 levels) in create_worker'
  | /artifacts/bundle/ruby/3.2.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/executor/ruby_thread_pool_executor.rb:334:in `loop'
  | /artifacts/bundle/ruby/3.2.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/executor/ruby_thread_pool_executor.rb:334:in `block (2 levels) in create_worker'
  | /artifacts/bundle/ruby/3.2.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/executor/ruby_thread_pool_executor.rb:333:in `catch'
  | /artifacts/bundle/ruby/3.2.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/executor/ruby_thread_pool_executor.rb:333:in `block in create_worker'

What should we do in order to resolve this build issue? Thanks

sirion1987 commented 1 year ago

I have another kind of error when config.assets.js_compressor is set to Uglifier.new(harmony: true):

Uglifier::Error: Unexpected token name «await», expected punc «(»
  (in /usr/share/rvm/gems/ruby-2.4.6/gems/graphiql-rails-1.9.0/app/assets/javascripts/graphiql/rails/application.js)
/usr/share/rvm/gems/ruby-2.4.6/gems/uglifier-4.1.20/lib/uglifier.rb:234:in `parse_result'
/usr/share/rvm/gems/ruby-2.4.6/gems/uglifier-4.1.20/lib/uglifier.rb:216:in `run_uglifyjs'
/usr/share/rvm/gems/ruby-2.4.6/gems/uglifier-4.1.20/lib/uglifier.rb:168:in `compile'
/usr/share/rvm/gems/ruby-2.4.6/gems/sprockets-2.12.5/lib/sprockets/compressing.rb:63:in `block (2 levels) in js_compressor='
/usr/share/rvm/gems/ruby-2.4.6/gems/sprockets-2.12.5/lib/sprockets/processor.rb:29:in `evaluate'
/usr/share/rvm/gems/ruby-2.4.6/gems/tilt-1.4.1/lib/tilt/template.rb:103:in `render'
/usr/share/rvm/gems/ruby-2.4.6/gems/sprockets-2.12.5/lib/sprockets/context.rb:197:in `block in evaluate'
/usr/share/rvm/gems/ruby-2.4.6/gems/sprockets-2.12.5/lib/sprockets/context.rb:194:in `each'
/usr/share/rvm/gems/ruby-2.4.6/gems/sprockets-2.12.5/lib/sprockets/context.rb:194:in `evaluate'
/usr/share/rvm/gems/ruby-2.4.6/gems/sprockets-2.12.5/lib/sprockets/bundled_asset.rb:25:in `initialize'
/usr/share/rvm/gems/ruby-2.4.6/gems/sprockets-2.12.5/lib/sprockets/base.rb:377:in `new'
/usr/share/rvm/gems/ruby-2.4.6/gems/sprockets-2.12.5/lib/sprockets/base.rb:377:in `build_asset'
/usr/share/rvm/gems/ruby-2.4.6/gems/sprockets-2.12.5/lib/sprockets/index.rb:94:in `block in build_asset'
/usr/share/rvm/gems/ruby-2.4.6/gems/sprockets-2.12.5/lib/sprockets/caching.rb:58:in `cache_asset'
/usr/share/rvm/gems/ruby-2.4.6/gems/sprockets-2.12.5/lib/sprockets/index.rb:93:in `build_asset'
/usr/share/rvm/gems/ruby-2.4.6/gems/sprockets-2.12.5/lib/sprockets/base.rb:287:in `find_asset'
/usr/share/rvm/gems/ruby-2.4.6/gems/sprockets-2.12.5/lib/sprockets/index.rb:61:in `find_asset'
/usr/share/rvm/gems/ruby-2.4.6/gems/sprockets-2.12.5/lib/sprockets/manifest.rb:211:in `block in find_asset'
/usr/share/rvm/gems/ruby-2.4.6/gems/sprockets-2.12.5/lib/sprockets/manifest.rb:257:in `benchmark'
/usr/share/rvm/gems/ruby-2.4.6/gems/sprockets-2.12.5/lib/sprockets/manifest.rb:210:in `find_asset'
/usr/share/rvm/gems/ruby-2.4.6/gems/sprockets-2.12.5/lib/sprockets/manifest.rb:119:in `block in compile'
/usr/share/rvm/gems/ruby-2.4.6/gems/sprockets-2.12.5/lib/sprockets/manifest.rb:118:in `each'
/usr/share/rvm/gems/ruby-2.4.6/gems/sprockets-2.12.5/lib/sprockets/manifest.rb:118:in `compile'
/usr/share/rvm/gems/ruby-2.4.6/gems/sprockets-rails-2.3.3/lib/sprockets/rails/task.rb:70:in `block (3 levels) in define'
/usr/share/rvm/gems/ruby-2.4.6/gems/sprockets-2.12.5/lib/rake/sprocketstask.rb:146:in `with_logger'
/usr/share/rvm/gems/ruby-2.4.6/gems/sprockets-rails-2.3.3/lib/sprockets/rails/task.rb:69:in `block (2 levels) in define'
/usr/share/rvm/gems/ruby-2.4.6/gems/appsignal-3.1.3/lib/appsignal/integrations/rake.rb:7:in `execute'
/usr/share/rvm/gems/ruby-2.4.6/gems/rake-12.3.3/exe/rake:27:in `<top (required)>'
/usr/share/rvm/gems/ruby-2.4.6/bin/ruby_executable_hooks:24:in `eval'
/usr/share/rvm/gems/ruby-2.4.6/bin/ruby_executable_hooks:24:in `<main>'

How to get the error:

pry(main)> Uglifier.compile(File.read('~/.asdf/installs/ruby/2.4.6/lib/ruby/gems/2.4.0/gems/graphiql-rails-1.9.0/app/assets/javascripts/graphiql/rails/graphiql-2.4.0.js'), harmony: true)
Uglifier::Error: Unexpected token name «await», expected punc «(»
--
 115       }
 116       return returnValue;
 117     };
 118     return asyncIterableIterator;
 119   };
 120   function applyAsyncIterableIteratorToSink(asyncIterableIterator, sink) {
 121     const run = async () => {
 122       try {
  =>         for await (const value of asyncIterableIterator) {
 124           sink.next(value);
 125         }
 126         sink.complete();
 127       } catch (err) {
 128         sink.error(err);
 129       }
 130     };
 131     run();
==
from ~/.asdf/installs/ruby/2.4.6/lib/ruby/gems/2.4.0/gems/uglifier-4.1.20/lib/uglifier.rb:234:in `parse_result'
About your application's environment
Rails version             4.2.11.1
Ruby version            2.4.6-p354 (x86_64-darwin22)
RubyGems version  2.6.14.4
Rack version            1.6.13
JavaScript Runtime Node.js (V8)

uglifier v4.1.20

As suggested in this thread Uglifier doen't support async/await.

When the compressor is set to :uglifier i get this error:

Sass::SyntaxError: Invalid CSS after "...,reach-portal{-": expected number or function, was "-color-primary:..."
denisahearn commented 1 year ago

@sirion1987 We got the same Uglifier::Error: Unexpected token name «await», expected punc «(» after upgrading to graphiql 1.9.0, and were able to work around it by switching to terser-ruby for JavaScript compression.

However, we are now getting the same SassC::SyntaxError: Error: Function hsla is missing argument $lightness. error reported by this issue, and haven't found a solution to that yet.

sirion1987 commented 1 year ago

@denisahearn I resolved by installing graphiql via package.json and serving the GraphiQL component with webpacker. I think it's the only fastest way :/

// package.json
// yarn add graphiql graphql graphql-ws

+    "graphiql": "^2.4.1",
+    "graphql": "^16.6.0",
+    "graphql-ws": "^5.12.1"
# app/controllers/admin/graphiql_controller.rb

class Admin::GraphiqlController < Admin::BaseController
  def index
  end
en
// app/views/admin/graphiql/index.html.slim

= javascript_pack_tag "graphiql_editor"

#graphiql_editor
// app/javascript/packs/graphiql_editor.js

import 'graphiql/graphiql'

import { GraphiQL } from 'graphiql'
import React from 'react'
import ReactDOM from 'react-dom'
import { createGraphiQLFetcher } from '@graphiql/toolkit'

const fetcher = createGraphiQLFetcher({
  'url': `${window.location.origin}/graphql`
})

const GraphiQlCustomCompoment = () => {
  return (
    <GraphiQL
      fetcher={fetcher}
      isHeadersEditorEnabled={true}
    >
      <GraphiQL.Logo>
        <a
          className="graphiql-logo-link"
          href={window.location.origin}
        >
          CustomLogo
        </a>
      </GraphiQL.Logo>
    </GraphiQL>
  )
}

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <GraphiQlCustomCompoment />,
    document.getElementById('graphiql-editor')
  )
})

I know, it's the worst comment of all time but the production can't wait 😭

alexisbronchart commented 1 year ago

Issue

When our repo bumping graphiql-rails from 1.8.0 to 1.9.0, we experience the following issue:


Downloaded schema cache identity_graph/schema_cache.yml
--
  | W, [2023-03-15T16:25:35.087838 #213]  WARN -- : Removed sourceMappingURL comment for missing asset 'graphiql/rails/graphiql.js.map' from /artifacts/bundle/ruby/3.2.0/gems/graphiql-rails-1.9.0/app/assets/javascripts/graphiql/rails/graphiql-2.4.0.js
  | rake aborted!
  | SassC::SyntaxError: Error: Function hsla is missing argument $lightness.
  | on line 342 of stdin
  | >> nt-tooltip,reach-portal):is(button){color:hsla(var(--color-neutral),1);font-
  | ------------------------------------------^
  | stdin:342
  | /artifacts/bundle/ruby/3.2.0/gems/sassc-2.4.0/lib/sassc/engine.rb:50:in `render'
  | /artifacts/bundle/ruby/3.2.0/gems/sassc-rails-2.1.2/lib/sassc/rails/compressor.rb:29:in `call'
  | /artifacts/bundle/ruby/3.2.0/gems/sprockets-4.2.0/lib/sprockets/sass_compressor.rb:30:in `call'
  | /artifacts/bundle/ruby/3.2.0/gems/sprockets-4.2.0/lib/sprockets/processor_utils.rb:84:in `call_processor'
  | /artifacts/bundle/ruby/3.2.0/gems/sprockets-4.2.0/lib/sprockets/processor_utils.rb:66:in `block in call_processors'
  | /artifacts/bundle/ruby/3.2.0/gems/sprockets-4.2.0/lib/sprockets/processor_utils.rb:65:in `reverse_each'
  | /artifacts/bundle/ruby/3.2.0/gems/sprockets-4.2.0/lib/sprockets/processor_utils.rb:65:in `call_processors'
  | /artifacts/bundle/ruby/3.2.0/gems/sprockets-4.2.0/lib/sprockets/loader.rb:182:in `load_from_unloaded'
  | /artifacts/bundle/ruby/3.2.0/gems/sprockets-4.2.0/lib/sprockets/loader.rb:59:in `block in load'
  | /artifacts/bundle/ruby/3.2.0/gems/sprockets-4.2.0/lib/sprockets/loader.rb:337:in `fetch_asset_from_dependency_cache'
  | /artifacts/bundle/ruby/3.2.0/gems/sprockets-4.2.0/lib/sprockets/loader.rb:43:in `load'
  | /artifacts/bundle/ruby/3.2.0/gems/sprockets-4.2.0/lib/sprockets/cached_environment.rb:44:in `block in load'
  | /artifacts/bundle/ruby/3.2.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/map.rb:207:in `block in fetch_or_store'
  | /artifacts/bundle/ruby/3.2.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/map.rb:187:in `fetch'
  | /artifacts/bundle/ruby/3.2.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/map.rb:206:in `fetch_or_store'
  | /artifacts/bundle/ruby/3.2.0/gems/sprockets-4.2.0/lib/sprockets/cached_environment.rb:44:in `load'
  | /artifacts/bundle/ruby/3.2.0/gems/sprockets-4.2.0/lib/sprockets/base.rb:81:in `find_asset'
  | /artifacts/bundle/ruby/3.2.0/gems/sprockets-4.2.0/lib/sprockets/base.rb:88:in `find_all_linked_assets'
  | /artifacts/bundle/ruby/3.2.0/gems/sprockets-4.2.0/lib/sprockets/manifest.rb:125:in `each'
  | /artifacts/bundle/ruby/3.2.0/gems/sprockets-4.2.0/lib/sprockets/manifest.rb:125:in `to_a'
  | /artifacts/bundle/ruby/3.2.0/gems/sprockets-4.2.0/lib/sprockets/manifest.rb:125:in `block (2 levels) in find'
  | /artifacts/bundle/ruby/3.2.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/executor/safe_task_executor.rb:24:in `block in execute'
  | /artifacts/bundle/ruby/3.2.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/synchronization/mutex_lockable_object.rb:48:in `block in synchronize'
  | /artifacts/bundle/ruby/3.2.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/synchronization/mutex_lockable_object.rb:48:in `synchronize'
  | /artifacts/bundle/ruby/3.2.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/synchronization/mutex_lockable_object.rb:48:in `synchronize'
  | /artifacts/bundle/ruby/3.2.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/executor/safe_task_executor.rb:22:in `execute'
  | /artifacts/bundle/ruby/3.2.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/promise.rb:564:in `block in realize'
  | /artifacts/bundle/ruby/3.2.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/executor/ruby_thread_pool_executor.rb:352:in `run_task'
  | /artifacts/bundle/ruby/3.2.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/executor/ruby_thread_pool_executor.rb:343:in `block (3 levels) in create_worker'
  | /artifacts/bundle/ruby/3.2.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/executor/ruby_thread_pool_executor.rb:334:in `loop'
  | /artifacts/bundle/ruby/3.2.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/executor/ruby_thread_pool_executor.rb:334:in `block (2 levels) in create_worker'
  | /artifacts/bundle/ruby/3.2.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/executor/ruby_thread_pool_executor.rb:333:in `catch'
  | /artifacts/bundle/ruby/3.2.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/executor/ruby_thread_pool_executor.rb:333:in `block in create_worker'

What should we do in order to resolve this build issue? Thanks

The issue is that sassc can't process the css files from the new graphiql version. If like me your project is using sassc-rails, it has been abandoned. Try to replace it with something else (I had some success with https://github.com/tablecheck/dartsass-ruby). You will have to drop any dep that relies on sassc (or update to a newer version that doesn't). Good luck.

jramiresbrito commented 1 year ago

Is there any solution other than switching the sass pre-compiler?

tiegz commented 1 year ago

The dartsass-sprockets gem WFM so far, so I PR'ed a README change here: https://github.com/rmosolgo/graphiql-rails/pull/112 (there's also a rails-core gem called dartsass-rails too, which isn't coupled to Sprockets)

rmosolgo commented 7 months ago

Thanks for sharing the solution there, @tiegz. Yes, I think the solution here is to use a sass compiler that supports the CSS features in GraphiQL's assets. Same thing for Javascript :+1: