graphiql-rails: GraphiQL broken in production. Duplicate "graphql" modules.

We are using graphiql-rails as a dependency on one our gems.

From version 1.5 the graphiql page is broken. I can confirm that 1.4.11 along with graphql 1.8.10 works.

The error is present only in production environment. Development works. Might be something that happens during the assets precompile process.

Bug

Accessing GraphiQL page I see only the loading... message and get this error:

Uncaught Error: Cannot use t "__Schema" from another module or realm.

Ensure that there is only one instance of "graphql" in the node_modules
directory. If different versions of "graphql" are the dependencies of other
relied on modules, use "resolutions" to ensure only one version is installed.

https://yarnpkg.com/en/docs/selective-version-resolutions

Duplicate "graphql" modules cannot be used at the same time since different
versions may have different capabilities and behavior. The data from one
version used in the function from another could produce confusing and
spurious results.

Which then create a second obvious error:

Uncaught ReferenceError: GraphiQL is not defined

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 28
  • Comments: 38 (7 by maintainers)

Commits related to this issue

Most upvoted comments

Is everyone with this issue running production on Google Cloud Platform? 👍 for yes 👎 for no I’m not sure if GCP is respecting NODE_ENV: production from the app.yaml file when precompiling assets. I was following advice from https://github.com/howtographql/react-apollo/issues/33#issuecomment-426096917

In my case, the issue involved Uglifier mangling variables in the javascript file. The following settings appear to work:

config.assets.js_compressor = Uglifier.new(harmony: true, mangle: false)

Make sure to update Uglifier to a version that supports the mangle option.

@leechunhoe you need to update your production environment and set your js_compressor like this:

config.assets.js_compressor = Uglifier.new(harmony: true)

Don’t forget to require 'uglifier'

Concerning the Topic: 1.6.x is still causing the initial mentioned Bug in Production for me.

The same issue has occurred on Heroku.

graphiql-rails (1.7.0)
graphql (1.9.3)

For anyone else that gets here, the combination of

config.assets.js_compressor = Uglifier.new(harmony: true, mangle: false)

and

gem 'graphql'
gem 'graphiql-rails', '~> 1.5.0'

worked for me

