'Webpacker can't find application' in a brand new project with extract_css: true #2605
Comments
|
I think I got a reproducible script to show the issues. There are three issues: What are the issues:Case 1 - export_css: false; no import - NO style Based on the above results there are several problems.
Problem 1 is some caching issue. This means you have to change the content of application.js depending on the configuration of the environment. and you can't start the same application.js and application.html.erb in different configuration - dev, production, test. The scripts to reproducePlease restart the server between each of the scripts. $ rails new webpacker_css1 --webpack
$ cd webpacker_css1/
$ rails g scaffold book
$ rake db:migrate
$ echo ".my_style {color: blue}" > app/javascript/packs/some.scss
# Replace stylesheet_link_tag with stylesheet_pack_tag
$ sed -i "s/stylesheet_link_tag 'application'/stylesheet_pack_tag 'some'/g" app/views/layouts/application.html.erbCase 1$ echo "export_css: false; no import in application" > case1.log
$ rails s
$ curl localhost:3000/books >> case1.logResult: no style Case 2$ echo "export_css: true; no import in application" > case2.log
# Replace extract_css: false with extract_css: true
$ sed -i 's/extract_css: false/extract_css: true/g' config/webpacker.yml
$ rails s
$ curl localhost:3000/books >> case2.logResult: error occurs "Webpacker can't find some in" Case 3# There already is export_css: true in config/webpacker.yml
$ echo "export_css: true; import('./some') in application" > case3.log
$ echo "import('./some')" >> app/javascript/packs/application.js
$ rails s
$ curl localhost:3000/books >> case3.logResult: some.css is imported with Case 4$ echo "export_css: false; import('./some') in application" > case4.log
# Replace extract_css: true with extract_css: false
$ sed -i 's/extract_css: true/extract_css: false/g' config/webpacker.yml
# There already is import('./some') in app/javascript/packs/application.js
$ rails s
$ curl localhost:3000/books >> case4.logResult: There is NO style. No <script> <head>
<title>WebpackerCss1</title>
<meta name="csrf-param" content="authenticity_token">
<meta name="csrf-token" content="tjlPRDCzhypzayHg0dY3O3FaopjBuSVUxINEbnCcn9lga1c+FS4wty8E/OGEHL42iiRDgVV+yMqHKaUqJf6tOQ==">
<script src="/packs/js/application-1cbf96d3e2109440ea2c.js" data-turbolinks-track="reload"></script>
<link rel="stylesheet" type="text/css" href="/packs/css/0-1bd9bff2.chunk.css">
<script charset="utf-8" src="/packs/js/0-1bc6b104668542a9d05b.chunk.js"></script>
</head>Question: Where is the <script> inlining the css? Case 5$ echo "export_css: false; import('./some.scss') in application" > case5.log
# Replace import('./some') with import('./some.scss') true
$ sed -i "s/some/some.scss/g" app/javascript/packs/application.js
$ rails s
$ curl localhost:3000/books >> case5.logCurl Result: There is no style. No <script> because curl does not execute the js. <head>
<title>WebpackerCss1</title>
<meta name="csrf-param" content="authenticity_token">
<meta name="csrf-token" content="BgXKJm/rYtP6D6zek4TMWRkqIw9dPnBcwbfwByxdXyTQV9JcSnbVTqZgcd/GTkVU4lTCFsn5ncKCHRFDeT9txA==">
<script src="/packs/js/application-0053cf706d6f48a5886a.js" data-turbolinks-track="reload"></script><script charset="utf-8" src="/packs/js/0-e8c819fe7947a5da32d9.chunk.js"></script>
<style>.my_style {
color: blue; }
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL2tpcmV0by9heGxlcy90bXAvd2VicGFja2VyX2NzczEvYXBwL2phdmFzY3JpcHQvcGFja3Mvc29tZS5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQVcsV0FBVyxFQUFBIiwiZmlsZSI6InNvbWUuc2NzcyIsInNvdXJjZXNDb250ZW50IjpbIi5teV9zdHlsZSB7Y29sb3I6IGJsdWV9XG4iXX0= */</style></head>Case 6$ echo "export_css: true; import('./some.scss') in application" > case6.log
# Replace extract_css: false with extract_css: true
$ sed -i 's/extract_css: false/extract_css: true/g' config/webpacker.yml
$ rails s
$ curl localhost:3000/books >> case6.logResult: Webpacker can't find some in Case 7# Change the some.scss to some.css
$ echo "export_css: true; import('./some.css') in application" > case7.log
# Replace import('./some.scss') with import('./some.css')
$ sed -i "s/some.scss/some.css/g" app/javascript/packs/application.js
$ rails s
$ curl localhost:3000/books >> case7.logResult: There is a Question: Why is there and error and in the same time the some.css is returned in the . It stopped occurring after the first request? Case 8# Change export_css to false
$ echo "export_css: false; import('./some.css') in application" > case8.log
# Replace extract_css: true with extract_css: false
$ sed -i 's/extract_css: true/extract_css: false/g' config/webpacker.yml
$ rails s
$ curl localhost:3000/books >> case8.logCurl result: There is no style. No <script> because curl does not execute the js. <head>
<title>WebpackerCss1</title>
<meta name="csrf-param" content="authenticity_token">
<meta name="csrf-token" content="BneWEpW7kuz9/KqrO0bPlea0TAfWisVXBYWzbzYs+rzQJY5osCYlcaGTd6pujEaYHcqtHkJNKMlGL1IrY07IXA==">
<script src="/packs/js/application-bb8f70666c8a53092174.js" data-turbolinks-track="reload"></script>
</head>Case 9# Return to case two Case 2
$ echo "export_css: true; no import in application" > case9.log
# Replace extract_css: false with extract_css: true
$ sed -i 's/extract_css: false/extract_css: true/g' config/webpacker.yml
# Remove import('./some.css') - replace it with nothing
$ sed -i "s/import('.\/some.css')//g" app/javascript/packs/application.js
$ rails s
$ curl localhost:3000/books >> case9.logResult: there is now |
|
@thebravoman I'm sorry to hear about the difficulties you've been experiencing getting your stylesheet to compile properly. This sounds pretty painful. Also, thank you, for documenting your workflow so thoroughly. This is really helpful information that I imagine would help the core team understand your experience better and will hopefully lead to some improvements in code and documentation to ensure a better experience. I went through each of your examples and added my summaries: Case 1With <%= stylesheet_pack_tag 'some', media: 'all' %>
<%= javascript_pack_tag 'some' %> <%# <---- needed when extract_css: false %>
<%= javascript_pack_tag 'application' %>My opinion is that Summary:
Case 2I'm not entirely sure what happened here, since, as you said, this is the same as Case 9. I would expect this to work. Case 3I had trouble following this case or reproducing. In the descriptions, you shared that My comment here is that I would not recommend this approach for two reasons:
What adds to this confusion is that you're attempting to add the 'some' pack twice, once through Summary:
Case 4Similar to Case 3. Here, you can see the dynamic imports inserted into the head in your example: ...
<link rel="stylesheet" type="text/css" href="/packs/css/0-1bd9bff2.chunk.css">
<script charset="utf-8" src="/packs/js/0-1bc6b104668542a9d05b.chunk.js"></script>
</head>Summary:
Case 5Same as Case 3 and 4. I wouldn't expect the extension to matter for an unambiguously named import, but being explicit is always a good idea. Case 6This results in an error for the same reason as Case 1; a javascript tag for the same bundle, Case 7I wasn't able to reproduce this error. Case 8Similar to Case 1 again. Case 9I would expect this to work. RecommendationMy recommendation for you is to rename $ tree app/javascript/packs
app/javascript/packs
├── application.js
└── application.scss<%= stylesheet_pack_tag 'application', media: 'all' %>
<%= javascript_pack_tag 'application' %>extract_css: trueAlso, I recommend using |
|
Tried to reproduce it. Follow the exact same commands but this time the error on Case 2 is It's like a random component exists when creating a rails project with webpacker |
|
I have found a solution. Here is how to make it work. I guess it should be added in the documentation. Webpacker 5 is release about a two months ago and with it you can get it working $ rails new webpacker_css --webpack
$ cd webpacker_cssChange Gemfile - gem 'webpacker', '~> 4.0'
+gem 'webpacker', '~> 5.0'$ bundle updateChange application layout // app/views/layouts/application.html.erb
- <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
+ <%= stylesheet_pack_tag 'some', media: 'all', 'data-turbolinks-track': 'reload' %>
// note that the file here is 'some'Change extract_css to true # config/webpacker.yml
development:
<<: *default
compile: true
+ extract_css: trueStart server and now you will have stylesheet separated from js. <head>
<title>WebpackerCss5</title>
<link rel="stylesheet" media="all" href="/packs/css/some-a2dd1d89.css" data-turbolinks-track="reload">
<script src="/packs/js/application-9afcbb5693aa87623e69.js" data-turbolinks-track="reload"></script>
</head>Compilation looks like this I will think of a PR for the documentation if this fixes my FOUC. |
|
Also, make sure to use |
|
I opened #2608 with the hopes of improving the out-of-box experience and helping developers avoid situations like @thebravoman encountered. |
|
Was able to fix the |
There is a lot of confusion in this thread #2071 and many blog post about extract_css and stylesheet_pack_tag and why it is not working. People are facing the problem on production and they are just removing the "stylesheet_pack_tag" from their layouts which - even 40 people liked this (#2071 (comment), #2071 (comment)). I think is the wrong decision. I also get a lot of errors and it's been a few hours trying to get it working with SOME success at the end and a summary - but it is still not resolved.
The whole point of me fighting this that I have a FOUC - flash of unstyled content.
Using rails 6.0.3.1, ruby 2.6.5
So I started with a brand new project to see how to make it work
Create project:
$ rails new webpacker_css --webpack $ cd webpacker_css/ $ rails g scaffold book $ rake db:migrateJust added a console log here to make sure it is working.
# start server $ rails sGo to localhost:3000/books and you see "I am here" in browser console
This is the content of the head
Change stylesheet_link_tag to stylesheet_pack_tag
Remove the stylesheet_link_tag and add stylesheet_pack_tag from the layout. This will use webpacker for the stylesheets
It is all ok. Visit the server and the content of head is as expected. There is no styleheet
extract_css: true
Change extract_css to true. What I would expect here after reading many comments on different issues I would expect to have link stylesheet in the head.
Now go to localhost:3000/books and this error occurs.
Thinking about the error it makes sense. After all there is no such file.
The documentation at https://github.com/rails/webpacker/blob/master/docs/css.md#css-sass-and-scss says I need application.scss in scss. So I create one:
It is empty, but lets restart server and refresh.
Same error occurs!
Read the documentation
The documentation says I need to
So I modify my application.js to do the import
Restart and go to localhost:3000/books
and the same error occurs
Update to webpacker 5
I then go to the Gemfile. It has
I read somewhere that there is a webpacker 5 version so I tried to update.
bundle update, restart, go to localhost:3000/books and the same error occurs.
Updated 1
Strange stackoverflow solution 1
I then tried this solution https://stackoverflow.com/a/58507538/1266681 which basically says:
I followed the approach:
I got
But people keep mentioning that If you put them in the ../stylesheets and if it is an application.css it might just work.
Restart and go to localhost:3000/books
Same error:
Check out tree structure
Here is the tree structure:
Then I remembered I should change application.js
Restart and go to localhost:3000/books. Same error
Change application.css to application
I decide to change applicaiton.css to just application in the import. Just an idea.
Same error
Clean webpacker
I decide to clean the webpacker
Again result is
Out of ideas 1
I am out of ideas. As a result I still can not get it working.
I tried webpacker 4, webpacker 5. ../scss as in the documentation, read the documentation, used ../stylesheets/, user .css, used .scss, webpacker:clean, but can't get it working
Looking again at the error - file is not found - create an application.css entry point
So it seems that there is no application.css. That is clear. This files should be in the manifest.
Let's generate such an entry point
There is no such entry point generated
The manifest still contains
Create an entry point with a different name
There is now a some.css entry point
I modify the layout to
Go to localhost:3000/books
It works
It even works with scss
where the generated file is:
Let's change to extract_css: false
So I got it working with extract_css: true and a second entry point
But then if we change
and start the server again the head of the page is
So there is no some.css. As expected because extract_css is set to false. But then I do not have my css class anywhere :
Change the application.js and now it works
I remember that I should also change the application.js
If extract_css is false the head looks like
If extract_css is set to true with the import('../some') i get
If I now remove
I get
the following head
So my style is missing.
Current state and summary
I know it got complex and long the whole story. Let me try to summarize it
I can't find a way to deliver the same style when extract_css is true, or false.
The style is delivered in one of the cases but not the other
Case 1
<%= stylesheet_pack_tag 'some', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
extract_css: false
import('./some')
I don have my .my_style { color: blue} anywhere
Case 2
<%= stylesheet_pack_tag 'some', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
extract_css: false
// import('./some')
I don't have my .my_style { color: blue} anywhere
Case 3
<%= stylesheet_pack_tag 'some', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
extract_css: false
import('./some.scss') <-- THIS HERE IS WITH EXTENSION .scss
I have the style .my_style because the ./some.scss is used and not ./some
Case 4
<%= stylesheet_pack_tag 'some', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
extract_css: true
import('./some.scss')
Error occurs
I have the style .my_style
Case 5
<%= stylesheet_pack_tag 'some', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
extract_css: true
// import('./some')
I have the style .my_style
Case 6
<%= stylesheet_pack_tag 'some', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
extract_css: true
import('./some')
I have the style .my_style
I can't find a way to deliver the same style when extract_css is true, or false.
The style is delivered in one of the cases but not the other
Summary of the cases
Case 1
extract_css: false
import('./some')
.my_style is NOT available
Cast 2
extract_css: false
// import('./some')
.my_style IS NOT available
Case 3
extract_css: false
import('./some.scss') <-- THIS HERE IS WITH EXTENSION .scss
.my_style IS available as inlinded <script>
Case 4
extract_css: true
import('./some.scss')
Error occurs - Webpacker can't find some.css
Case 5
extract_css: true
// import('./some')
.my_style IS available from href="/packs/css/some-49f8f0b6.css"
Case 6
extract_css: true
import('./some')
.my_style IS available from href="/packs/css/some-49f8f0b6.css"
Case 7
extract_css: false
import('./some.scss')
Did it again an the style is not available
Case 8
extract_css: true
import('./some.scss')
Same as case 4 but this time there is a link to href="/packs/css/some-49f8f0b6.css" and there is no error
Case 9
extract_css: false
import('./some.scss')
What is the issue
The issue is that I've managed to get the same configuration cases 9,3 and cases 8, 4 that have same configuration
but behave in a different way depending on something
The text was updated successfully, but these errors were encountered: