AssetNotPrecompiled error with Sprockets 4.0 about graphiql-rails

[danrocha]

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

[LiinNs]

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.

[ivdma]

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.

[glitteringkatie]

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 #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?

[leonelgalan]

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

[Timmitry]

@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 😉

[munirdelta]

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 👏

[ybintian]

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

[jessecai33]

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 .

[TomasBarry]

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.

[fabriciofreitag]

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

[skarger]

I have the same problem with Rails 5.2.3, sprockets 4.0.0, graphiql-rails 1.7.0, ruby 2.6.5.

As a short-term fix, downgrading sprockets to 3.7.2 worked for me.

[justinlang]

I have the same problem - found this: doorkeeper-gem/doorkeeper#834 Looks like the same issue in another project. Not sure if the same resolution will apply here.

rails 5.2.3, sprockets 4.0.0, graphiql-rails 1.7.0, ruby 2.6.1p33

[ThaddeusJiang]

Same issue +1

[glitteringkatie]

Awesome, thanks @Timmitry! We'll try that next (but it's not an immediate issue for us so probably won't be able to report back on success for a bit)

[chadwilken]

This doesn't seem to work for me. I just fired up a new rails app, skipping sprockets during install but deciding to add it on later. I have sprockets (4.0.0) and rails (6.0.2.1). I added the assets.rb and manifest.json file, but no luck.

[leonelgalan]

@chadwilken it's manifest.js, how it didn't work? Did you try option 1 or 2 above? I thought I had a sample repo, but I haven't uploaded it yet. I'll share it when I get to work tomorrow.

[chadwilken]

Sorry, that was a typo on my end. It is manifest.js. I tried both and they didn't work. I suspect that it is because I skipped sprockets and something is not configured correctly. If you have a working Rails 6 repo that would be awesome.

[leonelgalan]

The repo I had in mind is a little more complicated, so I pushed a demo repo (leonelgalan/rails-api-graphiql-demo), with the relevant steps as a single commit:

1. Install both graphql and graphiql-rails gems
2. Run rails generate graphql:install --schema=DemoSchema
3. Configure the routes for both gems
4. Uncomment require 'sprockets/railtie' in config/application.rb
5. Create app/assets/config/manifest.js and add graphiql's js and css

After that I can go to http://localhost:3000/graphiql and run

query {
  testField
}

And get this back:

{
  "data": {
    "testField": "Hello World!"
  }
}

[martinezcoder]

Adding precompile assets in config/initializers/assets.rb is not a very good approach, because from Sprockets 4 we should add all dependencies in the manifest.js.

I fix it in another way (by code), also not ideal, but at least I can decide which env I allow for the graphiql queries. The graphql view will be still visible, but it will always respond with an Unauthorizer error.

# config/routes.rb

# mount the engine for all environments
mount GraphiQL::Rails::Engine, at: "/graphiql", graphql_path: "/graphql"

# app/controllers/graphql_controller.rb

class GraphqlController < ActionController::API
  before_action :authorize_environment

  # ... the controller code ...

  private

  def authorize_environment
    unless Rails.env.development?
      render json: { error: { message: "401 Unauthorized" }, status: 401 } 
    end
  end

In the case you don't want to show the GraphiQL view, you can overwrite the controller of the engine following the Edge Rails guides. But I don't recommend this approach, because your overwritting will create a dependency with the gem and you will risk to have to make adjustments in every new version of the gem if they change the code you are overwritting.

[dncrht]

FWIW Sprockets 4.0.0 seems to require all the files required by application.css in the app it runs to be the same type (ie: same extension).

My application.css was in fact application.css.sass, and I found via assets:precompile it searches for a link graphiql/rails/application.css (defined in app/assets/config/manifest.js) that is named graphiql/rails/application.css.sass and obviously it wasn't.

Either you change your app or adapt the gem, but they must be have same type/extension.

[emmanuellekamwa]

Hello everyone. Please I have a problem with my code. I am building a micro-reddit app and this is the code I have in my application.html.erb

<title>Raddit</title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %>

<%= likn_to "Raddit", root_path %>

<% if user_signed_in? -%>

• <%= link_to 'Submit link', new_link_path %>
• <%= link_to 'Account', edit_user_registration_path %>
• <%= link_to 'Sign out', destroy_user_session_path, :method => :delete %>

<% else -%>

• <%= link_to 'Sign up', new_user_registration_path %>
• <%= link_to 'Sign in', new_user_session_path %>

<% end -%>

<% flash.each do |name, msg| %> <%= content_tag(:div, msg, class: "alert alert-info") %> <% end %>

<%= yield %>

But when I am running the rails server I am getting this error: Sprockets::Rails::Helper::AssetNotPrecompiled in Links#index And it is emphasizing on this line which is the cause of the error: <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> Can you guys help me solve this issue?

[wdiechmann]

I see this error on Rails 6.1.3 / Ruby 2.7.2p137 too 😢