We just came across this in GitLab as well (https://gitlab.com/gitlab-org/gitlab-ce/issues/67293).

As described in https://github.com/graphql/graphql-js/issues/1182#issuecomment-354009213:

So, as far as I can see the problem is that GraphQLScalarType and GraphQLObjectType constructors both get e as a shortcut during the minifying. And when graphql-js tries to compare them — condition is true and it throws an error.

Disabling name mangling in UglifyJsPlugin via mangle: false sounds like a possible workaround, but this may bloat the size of the JavaScript output.

graphql-js added a fix to disable this check when NODE_ENV is set to production (https://github.com/graphql/graphql-js/pull/1174).

Normally, Webpack will set NODE_ENV properly and generate assets accordingly. However, if you are using Sprockets, NODE_ENV is never set to anything, so this check always gets hit if name mangling is in use.

Perhaps this gem is no longer needed now that Rails 5 defaults to Webpacker (https://github.com/rails/webpacker). For those of us not using Webpacker, I wonder if we can work around this by defining a NODE_ENV inside or patching the graphql-js code during asset compilation.

Just Worked with the old version 😭 :

    gem 'graphql', '~> 1.9.2'
    gem 'graphiql-rails', '~> 1.4.11'

hmm upgraded to 1.7 did not change the error for me.

Hey everyone, I hope that upstream fixes and new configurations for the minifier worked alright. If anyone runs into this again, please open a new issue!

Just Worked with the old version :

    gem 'graphql', '~> 1.9.2'
    gem 'graphiql-rails', '~> 1.4.11'

This works for me as well Thanks

We stopped using this gem and just directly use graphiql-js library.

Since the gem doesn’t seem to maintained anymore, does anyone have successfully implemented graphiql using webpacker?

I’m experiencing this issue on Heroku and have been able to duplicate locally in production mode. Using mangle: false did not resolve my issue.

Is there a long term fix in the works?

@mortik In that case, have you tried Altair? No integration within the app, just connect directly to any graphql endpoint, has subscriptions, etc.

We removed graphiql-rails from our Apps and are now using a html only version of the GraphiQL Playground from Prisma https://github.com/prisma/graphql-playground

The next step would be to use the React Component to build a customized Playground with Subscription support like you would get when you use Apollo Server or Absinthe from Elixir but in this case for Rails with ActionCable

Ah no problem i only read the notification mail which did not include the link ^^

graphiql-rails 1.6.0, graphql 1.8.11 works okay in development, but shows following error when build production.

Uglifier::Error: In strict mode code, functions can only be declared at top level or immediately within another function.
/var/app/current/vendor/bundle/ruby/2.5.0/gems/uglifier-4.1.20/lib/uglifier.rb:234:in `parse_result'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/uglifier-4.1.20/lib/uglifier.rb:216:in `run_uglifyjs'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/uglifier-4.1.20/lib/uglifier.rb:168:in `compile'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/sprockets/uglifier_compressor.rb:53:in `call'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/sprockets/uglifier_compressor.rb:28:in `call'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/sprockets/processor_utils.rb:75:in `call_processor'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/sprockets/processor_utils.rb:57:in `block in call_processors'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/sprockets/processor_utils.rb:56:in `reverse_each'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/sprockets/processor_utils.rb:56:in `call_processors'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/sprockets/loader.rb:134:in `load_from_unloaded'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/sprockets/loader.rb:60:in `block in load'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/sprockets/loader.rb:317:in `fetch_asset_from_dependency_cache'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/sprockets/loader.rb:44:in `load'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/sprockets/cached_environment.rb:20:in `block in initialize'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/sprockets/cached_environment.rb:47:in `load'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/sprockets/base.rb:66:in `find_asset'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/sprockets/base.rb:73:in `find_all_linked_assets'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/sprockets/manifest.rb:142:in `block in find'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/sprockets/legacy.rb:114:in `block (2 levels) in logical_paths'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/sprockets/path_utils.rb:228:in `block in stat_tree'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/sprockets/path_utils.rb:212:in `block in stat_directory'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/sprockets/path_utils.rb:209:in `each'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/sprockets/path_utils.rb:209:in `stat_directory'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/sprockets/path_utils.rb:227:in `stat_tree'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/sprockets/path_utils.rb:231:in `block in stat_tree'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/sprockets/path_utils.rb:212:in `block in stat_directory'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/sprockets/path_utils.rb:209:in `each'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/sprockets/path_utils.rb:209:in `stat_directory'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/sprockets/path_utils.rb:227:in `stat_tree'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/sprockets/path_utils.rb:231:in `block in stat_tree'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/sprockets/path_utils.rb:212:in `block in stat_directory'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/sprockets/path_utils.rb:209:in `each'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/sprockets/path_utils.rb:209:in `stat_directory'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/sprockets/path_utils.rb:227:in `stat_tree'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/sprockets/legacy.rb:105:in `each'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/sprockets/legacy.rb:105:in `block in logical_paths'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/sprockets/legacy.rb:104:in `each'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/sprockets/legacy.rb:104:in `logical_paths'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/sprockets/manifest.rb:140:in `find'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/sprockets/manifest.rb:186:in `compile'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-rails-3.2.1/lib/sprockets/rails/task.rb:68:in `block (3 levels) in define'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-3.7.2/lib/rake/sprocketstask.rb:147:in `with_logger'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/sprockets-rails-3.2.1/lib/sprockets/rails/task.rb:67:in `block (2 levels) in define'
/var/app/current/vendor/bundle/ruby/2.5.0/gems/rake-12.3.2/exe/rake:27:in `<top (required)>'
/usr/local/bin/bundle:30:in `block in <main>'
/usr/local/bin/bundle:22:in `<main>'
Tasks: TOP => assets:precompile
(See full trace by running task with --trace)

I’m also having this issue. The error is not occurring in development, only in production.

gem 'graphql',                      '~> 1.8.11'
gem 'graphiql-rails',               '~> 1.5.0'