I've started a rails project using rails new with --webpack=react.
I generated a new controller updated my PostgreSQL password in the database.yml.
Up to this point, everything works fine. At this point all I'm trying to do is get react to render the default hello_react.jsx file that was generated as an example by rails.
When I put <%= javascript_pack_tag 'hello_react' %> in my view and run the server I get the following error:
Webpacker::Manifest::MissingEntryError in Home#index Showing
G:/../../../myGroceryList/app/views/home/index.html.erb where line #1
raised:
Webpacker can't find hello_react.js in
G:/../../../myGroceryList/public/packs/manifest.json. Possible causes:
You want to set webpacker.yml value of compile to true for your
environment unless you are using the webpack -w or the
webpack-dev-server. webpack has not yet re-run to reflect updates. You
have misconfigured Webpacker's config/webpacker.yml file. Your webpack
configuration is not creating a manifest. Your manifest contains: { }
I have pushed the project up to GitHub. Any thought on what is going wrong and how to fix this error?
RESOLVED: Resolution in comments
Jonny B,
I encountered the same issue. I was able to determine that I needed to add '.jsx' to my webpacker.yml.
extensions:
- .js
+ - .jsx
- .sass
- .scss
- .css
I also found that webpacker:compile was not being run on page refresh or when files were changed. I needed to run bundle exec rake assets:precompile (or bundle exec rake webpacker:compile) manually after each change to be able to reload and see the changes.
I am running the application via Apache+Mod_Passenger rather than using rails s (I have too many apps in development at the same time to keep starting and stopping a server on the command line). It seems like this doesn't work well with Webpacker's compile-on-demand functionality. Starting a server with rails s will allow me to hit the app on localhost:3000, but the react app doesn't render correctly. After hitting the page via the Puma server on 3000, I can now see the compiled assets working in my Apache/Passenger instance. So, the on-demand compiling seems to only work properly when running in a server started on the command line (rails s) ...which doesn't render correctly. :-/
The other option (better than running 2 servers) is to compile on the command line using bundle exec rake assets:precompile or bundle exec rake webpacker:compile whenever you make a change. Still a PITA, but at least it works ...for now. If I find a better solution, I'll update the answer.
UPDATE
After a lot of playing around, installing different version of NodeJS, Ruby, rbenv, nvm, etc., I was able to determine that the NODE_ENV wasn't being set for the Apache/Passenger environment. Using Rbenv, I was able to add an .rbenv-vars file in my app root containing:
NODE_ENV=development
RACK_ENV=development
RAILS_ENV=development
Now, Webpacker (and NodeJS) see that I am running in development rather than production, and the compile-on-demand is working.
RESOLUTION: As best I can tell this error fires when your public/packs folder is missing the Manifest file or is missing all together. What was happening in my case was Webpackers compilation step was silently failing and not creating the public/packs folder. I checked in a fix to the webpacker gem for this. You can see that fix and conversation here.
if this is the root cause then you can fix with either of these depending on how you prefer to install node packages
yarn install
or
npm install
Related
I tried to complete the first suggestion by typing
ruby
rails bin/dev
but I was not able to get an output (The terminal showed no output )
then I realized my code was wrong so I tried once again and typed:
rails create bin/dev
But it showed me an error and said "rails aborted!
Don't know how to build task 'create' (See the list of available tasks with rails --tasks)
Did you mean? db:create"
Then I tried the other command by typing rails in front of it but that didn't work either.
So even though my app works should I bother to solve this warning or skip past it?
TLDR: You need to build your CSS output on every Tailwind style addition so execute bin/dev in a terminal to start your rails server AND watch for tailwind changes.
Hey! Your screenshot is saying that you have successfully installed Tailwind via the tailwind-rails gem.
The end of the message provides instructions on how to build your Tailwind CSS during local development so that Tailwind styles are output to the CSS and applied to your app on localhost:3000 immediately.
Option 1: (documented in the installation output) In your terminal, execute bin/dev to start your rails server AND watch for tailwind changes. This command uses a library called foreman to run two processes, reading from the Procfile.dev that was created in your project's root directory during tailwind installation.
Option 2: (documented in this section of the README) In your terminal, execute rails s in one terminal window and rails tailwindcss:watch in a different window (separate commands)
Option 1 is simpler and probably recommended.
(Based on your screenshot, you are not on a Mac and your exact command may differ, but these work for me on a macbookpro.)
Rails server running Webpacker compiler under the hood compiles all the files and not just modified files on reload.
I tried enabling the watch mode in webpacker.yml under dev_server but did not help. So either of these two things I want to do in order to resolve this issue:
How to enable the watch mode in Webpacker so that everytime an asset is modified, the only touched asset will be recompiled and hence will fix the reloading to make development a breeze.
Since I'm unable to find any solution to the 1st Point, I want to unhook the Webpacker:compile task from assets:precompile. Although I could unhook it on production by disabling the WEBPACKER_PRECOMPILE environment variable to false and then compiling those assets manually using ./bin/webpack. However, I'm unable to achieve the result locally when I run
export WEBPACKER_PRECOMPILE=false && rails s
To try out the 1st Point, I ran rails s in one tab and ./bin/webpack -w in another. To my surprise, the watch mode with the latter command only compiles the touched file reducing the compilation time to under 1s. However, after reloading the page rails s again compiles all the assets which take almost a minute to finish.
While looking at the Webpacker source, this idea struck me:
Use ./bin/webpack --watch command to run Webpack in the watch mode. This will recompile modified files only speeding up the feedback cycle.
To unhook the Webpack compilation from the rails server, just set compile: false under development environment in webpacker.yml
I have a build server for my production environment that is essentially running:
yarn install --prod
RAILS_ENV=production bundle exec rails assets:precompile
Now, because my types (eg, #types/jquery) are stored as devDependencies, they don't get installed via yarn install --prod... but without them, the precompile fails:
ERROR in /path/to/my/file.ts
[tsl] ERROR in /path/to/my/file.ts(129,9)
TS2304: Cannot find name '$'.
Is there a way to tell assets:precompile to ignore Typescript errors?
OR, am I going about this the entirely wrong way? I'd prefer to not install the devDependencies on my build server...
If I were in your situation, I would just install the devDependencies. Compiling TypeScript code is, after all, a development operation. What is your concern? Just space usage and running time for the installation?
That said, given that it looks like webpacker uses ts-loader, another approach you can try is to enable ts-loader's transpileOnly option to skip type checking and thereby avoid the errors. See here for an example of how to enable transpileOnly in your config/webpack/loaders/typescript.js file.
I've just taken over a Webpack project and am new to Webpack.
Project was deploying to Heroku fine. I ran
rake webpacker:compile
and now, after deploying, I see that
javscript_pack_tag 'application'
has inserted this in the HTML:
<script src="http://0.0.0.0:8080/packs/application.js"></script>
How has a hostname and port from localhost made its way into the system? I can see this information in public/packs/manifest.json but how do I configure webpacker to use the relative path so that the pack will be included on any server?
The tag that's been inserted also doesn't include the expiration hash at the end, so it's not found on Heroku even if I do use the right hostname.
I suspect this is because I'm running webpack:compile with development settings. How do I access these settings?
And finally - is it best practice to run webpack:compile as part of the Heroku deployment process, and how do I set this up?
Thanks,
Louise
Old question, but for anyone else who finds themselves here, I just bumped into something similar after upgrading to webpacker/webpack 4.
After some exploring, I noticed that running webpack directly via node did not prepend the hostname. I had a hunch which turned out to be correct: webpacker was using my ASSET_HOST environment variable to prefix all my packs, and because I was configuring my development env with a .env my development asset host was being used.
Once I moved that to .env.development (so it wasn't being referenced as a base env file for production targeted builds as well) all my manifest resources ended being generated with relative paths as expected.
This wasn't a problem with webpacker 3.x, but I guess something in the webpacker 4.x build pipeline must tie in a little more closely with the rails asset pipeline...
Essentially I have a basic app that I would like to use as base for my other projects.
I ran git clone git#site.org:user/app.git newfolder
But when I run my rails app rails s I get the following error:
Migrations are pending; run 'rake db:migrate RAILS_ENV=development' to resolve this issue.
So I run rake db:migrate and start the app again, getting the following error:
I have a sneaking suspicion that it has something to do with the app name as asked in this question but I noticed the solution was provided for Rails 3 and the GitHub project hasn't been updated in two years.
Essentially, I think I have a solution (renaming the app) but I don't know how to do that. However, I may be wrong and I don't know why I am getting this error?
You are getting this error because, one of the css files you are requiring in your application.css is requiring application.css. Go through all the file in your app/assets/stylesheets and make sure that none of the file that is required in application.css is requiring application.css.