I've tried both the 'manifest.js' fix and the 'development.rb' fix – sadly neither does the trick!

I get

hermes_1    | 2021-03-09 13:51:10 +0000 Rack app ("GET /assets/graphiql/rails/application.debug-ffc1b329cd4d42ec57fc274d9e8c8b802fcf23313347c4f2840ab9876e62dcae.css" - (172.26.0.1)): #<NoMethodError: undefined method `silence' for #<Logger:0x0000559266e618d0>>
hermes_1    | 2021-03-09 13:51:10 +0000 Rack app ("GET /assets/graphiql/rails/application.debug-302d2d018661e60251eb98c333754c95eb06ce1ff919c0505ec40aafde0d2554.js" - (172.26.0.1)): #<NoMethodError: undefined method `silence' for #<Logger:0x0000559266e618d0>>

in my log - and I wonder what adds the '.debug' suffix to the files? I try rails assets:precompile and get this output:

walther@LilleBukkeBruse v1 % hr rails assets:precompile
Creating v1_hermes_run ... done
yarn install v1.22.5
[1/4] Resolving packages...
success Already up-to-date.
Done in 1.04s.
I, [2021-03-09T13:40:39.972432 #1]  INFO -- : Writing /app/hermes/public/assets/turbo-a42307786533919cf707bef42a1c389fc7b5650aecec64acd5c15913c3b66f96.js
I, [2021-03-09T13:40:39.975375 #1]  INFO -- : Writing /app/hermes/public/assets/turbo-a42307786533919cf707bef42a1c389fc7b5650aecec64acd5c15913c3b66f96.js.gz
I, [2021-03-09T13:40:39.982651 #1]  INFO -- : Writing /app/hermes/public/assets/graphiql/rails/application-17946b1e42a96f1af127ad016e06c56f2a93dbd1ddb8f77e9b22eb1faf23a0e9.css
I, [2021-03-09T13:40:39.988045 #1]  INFO -- : Writing /app/hermes/public/assets/graphiql/rails/application-17946b1e42a96f1af127ad016e06c56f2a93dbd1ddb8f77e9b22eb1faf23a0e9.css.gz
I, [2021-03-09T13:40:39.993197 #1]  INFO -- : Writing /app/hermes/public/assets/graphiql/rails/application-c147d7296f7839f86cd868a93c200b3c3dddaa1602b88a381d490eb82fda6580.js
I, [2021-03-09T13:40:39.999447 #1]  INFO -- : Writing /app/hermes/public/assets/graphiql/rails/application-c147d7296f7839f86cd868a93c200b3c3dddaa1602b88a381d490eb82fda6580.js.gz
I, [2021-03-09T13:40:40.001752 #1]  INFO -- : Writing /app/hermes/public/assets/manifest-b4bf6e57a53c2bdb55b8998cc94cd00883793c1c37c5e5aea3ef6749b4f6d92b.js
I, [2021-03-09T13:40:40.012615 #1]  INFO -- : Writing /app/hermes/public/assets/manifest-b4bf6e57a53c2bdb55b8998cc94cd00883793c1c37c5e5aea3ef6749b4f6d92b.js.gz
I, [2021-03-09T13:40:40.050981 #1]  INFO -- : Writing /app/hermes/public/assets/accounts-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.css
I, [2021-03-09T13:40:40.059813 #1]  INFO -- : Writing /app/hermes/public/assets/accounts-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.css.gz
I, [2021-03-09T13:40:40.063213 #1]  INFO -- : Writing /app/hermes/public/assets/application-766b4ad0f71566cfdb147ffde48c43ebcc93341780fe61eb0df33573b5e821a0.css
I, [2021-03-09T13:40:40.078387 #1]  INFO -- : Writing /app/hermes/public/assets/application-766b4ad0f71566cfdb147ffde48c43ebcc93341780fe61eb0df33573b5e821a0.css.gz
I, [2021-03-09T13:40:40.097408 #1]  INFO -- : Writing /app/hermes/public/assets/landing_page-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.css
I, [2021-03-09T13:40:40.104710 #1]  INFO -- : Writing /app/hermes/public/assets/landing_page-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.css.gz
I, [2021-03-09T13:40:40.109823 #1]  INFO -- : Writing /app/hermes/public/assets/roles-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.css
I, [2021-03-09T13:40:40.121069 #1]  INFO -- : Writing /app/hermes/public/assets/roles-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.css.gz
I, [2021-03-09T13:40:40.132890 #1]  INFO -- : Writing /app/hermes/public/assets/scaffolds-f8449fdec5eb028a35bc7bc33c262e401c0e808d08d4c6872ed87acf84c207f3.css
I, [2021-03-09T13:40:40.150214 #1]  INFO -- : Writing /app/hermes/public/assets/scaffolds-f8449fdec5eb028a35bc7bc33c262e401c0e808d08d4c6872ed87acf84c207f3.css.gz
I, [2021-03-09T13:40:40.153348 #1]  INFO -- : Writing /app/hermes/public/assets/stimulus/manifest-b4bf6e57a53c2bdb55b8998cc94cd00883793c1c37c5e5aea3ef6749b4f6d92b.js
I, [2021-03-09T13:40:40.165493 #1]  INFO -- : Writing /app/hermes/public/assets/stimulus/manifest-b4bf6e57a53c2bdb55b8998cc94cd00883793c1c37c5e5aea3ef6749b4f6d92b.js.gz
I, [2021-03-09T13:40:40.173406 #1]  INFO -- : Writing /app/hermes/public/assets/sessions-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.css
I, [2021-03-09T13:40:40.179874 #1]  INFO -- : Writing /app/hermes/public/assets/sessions-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.css.gz
I, [2021-03-09T13:40:40.207145 #1]  INFO -- : Writing /app/hermes/public/assets/stimulus/libraries/es-module-shims-c4493e644afb380789c8f0d44266900b8631ec442f8f95886997dac9f98893f1.js
I, [2021-03-09T13:40:40.224173 #1]  INFO -- : Writing /app/hermes/public/assets/stimulus/libraries/es-module-shims-c4493e644afb380789c8f0d44266900b8631ec442f8f95886997dac9f98893f1.js.gz
I, [2021-03-09T13:40:40.230845 #1]  INFO -- : Writing /app/hermes/public/assets/tags-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.css
I, [2021-03-09T13:40:40.238890 #1]  INFO -- : Writing /app/hermes/public/assets/tags-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.css.gz
I, [2021-03-09T13:40:40.247712 #1]  INFO -- : Writing /app/hermes/public/assets/users-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.css
I, [2021-03-09T13:40:40.250960 #1]  INFO -- : Writing /app/hermes/public/assets/users-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.css.gz
I, [2021-03-09T13:40:40.278690 #1]  INFO -- : Writing /app/hermes/public/assets/stimulus/libraries/es-module-shims@0.7.1-c4493e644afb380789c8f0d44266900b8631ec442f8f95886997dac9f98893f1.js
I, [2021-03-09T13:40:40.284049 #1]  INFO -- : Writing /app/hermes/public/assets/stimulus/libraries/es-module-shims@0.7.1-c4493e644afb380789c8f0d44266900b8631ec442f8f95886997dac9f98893f1.js.gz
I, [2021-03-09T13:40:40.288632 #1]  INFO -- : Writing /app/hermes/public/assets/stimulus/libraries/stimulus-9788c927f1b835567a6d8cc0cc498fe17439ad175946131572a387cbcaa3d3ee.js
I, [2021-03-09T13:40:40.291824 #1]  INFO -- : Writing /app/hermes/public/assets/stimulus/libraries/stimulus-9788c927f1b835567a6d8cc0cc498fe17439ad175946131572a387cbcaa3d3ee.js.gz
I, [2021-03-09T13:40:40.296057 #1]  INFO -- : Writing /app/hermes/public/assets/stimulus/libraries/stimulus@2-9788c927f1b835567a6d8cc0cc498fe17439ad175946131572a387cbcaa3d3ee.js
I, [2021-03-09T13:40:40.299940 #1]  INFO -- : Writing /app/hermes/public/assets/stimulus/libraries/stimulus@2-9788c927f1b835567a6d8cc0cc498fe17439ad175946131572a387cbcaa3d3ee.js.gz
I, [2021-03-09T13:40:40.305248 #1]  INFO -- : Writing /app/hermes/public/assets/stimulus/loaders/autoloader-01d569d44d079bc65e1e6a36c9401b867e5c6da36c577cea65f7fd3082d039ac.js
I, [2021-03-09T13:40:40.316166 #1]  INFO -- : Writing /app/hermes/public/assets/stimulus/loaders/autoloader-01d569d44d079bc65e1e6a36c9401b867e5c6da36c577cea65f7fd3082d039ac.js.gz

which I believe to be fairly correct - but as you see: no .debug attached to the two graphiql resources!??

Sprockets: 4.0.2

[wdiechmann]

@jscho13 on rails/sprockets-rails#376 (comment) mentioned that the issue is solvable by imitating production.rb - which I did, and bingo, all is well 😄

[hamza-amin-tx]

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

Didn't worked for me for the same problem.

[ivdma]

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

Didn't worked for me for the same problem.

I recently used it with success in a couple of my new projects.
Have you restarted the rails server after updating the config/environments/development.rb?

[redferret]

For us using Rails 5.2.6 api only we just added a guard statement in the application.rb file to do this
require "sprockets/railtie" if Rails.env.development?

The reason why we did this is because we aren't using sprockets at all for this project in production, except for in development, and it's not a perfect fix but it at least keeps sprockets from running on our production deployment on heroku and getting this error from sprockets.