graphiql-rails: AssetNotPrecompiled error with Sprockets 4.0

Problem:

When running graphiql-rails and sprockets 4.0.0, accessing graphiql raises Sprockets::Rails::Helper::AssetNotPrecompiled in GraphiQL::Rails::Editors#show

Following the suggestion of

Asset `graphiql/rails/application.css` was not declared to be precompiled in production.
Declare links to your assets in `app/assets/config/manifest.js`.

  //= link graphiql/rails/application.css
and restart your server

Doesn’t seem to fix anything

I’ve reproduced the exception with a fresh rails app here: https://github.com/wesleyjellis/sprockets_graphql (Rails 6.0.0, sprockets 4.0.0, graphiql 1.7.0, ruby 2.6.3)

It’s possible this is related to https://github.com/rails/sprockets/issues/542 or https://github.com/rails/sprockets/issues/415

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 24
Comments: 27 (1 by maintainers)

Commits related to this issue

Ensure graphiql loads - Fix manifest per: https://github.com/rmosolgo/graphiql-rails/issues/75 - Nest graphql_controller in Api module - Clean up routes — committed to aaronpanch/idea-board by aaronpanch 4 years ago

Most upvoted comments

Fixed by following the instructions in the error pages, creating and adding the following lines to app/assets/config/manifest.js:

//= link graphiql/rails/application.css
//= link graphiql/rails/application.js

+347

danrocha on Oct 25, 2019

Fixed by following the instructions in the error pages, creating and adding the following lines to app/assets/config/manifest.js:
//= link graphiql/rails/application.css
//= link graphiql/rails/application.js

This work for me rails 6.02, sprockets 4.0.0, graphiql-rails 1.7.0, ruby 2.6.3p62

run into a new error, when try to run rails test

rails test test/controllers/products_controller_test.rb:31

.E

Error:
ProductsControllerTest#test_should_get_new:
ActionView::Template::Error: couldn't find file 'graphiql/rails/application.js'
Checked in these paths: 
  /Users/liinns/github_repo/rails6_blog/app/assets/config
  /Users/liinns/github_repo/rails6_blog/app/assets/images
  /Users/liinns/github_repo/rails6_blog/app/assets/stylesheets
  /Users/liinns/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/actioncable-6.0.1/app/assets/javascripts
  /Users/liinns/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/activestorage-6.0.1/app/assets/javascripts
  /Users/liinns/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/actionview-6.0.1/lib/assets/compiled
  /Users/liinns/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/turbolinks-source-5.2.0/lib/assets/javascripts
  /Users/liinns/github_repo/rails6_blog/node_modules
    app/assets/config/manifest.js:3

that is because I only use graphiql under development, so in test it just cannot load these files. I finally decide to refactor it under initializers/assets.rb

Rails.application.config.assets.precompile += %w( graphiql/rails/application.js graphiql/rails/application.css ) if Rails.env.development?

Good !

And with Rails6, we can use webpack to help us to get things to work, try it.

+30

LiinNs on Dec 3, 2019

I only use Graphiql in development environment, so I only put this line into my config/environments/development.rb:

  config.assets.precompile += ['graphiql/rails/application.js', 'graphiql/rails/application.css']

Note: don’t forget to restart the rails server after change of configuration.

+27

ivdma on May 19, 2021

Should we agree on a suggestion for newcomers (like me today)? Maybe expand the Note on API Mode section of the README.

Option 1

Create app/assets/config/manifest.js and figure out a fix for the errors in test reported above?

//= link graphiql/rails/application.css
//= link graphiql/rails/application.js

Option 2

Create an empty app/assets/config/manifest.js:

mkdir -p app/assets/config && touch app/assets/config/manifest.js

And create a config/initializers/assets.rb with:

# config/initializers/assets.rb
if Rails.env.development?
  Rails.application.config.assets.precompile += %w[graphiql/rails/application.js graphiql/rails/application.css]
end

+22

leonelgalan on Feb 27, 2020

I have the same issue and this solution worked great locally! However we’re exposing the graphiql route on development only. So when a prod build ran, we got: Sprockets::FileNotFound: couldn't find file 'graphiql/rails/application.css' I found this issue https://github.com/rmosolgo/graphiql-rails/issues/13 however we are not in api-only mode.

Is there a fix for this if we’re only using graphiql as a dev dependency?

+22

glitteringkatie on Nov 5, 2019

@glitteringkatie I had the same problem and solved it by conditionally including the files in assets.rb

# config/initializers/assets.rb
Rails.application.config.assets.precompile += […] if Rails.env.development?

This way, we are using both the manifest.js as well as the assets.rb for declaring assets to be included, which might not be ideal, but at least solved our problem 😉

+12

Timmitry on Nov 11, 2019

I only use Graphiql in development environment, so I only put this line into my config/environments/development.rb:
  config.assets.precompile += ['graphiql/rails/application.js', 'graphiql/rails/application.css']

This is cleanest hotfix for this issue by far 👏

munirdelta on Feb 15, 2021

It would be lovely if the following could be added to manifest.js but it does not appear to be valid:

if (process.env.NODE_ENV === 'development') {
  //= link graphiql/rails/application.css
  //= link graphiql/rails/application.js
}

However, this isn’t really an issue with graphql-rails, rather it is to do with how sprokets works.

TomasBarry on Aug 17, 2020

Rails.application.config.assets.precompile += %w( graphiql/rails/application.js graphiql/rails/application.css ) if Rails.env.development?

This seems the best option so far works for me. Thanks @LiinNs & @Timmitry .

jessecai33 on Feb 20, 2020

Fixed by following the instructions in the error pages, creating and adding the following lines to app/assets/config/manifest.js:
//= link graphiql/rails/application.css
//= link graphiql/rails/application.js

This work for me, too. rails 6.0.1, graphiql-rails 1.7.0 ruby 2.5.1

ybintian on Nov 25, 2019

I solved this in my test env by moving the graphiql-rails to the development/test group

fabriciofreitag on Mar 27, 2020