graphiql-rails icon indicating copy to clipboard operation
graphiql-rails copied to clipboard
verified publisher icon rmosolgo

AssetNotPrecompiled error with Sprockets 4.0

Open wesleyjellis opened this issue 6 years ago • 27 comments

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

wesleyjellis avatar Oct 23 '19 13:10 wesleyjellis

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.

skarger avatar Oct 23 '19 13:10 skarger

I have the same problem - found this: https://github.com/doorkeeper-gem/doorkeeper/issues/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

justinlang avatar Oct 23 '19 15:10 justinlang

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

danrocha avatar Oct 25 '19 10:10 danrocha

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?

glitteringkatie avatar Nov 05 '19 00:11 glitteringkatie

Same issue +1

ThaddeusJiang avatar Nov 10 '19 14:11 ThaddeusJiang

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

Timmitry avatar Nov 11 '19 13:11 Timmitry

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)

glitteringkatie avatar Nov 12 '19 17:11 glitteringkatie

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.

LiinNs avatar Nov 20 '19 08:11 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, too. rails 6.0.1, graphiql-rails 1.7.0 ruby 2.5.1

ybintian avatar Nov 25 '19 15:11 ybintian 

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 avatar Feb 20 '20 22:02 jessecai33

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

leonelgalan avatar Feb 27 '20 00:02 leonelgalan

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.

chadwilken avatar Mar 11 '20 02:03 chadwilken

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

leonelgalan avatar Mar 11 '20 02:03 leonelgalan

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.

chadwilken avatar Mar 11 '20 02:03 chadwilken

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!"
  }
}

leonelgalan avatar Mar 11 '20 19:03 leonelgalan

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

fabriciofreitag avatar Mar 27 '20 14:03 fabriciofreitag

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.

martinezcoder avatar Mar 31 '20 14:03 martinezcoder

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.

dncrht avatar Apr 04 '20 22:04 dncrht

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.

ivdma avatar Apr 05 '20 15:04 ivdma

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 avatar Aug 17 '20 15:08 TomasBarry

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

Raddit true %> true %>
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: true %> Can you guys help me solve this issue?

emmanuellekamwa avatar Jan 25 '21 08:01 emmanuellekamwa

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 avatar Feb 15 '21 14:02 munirdelta

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 avatar Mar 09 '21 13:03 wdiechmann

@jscho13 on https://github.com/rails/sprockets-rails/issues/376#issuecomment-287560399 mentioned that the issue is solvable by imitating production.rb - which I did, and bingo, all is well 😄

wdiechmann avatar Mar 09 '21 14:03 wdiechmann

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.

hamza-amin-tx avatar May 19 '21 08:05 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.

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?

ivdma avatar May 19 '21 08:05 ivdma

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.

redferret avatar Aug 28 '21 00:08 redferret