Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AssetNotPrecompiled error with Sprockets 4.0 #75

Open
wesleyjellis opened this issue Oct 23, 2019 · 27 comments
Open

AssetNotPrecompiled error with Sprockets 4.0 #75

wesleyjellis opened this issue Oct 23, 2019 · 27 comments

Comments

@wesleyjellis
Copy link

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 rails/sprockets#542 or rails/sprockets#415

@skarger
Copy link

skarger commented Oct 23, 2019

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
Copy link
Contributor

justinlang commented Oct 23, 2019

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

@danrocha
Copy link

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

@glitteringkatie
Copy link

glitteringkatie commented Nov 5, 2019

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?

@ThaddeusJiang
Copy link

Same issue +1

@Timmitry
Copy link

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

@glitteringkatie
Copy link

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)

@LiinNs
Copy link

LiinNs commented Nov 20, 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.

@ybintian
Copy link

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
Copy link

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 .

@leonelgalan
Copy link

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

@chadwilken
Copy link

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
Copy link

leonelgalan commented Mar 11, 2020

@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
Copy link

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
Copy link

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

aaronpanch added a commit to aaronpanch/idea-board that referenced this issue Mar 17, 2020
- Fix manifest per: rmosolgo/graphiql-rails#75
- Nest graphql_controller in Api module
- Clean up routes
@fabriciofreitag
Copy link

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

@martinezcoder
Copy link

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
Copy link

dncrht commented Apr 4, 2020

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.

@ivdma
Copy link

ivdma commented Apr 5, 2020

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.

@TomasBarry
Copy link

TomasBarry commented Aug 17, 2020

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.

@emmanuellekamwa
Copy link

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

@munirdelta
Copy link

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 👏

@wdiechmann
Copy link

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
Copy link

@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
Copy link

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
Copy link

ivdma commented May 19, 2021

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
Copy link

redferret commented Aug 28, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests