Giter Site home page Giter Site logo

rails / webpacker Goto Github PK

View Code? Open in Web Editor NEW
5.3K 125.0 1.5K 5.33 MB

Use Webpack to manage app-like JavaScript modules in Rails

License: MIT License

JavaScript 26.25% Ruby 73.09% Logos 0.54% CSS 0.12%
rails javascript yarn webpack frontend hacktoberfest

webpacker's Introduction

Webpacker has been retired ๐ŸŒ…

Webpacker has served the Rails community for over five years as a bridge to compiled and bundled JavaScript. This bridge is no longer needed for most people in most situations following the release of Rails 7. We now have three great default answers to JavaScript in 2021+, and thus we will no longer be evolving Webpacker in an official Rails capacity.

For applications currently using Webpacker, the first recommendation is to switch to jsbundling-rails with Webpack (or another bundler). You can follow the switching guide, if you choose this option.

Secondly, you may want to try making the jump all the way to import maps. That's the default setup for new Rails 7 applications, but depending on your JavaScript use, it may be a substantial jump.

Finally, you can continue to use Webpacker as-is. We will continue to address security issues on the Ruby side of the gem according to the normal maintenance schedule of Rails. But we will not be updating the gem to include newer versions of the JavaScript libraries. This pertains to the v5 edition of this gem that was included by default with previous versions of Rails.

The development of v6 will not result in an official gem released by the Rails team nor see any future support. But Justin Gordon is continuing that line of development โ€“ including a focus on hot-module reloading features etc โ€“ under a new gem called Shakapacker that is based on the unreleased v6 work from this repository.

Thank you to everyone who has contributed to Webpacker over the last five-plus years!

Please refer to the 5-x-stable branch for 5.x documentation.

webpacker's People

Contributors

amatsuda avatar aried3r avatar crawler avatar dependabot[bot] avatar dhh avatar doits avatar gauravtiwari avatar guillaumebriday avatar guilleiguaran avatar jakeniemiec avatar javan avatar justin808 avatar lazylester avatar maschwenk avatar merqlove avatar olleolleolle avatar palkan avatar pustovalov avatar rafaelfranca avatar renchap avatar rossta avatar schpet avatar sirius248 avatar smondal avatar swrobel avatar t27duck avatar tricknotes avatar ttanimichi avatar yhirano55 avatar ytbryan avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

webpacker's Issues

Webpack Loader Options Plugin Still Needed?

It was added here: 1bc83f0

The LoaderOptionsPlugin is unlike other plugins. It exists to help people move from webpack 1 to webpack 2. With webpack 2 the schema for a webpack.config.js became stricter; no longer open for extension by other loaders / plugins. With webpack 2 the intention is that you pass options directly to loaders / plugins. i.e. options are not global / shared.

And is here: https://github.com/rails/webpacker/blob/master/lib/install/config/development.js#L20

What are the specific loaders that still require this?

I'd be in favor of having some comments in the webpack JS files for when things like this are added for backward compatibility so that we know when to remove them.

Space in dir path prevents webpack-dev-server from running

To replicate this issue,

  • ensure yarn is installed (brew install yarn)
  • create a new Rails 5.1.0.beta1 app with rails new testapp --webpack in a directory hierarchy which has a space in one of the folder names. (/Users/kobaltz/Test Folder/testapp)

image

Running ./bin/webpack-dev-server within the Rails root dir generates the following error

sh: Folder/testapp/node_modules: No such file or directory

If the space in the parent directory's name is removed, webpack-dev-server works.

image

Add option to have css/images managed through webpack

I think it would be useful to have an additional generator that supports all FE assets being managed through Webpack. I'd love to gauge interest and get feedback before I start on a PR.

Background:

As far as I know there, are two basic options for managing images/css/etc in a webpack + rails app.

Option 1: Manage Javascript through Webpack and everything else through Sprockets.
This is only option currently supported out of the box.

  • Advantages: Easy to set up, legacy app friendly, easy to reference images, etc. from erb.
  • Disadvantages: Still clunky (as noted in README). Still no good system for managing vendor CSS dependencies. Doesn't make CSS a first class citizen of the front end app, which means no loading css from node_modules and no support for modular CSS approaches (used by Vue, Material Design, etc.)

Option 2: Manage all assets through Webpack, remove Sprockets.

This involves adding some loaders to webpacker (probably file-loader and sass/css/style loaders) as well as a manifest generator that Rails can use to get properly fingerprinted paths in erb and such.

  • Advantages:
    • Allows easy use of Vue, CSS modules, and lots of other things that frontend developers dig.
    • More broadly, this is the way most frontend apps are structured nowadays. Tutorials and example apps will work out-of-the-box with Rails.
    • Removes Sprockets entirely for apps that don't need it, no more need for two separate asset pipelines. No need to mess with bower or https://rails-assets.org.
  • Fixes a bunch of things in one stroke, eg #91, #79, etc.
  • Disadvantages:
    • Ultimately need to modify or duplicate all existing asset helpers to work with the webpack-generated manifest.
    • Additional webpack complexity around manifest generation and CSS extraction and other things we want production-ready defaults for. Potentially more moving pieces on the webpack side.

I'd be interested in creating a generator to support option 2 (either as an alternative to webpacker:install or as an additional generator that can be run after it.) Option 1 would be left as the default.

I think this feature could also provide the first step on a gradual path to moving Sprockets out of
core. I think the technical risk of relying on Webpack (or another successor library) is less than than the risk of relying on Sprockets. Sprockets is a very complex library (and I suspect a maintenance pain point.) It was a major step forward for its time but is showing its age; most of its functionality is better provided by Webpack, which will soon be part of Rails.

DISABLE_SPRING=1 breaking spring items

Currently building out a Rails app with Webpacker that has gems that rely on spring in multiple areas. One gem were using is dotenv. Dotenv relies on spring to work properly(dotenv), and when the rails-erb-loader is run, this causes errors to be thrown like below:

ERROR in ../app/javascript/packs/demo-client/lib/digestImgPath.js.erb
Module build failed: Error: Command failed: DISABLE_SPRING=1 ../bin/rails runner /Users/Joe/Documents/demo/vendor/node_modules/rails-erb-loader/erb_transformer.rb __RAILS_ERB_LOADER_DELIMETER__ erubis
/Users/Joe/.gem/ruby/2.3.3/gems/spring-2.0.1/lib/spring/configuration.rb:31:in `application_root_path': Spring was unable to find your config/application.rb file. Your project root was detected at /Users/Joe/Documents/demo/vendor, so spring looked for /Users/Joe/Documents/demo/vendor/config/application.rb but it doesn't exist. You can configure the root of your application by setting Spring.application_root in config/spring.rb. (Spring::MissingApplication)
	from /Users/Joe/.gem/ruby/2.3.3/gems/spring-2.0.1/lib/spring/watcher.rb:24:in `watcher'
	from /Users/Joe/.gem/ruby/2.3.3/gems/spring-2.0.1/lib/spring/watcher.rb:28:in `watch'
	from /Users/Joe/.gem/ruby/2.3.3/gems/dotenv-rails-2.1.2/lib/dotenv/rails.rb:10:in `block in <top (required)>'
	from /Users/Joe/.gem/ruby/2.3.3/gems/activesupport-5.0.1/lib/active_support/notifications/fanout.rb:127:in `finish'
	from /Users/Joe/.gem/ruby/2.3.3/gems/activesupport-5.0.1/lib/active_support/notifications/fanout.rb:46:in `block in finish'
	from /Users/Joe/.gem/ruby/2.3.3/gems/activesupport-5.0.1/lib/active_support/notifications/fanout.rb:46:in `each'
	from /Users/Joe/.gem/ruby/2.3.3/gems/activesupport-5.0.1/lib/active_support/notifications/fanout.rb:46:in `finish'
	from /Users/Joe/.gem/ruby/2.3.3/gems/activesupport-5.0.1/lib/active_support/notifications/instrumenter.rb:42:in `finish_with_state'
	from /Users/Joe/.gem/ruby/2.3.3/gems/activesupport-5.0.1/lib/active_support/notifications/instrumenter.rb:27:in `instrument'
	from /Users/Joe/.gem/ruby/2.3.3/gems/activesupport-5.0.1/lib/active_support/notifications.rb:164:in `instrument'
	from /Users/Joe/.gem/ruby/2.3.3/gems/dotenv-2.1.2/lib/dotenv.rb:52:in `instrument'
	from /Users/Joe/.gem/ruby/2.3.3/gems/dotenv-2.1.2/lib/dotenv.rb:16:in `block (2 levels) in load'
	from /Users/Joe/.gem/ruby/2.3.3/gems/dotenv-2.1.2/lib/dotenv.rb:59:in `ignoring_nonexistent_files'
	from /Users/Joe/.gem/ruby/2.3.3/gems/dotenv-2.1.2/lib/dotenv.rb:14:in `block in load'
	from /Users/Joe/.gem/ruby/2.3.3/gems/dotenv-2.1.2/lib/dotenv.rb:46:in `block in with'
	from /Users/Joe/.gem/ruby/2.3.3/gems/dotenv-2.1.2/lib/dotenv.rb:45:in `each'
	from /Users/Joe/.gem/ruby/2.3.3/gems/dotenv-2.1.2/lib/dotenv.rb:45:in `reduce'
	from /Users/Joe/.gem/ruby/2.3.3/gems/dotenv-2.1.2/lib/dotenv.rb:45:in `with'
	from /Users/Joe/.gem/ruby/2.3.3/gems/dotenv-2.1.2/lib/dotenv.rb:13:in `load'
	from /Users/Joe/.gem/ruby/2.3.3/gems/dotenv-rails-2.1.2/lib/dotenv/rails.rb:25:in `load'
	from /Users/Joe/.gem/ruby/2.3.3/gems/dotenv-rails-2.1.2/lib/dotenv/rails.rb:42:in `load'
	from /Users/Joe/.gem/ruby/2.3.3/gems/dotenv-rails-2.1.2/lib/dotenv/rails.rb:45:in `block in <class:Railtie>'
	from /Users/Joe/.gem/ruby/2.3.3/gems/activesupport-5.0.1/lib/active_support/lazy_load_hooks.rb:41:in `execute_hook'
	from /Users/Joe/.gem/ruby/2.3.3/gems/activesupport-5.0.1/lib/active_support/lazy_load_hooks.rb:50:in `block in run_load_hooks'
	from /Users/Joe/.gem/ruby/2.3.3/gems/activesupport-5.0.1/lib/active_support/lazy_load_hooks.rb:49:in `each'
	from /Users/Joe/.gem/ruby/2.3.3/gems/activesupport-5.0.1/lib/active_support/lazy_load_hooks.rb:49:in `run_load_hooks'
	from /Users/Joe/.gem/ruby/2.3.3/gems/railties-5.0.1/lib/rails/application.rb:90:in `inherited'
	from /Users/Joe/Documents/demo/config/application.rb:10:in `<module:demo>'
	from /Users/Joe/Documents/demo/config/application.rb:9:in `<top (required)>'
	from /Users/Joe/.gem/ruby/2.3.3/gems/railties-5.0.1/lib/rails/commands/runner.rb:51:in `require'
	from /Users/Joe/.gem/ruby/2.3.3/gems/railties-5.0.1/lib/rails/commands/runner.rb:51:in `<top (required)>'
	from /Users/Joe/.gem/ruby/2.3.3/gems/railties-5.0.1/lib/rails/commands/commands_tasks.rb:138:in `require'
	from /Users/Joe/.gem/ruby/2.3.3/gems/railties-5.0.1/lib/rails/commands/commands_tasks.rb:138:in `require_command!'
	from /Users/Joe/.gem/ruby/2.3.3/gems/railties-5.0.1/lib/rails/commands/commands_tasks.rb:104:in `runner'
	from /Users/Joe/.gem/ruby/2.3.3/gems/railties-5.0.1/lib/rails/commands/commands_tasks.rb:49:in `run_command!'
	from /Users/Joe/.gem/ruby/2.3.3/gems/railties-5.0.1/lib/rails/commands.rb:18:in `<top (required)>'
	from ../bin/rails:9:in `require'
	from ../bin/rails:9:in `<main>'

    at ChildProcess.exithandler (child_process.js:206:12)
    at emitTwo (events.js:106:13)
    at ChildProcess.emit (events.js:191:7)
    at maybeClose (internal/child_process.js:877:16)
    at Socket.<anonymous> (internal/child_process.js:334:11)
    at emitOne (events.js:96:13)
    at Socket.emit (events.js:188:7)
    at Pipe._handle.close [as _onclose] (net.js:498:12)
 @ ../app/javascript/packs/demo-client/components/contacts/filters/shared/FilterTitle.jsx 15:23-70
 @ ../app/javascript/packs/demo-client/components/contacts/filters/location/LocationFilterTitle.jsx
 @ ../app/javascript/packs/demo-client/components/contacts/filters/location/LocationFilter.jsx
 @ ../app/javascript/packs/demo-client/containers/contacts/sub_containers/FiltersContainer.jsx
 @ ../app/javascript/packs/demo-client/containers/contacts/ContactsContainer.jsx
 @ ../app/javascript/packs/demo-client/containers/ErbWrapper.jsx
 @ ../app/javascript/packs/demo-client/components.js
 @ ../app/javascript/packs/demo-client.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ../app/javascript/packs/demo-client.js

This error doesn't come up when I don't have a .env file, but is there some way to get around this issue?

Webpacker commit: ef24b74

Need a standard lint setup for contributors

Is there an eslint configuration that should pass for the generated files?

I'd recommend this one solely because it's so widely used and well supported:

https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb

While a particular one is not so critical, I'd err on the side of being stricter than looser.

The files included by the generator should pass some lint configuration, and supposing they change in the future, the linter should be run as part of CI.

For example, this would be file to check. https://github.com/rails/webpacker/blob/master/lib/install/config/development.js

This project could have a package.json with standard tasks such as 'lint' and that can be run by CI.

If deemed useful, I could create a PR.

Suggestions on Directory Organization

I'd suggest that webpacker follow the JavaScript, CSS, Images, Fonts organization that we've used for React on Rails. It's really quite simple:

  • All client-related files go under a top level directory called /client

Over the past 1.5+ years, we've found this setup to be extremely popular with our community. This setup has several advantages:

  1. Client-side specialists can use a client-side editor, such as Atom or Webstorm and simply open the /client directory. Under the current structure, one open the "javascript" folder, but then several key files, such as the package.json, node_modules, and webpack configs are not accessible.
  2. Client side linting and testing is more cleanly organized.
  3. Backend specialists can have their editor ignore the /client directory.
  4. The problem of having the node_modules be outside the top level is easily solved by having a minimal package.json like this. The postinstall script will dig into the /client directory and run yarn.
{
  "private": true,
  "scripts": {
    "postinstall": "cd client && yarn",
  }
}

Possibly, the server side could eventually go under /server so the number of top level directories is minimal.

https://github.com/gauravtiwari/webpacker-example-app

2017-02-26_20-54-03

Default to es2017

Let's give the people async/await by default (and the other es2017 goodies).

`bin/rake webpacker:compile` fails with angular example

rails (5.0.1)
webpacker (0.2)

Steps to reproduce:

$ rails new foo
$ cd foo
$ bin/rake webpacker:install
$ bin/rake webpacker:install:angular
$ bin/rake webpacker:compile

compile fails with the following output:

** Invoke webpacker:compile (first_time)
** Execute webpacker:compile
rake aborted!
JSON::ParserError: 743: unexpected token at 'ts-loader: Using [email protected] and /Users/taboularasa/work/foo/tsconfig.json
...

I'm willing an motivated to get this working but could really use some input from anyone more familiar

Support test rails enviroment

Hi,

maybe I am doing it wrong, but when I run my specs for the application with rspec,
it still tries to load the development.js file.
I tried to create a test.js and thought as RAILS_ENV gets picked up by bin/webpack anyway it should be fine. But it's not working.
Even if I call RAILS_ENV=test rspec spec/... it will be available inside the app, but is ignored by the webpack script.

Am I missing something here?

Best,
Roman

index.coffee ? :)

First one, thanks for this gem, awesome tool ๐Ÿ‘ !
Tried master version inside Rails::Engine.

Seems that requiring packs with coffee index like ../packs/[some]/index.coffee works only in the case:

require('./[some]/')

Suggested Refinements on the Purpose and Scope of Webpacker

Current Description:

Use Webpack to manage app-like JavaScript modules in Rails

I'd suggest the following description:

Provide Rails support for the webpack module bundler for client-side assets.

I had a nice discussion with @gauravtiwari. Based on that discussion, and his example of the asset_pack_tag, I'd like to suggest the following guidelines for this gem:

  1. Provide no interference with the legacy Asset Pipeline. /app/assets contains files used by the Asset Pipeline.
  2. Provide no requirement that sprockets-rails be included in the Gemfile.
  3. Require that the webpack configs always use the ManifestPlugin per the documentation regarding webpack caching and filename hashes. This is the magic glue that will allow the helpers to know the file paths for the view and controller helpers.
  4. Provide controller helpers for getting the path to the created webpack JavaScript or CSS bundles.
  5. Provide view helpers for exposing webpack created JavaScript and stylesheet tag helpers that are the webpack equivalents of the javascript_include_tag and the stylesheet_link_tag. These view helpers are smart enough to understand the 3 modes of running webpack to create assets:
  6. Static files created for development.
  7. Running the webpack-dev-server for providing hot-reloadable files for development.
  8. Static, hashed files created for production deployment, using the chunkhash technique for asset caching.
  9. Automatically insert a precompile task to build the production assets for webpack (unless overridden in the config/webpack.rb file.
  10. Via a new file, /config/webpack.rb, allow configuration of the controller and view helpers in a convenient manner that does not mandate any particular location of the webpack configuration files nor the subdirectory under the /public directory for deployment.

A gem like the above can be usable for any Rails 4.x and greater project. So the current Rails codebase would love this.

Optional for Rails 5.1

  • Provide a generator to create the simplest possible example of using Webpack for assets with clear documentation to consult the current Webpack v2 docs for more information. Any parts of this work will depend on Rails 5.1 should be put into a separate gem so the core gem can be usable by Rails 4 and above.

Out of Scope

  • Integrations with other JavaScript frameworks, such as React, Angular, etc. These can be done in other gems.
  • Anything beyond a basic webpack config, as the maintenance of this config would be far greater than the basics needed to support the scope of the gem.

Documentation

  • The Rails Guide for the Asset Pipeline should be updated to reflect usage of either Sprockets or Webpack. For backward compatibility reasons, it might make sense to clearly leave /app/assets/XXXX as Sprockets supported, and /app/[good-name-for-webpack-stuff] as for the webpack parts. Some parts of this Rails Guide apply to topics outside of Sprockets, namely Section 4: In Production.

Conclusion

A minimal, yet complete, standard mechanism to integrate the webpack JS and CSS output into the Rails views will foster the development of Rails gems to provide integrations of JS frameworks with Rails. An example of such a webpack based framework is React on Rails.

rails new --webpack fails with "Don't know how to build task 'webpacker:install'"

OK, maybe I am just holding it wrong, but I could not set up a new Rails project from rails master with rails new --webpack.

# from inside the rails repo, master branch
bundle exec railties/exe/rails new ../rails-5.1-webpack --webpack --dev
# more output from rails new omitted...
Bundle complete! 14 Gemfile dependencies, 60 gems now installed.
Use `bundle show [gemname]` to see where a bundled gem is installed.
       rails  webpacker:install
rails aborted!
Don't know how to build task 'webpacker:install' (see --tasks)
/Users/sebroeder/Developer/ruby/rails-master/railties/lib/rails/commands/rake/rake_command.rb:21:in `block in perform'
/Users/sebroeder/Developer/ruby/rails-master/railties/lib/rails/commands/rake/rake_command.rb:18:in `perform'
/Users/sebroeder/Developer/ruby/rails-master/railties/lib/rails/command.rb:36:in `invoke'
/Users/sebroeder/Developer/ruby/rails-master/railties/lib/rails/commands.rb:16:in `<top (required)>'
bin/rails:4:in `require'
bin/rails:4:in `<main>'
(See full trace by running task with --trace)

Running rails webpacker:install from inside the new project after the failed rails new installs successfully, however:

cd ../rails-5.1-webpack/
bundle exec rails webpacker:install
      create  app/javascript
      create  app/javascript/packs/application.js
       exist  bin
      create  bin/webpack-dev-server
      create  bin/webpack-watcher
      create  bin/webpack
   identical  bin/yarn
      create  config/webpack
      create  config/webpack/development.js
      create  config/webpack/production.js
      create  config/webpack/shared.js
      append  .gitignore
         run  ./bin/yarn add --dev webpack@beta webpack-merge webpack-dev-server@beta path-complete-extname babel-loader babel-core babel-preset-latest coffee-loader coffee-script rails-erb-loader from "."
yarn add v0.18.1
info No lockfile found.
[1/4] ๐Ÿ”  Resolving packages...
[2/4] ๐Ÿšš  Fetching packages...
[3/4] ๐Ÿ”—  Linking dependencies...
warning Unmet peer dependency "babel-core@^6.0.0".
warning Unmet peer dependency "[email protected]".
[4/4] ๐Ÿ“ƒ  Building fresh packages...
success Saved lockfile.
success Saved 441 new dependencies.

Is this just user error or a bug in rails new --webpack?

Should "rails new --webpack=..." stop when bin/yarn fails?

Locally I was running node version 5.0.0 which caused an error during the yarn install step of rails new.

loader-runner (a sub-dependency of webpack) failed because of its engines requirement in package.json. This prevented ./bin/webpack-watcher from running because it was not installed in the node_modules folder.

My question is should the rails new --wepback=... command fail if there is an issue during the yarn install? After rails new ran and completed, with errors further up in the logs, it took some time to trace back why ./bin/webpacker-watcher was not running.


Below is the full output of my rails new commands (omitted large output for brevity using [...]). The current working directory of the command is the root directory of cloning rails/rails from github. The error occurs in the logs after run ./bin/yarn add --dev webpack webpack-merge webpack-dev-server path-complete-extname babel-loader babel-core babel-preset-latest coffee-loader coffee-script rails-erb-loader glob from "."

$ ./rails/railties/exe/rails new my5oneapp --edge --webpack=react
      create  
      create  README.md
      create  Rakefile
      [...]
      create  vendor/.keep
      create  package.json
      remove  config/initializers/cors.rb
         run  bundle install
Fetching https://github.com/rails/rails.git
[...]
Fetching dependency metadata from https://rubygems.org/.
Resolving dependencies...
Using rake 12.0.0
Using concurrent-ruby 1.0.4
[...]
Using webpacker 0.2 from https://github.com/rails/webpacker.git (at master@35586c7)
Using rails 5.1.0.alpha from https://github.com/rails/rails.git (at master@ecca24e)
Using sass-rails 6.0.0.beta1 from https://github.com/rails/sass-rails.git (at master@dfbcc6a)
Bundle complete! 17 Gemfile dependencies, 70 gems now installed.
Use `bundle show [gemname]` to see where a bundled gem is installed.
       rails  webpacker:install
      create  app/javascript
      create  app/javascript/packs/application.js
       exist  bin
      create  bin/webpack-dev-server
      create  bin/webpack-watcher
      create  bin/webpack
    conflict  bin/yarn
Overwrite /Users/mmolchany/development/my5oneapp/bin/yarn? (enter "h" for help) [Ynaqdh] 
       force  bin/yarn
      create  config/webpack
      create  config/webpack/development.js
      create  config/webpack/production.js
      create  config/webpack/shared.js
      append  .gitignore
         run  ./bin/yarn add --dev webpack webpack-merge webpack-dev-server path-complete-extname babel-loader babel-core babel-preset-latest coffee-loader coffee-script rails-erb-loader glob from "."
yarn add v0.19.1
info No lockfile found.
[1/4] ๐Ÿ”  Resolving packages...
[2/4] ๐Ÿšš  Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version ">=4.3.0 <5.0.0 || >=5.10".
error Found incompatible module
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
       rails  webpacker:install:react
Replacing loader presets to include react in /Users/mmolchany/development/my5oneapp/config/webpack/shared.js
Replacing loader test to include react in /Users/mmolchany/development/my5oneapp/config/webpack/shared.js
Copying react example to app/javascript/packs/hello_react.js
yarn add v0.19.1
info No lockfile found.
[1/4] ๐Ÿ”  Resolving packages...
[2/4] ๐Ÿšš  Fetching packages...
[3/4] ๐Ÿ”—  Linking dependencies...
[4/4] ๐Ÿ“ƒ  Building fresh packages...
success Saved lockfile.
success Saved 17 new dependencies.

Misc questions about config extension

I'm building in Vue support now and have run into a couple questions:

1. Supporting Vue's single-file components

Vue's single-file components include a very useful feature to automatically scope CSS, but I saw that CSS and image support in webpacker has been intentionally left out for now. Does that mean you'd just like to keep it out of the default config? In other words, would it still be a welcome addition in an installer? Without css-loader or file-loader, the basic functionality of .vue files will still work - they'd simply throw an error if a user tried to add a <style> tag or provide a relative link for an image in a <template>.

On a related note, would it be possible to share more of the reasoning behind leaving out CSS and image support? I see everything-is-a-module as Webpack's primary feature and it actually doesn't take very much for very basic CSS and image support (for example).

2. Out-of-the-box support for .jsx extensions

As I can't imagine a strategy for JSX support that wouldn't involve Babel, I was wondering if the .jsx extension should be matched (but not supported) out of the box. My thinking is it will save installers from having to patch that matcher, plus the resulting syntax error would point users closer to the actual problem than a module-not-found error. This is also the strategy preferred by some other libraries, such as webpack-blocks. Thoughts?

3. Alternative strategies for patching the Webpack config

I'm a bit uncomfortable with the string replacement strategy currently used to extend the Webpack config. It seems like it would be quite brittle. Instead of using rake tasks to patch that file, what would you think about introducing a config file that the Webpack config could read to patch itself? It might look something like:

babel:
  min_stage: 3

vue:
  jsx: true
  single_file_components: true

A rake task could still be used to generate an example (and perhaps also check to ensure that the features in the example are activated).

I'm not married to this specific strategy. Any other ideas to make config extension more sustainable are very welcome!

conflict over `bin/yarn` when generating a new Rails app with webpacker

If I try to generate a brand new Rails app with the current master (8de6807) and the command:

~/code/rails$ railties/exe/rails new myapp --webpack=react --edge

then I get the following conflict on the file bin/yarn:

      create  
      create  README.md
      [...]
      create  bin/webpack
    conflict  bin/yarn
Overwrite /Users/claudiob/code/rails/myapp/bin/yarn? (enter "h" for help) [Ynaqdh]

The diff in the conflict is as follows:

-VENDOR_PATH = File.expand_path('..', __dir__)
-Dir.chdir(VENDOR_PATH) do
+YARN_ROOT = File.expand_path('../', __dir__)
+Dir.chdir(YARN_ROOT) do

The conflict arises becuase, when generating a new Rails app:

and the two files are different.

Digests lookup fails due to invalid path construction

Steps to reproduce

RAILS_ENV=production bundle exec rails assets:precompile
  1. The digest lookup fails in production with following packs path,
# current packs output config
# https://github.com/rails/webpacker/blob/master/lib/webpacker/railtie.rb#L12
config.x.webpacker[:packs_dist_path] = '/packs'
config.x.webpacker[:digests_path] = \
    Rails.root.join(
      'public',
      config.x.webpacker[:packs_dist_path],
      'digests.json'
    )

# produces this
# notice the path constructed isn't correct because we get '/packs', should be '/public/packs'
Rails.application.config.x.webpacker
=> {:packs_dist_path=>"/packs", :digesting=>true,  :digests_path=>#<Pathname:/packs/digests.json>}

# which causes the lookup to fail as it can't find the digests.json in /packs
Webpacker::Digests.lookup('home-react-component')
Webpacker::Digests::DigestError: Can\'t find home-react-component in #<Webpacker::Digests:0x007fe305dc7e28 @path=#<Pathname:/public/packs/digests.json>, @digests={}>
  1. We get same problem here again during compilation (wrong path construction),
    packs_path = Rails.root.join('public', dist_path) || File.dirname(digests_path)
Error: EROFS: read-only file system, mkdir '/packs'
  1. Simply changing /packs to packs introduces another problem,
ActionView::Template::Error (The asset "packs/home-react-component-5939abb942a18ece63be.js" is not present in the asset pipeline.):

So, it seems we have to use another variable instead of packs_dist_path to fix this.

third party tools blowing up trying to find package.json and node_modules

Howdy! Thanks for the tool! I'm not trying to reopen a bike-shed, but don't know how to deal with the issues that this is raising. I'm down for any solution that works :)

I'm trying to get eslint set up and it's blowing up, trying to find the package.json.

I got it set up another way, and then when it was linting, it was raising a bunch of "cant_resolve module" issues, which I'm assuming is because node_modules is buried in vendor, but I could be jumping to a conclusion.

My webpack knowledge is very limited (which is why I'm using this tool), is there some magic env variable I should be using to point the tooling at package.json in a certain way? Should I just be running this from within /vendor ?

If you can point me in the right direction if you already have a workaround, I could help document it better, otherwise, heads up, this is happening.

I'm super psyched on how all of this is evolving.

sparkly$ vendor/node_modules/.bin/eslint --init
? How would you like to configure ESLint? Answer questions about your style
? Are you using ECMAScript 6 features? Yes
? Are you using ES6 modules? Yes
? Where will your code run? Browser
? Do you use CommonJS? Yes
? Do you use JSX? Yes
? Do you use React? Yes
? What style of indentation do you use? Spaces
? What quotes do you use for strings? Single
? What line endings do you use? Unix
? Do you require semicolons? No
? What format do you want your config file to be in? JavaScript
Could not find a package.json file. Run 'npm init' to create one.
Error: Could not find a package.json file. Run 'npm init' to create one.
    at check (/Users/dennis/workspace/sparkly/vendor/node_modules/eslint/lib/util/npm-util.js:76:15)
    at Object.checkDevDeps (/Users/dennis/workspace/sparkly/vendor/node_modules/eslint/lib/util/npm-util.js:124:12)
    at installModules (/Users/dennis/workspace/sparkly/vendor/node_modules/eslint/lib/config/config-initializer.js:79:35)
    at processAnswers (/Users/dennis/workspace/sparkly/vendor/node_modules/eslint/lib/config/config-initializer.js:245:5)
    at null.completed (/Users/dennis/workspace/sparkly/vendor/node_modules/eslint/lib/config/config-initializer.js:468:30)
    at PromptUI.onCompletion (/Users/dennis/workspace/sparkly/vendor/node_modules/inquirer/lib/ui/prompt.js:57:10)
    at AnonymousObserver.Rx.AnonymousObserver.AnonymousObserver.completed (/Users/dennis/workspace/sparkly/vendor/node_modules/rx-lite/rx.lite.js:1550:12)
    at AnonymousObserver.Rx.internals.AbstractObserver.AbstractObserver.onCompleted (/Users/dennis/workspace/sparkly/vendor/node_modules/rx-lite/rx.lite.js:1489:14)
    at Subject.Rx.Subject.addProperties.onCompleted (/Users/dennis/workspace/sparkly/vendor/node_modules/rx-lite/rx.lite.js:5871:19)
    at Subject.tryCatcher (/Users/dennis/workspace/sparkly/vendor/node_modules/rx-lite/rx.lite.js:63:31)

Task to install with Typescript + Angular

In addition to the rails webpacker:install:react task, would be great to support rails webpacker:install:angular that automatically installs required deps and updates relevant configs.

Configure pack host and path

Right now, javascript_pack_tag just outputs on the root path of the current host. It should be possible to configure the host and the prefix path just like it is with the asset pipeline. Chief benefit is to allow for use of CDNs.

Webpack executable not found on production

Related to #116. Basically, when using the --production flag, or NODE_ENV=production environment variable, Yarn will not install any package listed in devDependencies. https://yarnpkg.com/lang/en/docs/cli/install/#toc-yarn-install-production

In our config files we are using packages that also needs to be available on production to compile the assets. Therefore, the dependencies which are used in production should be moved to dependencies block instead of devDependencies.

I can make a PR once #111 is merged

Advanced React integration

Hey there !

First of all, thanks for working on this, this is a big step for Rails and hopefully a strong foundation for many new things.

I have been playing with rails 5.1 & webpacker and I am wondering if you (@dhh ?) have opinions/plans for a deeper React integration. Current React/Rails gems (https://github.com/reactjs/react-rails and https://github.com/shakacode/react_on_rails) does not integrate well with Webpacker and I am interested in trying to implement some of the features they provide on top of Webpacker :

I dont think webpacker is the place for all of those features and a webpacker-react gem would probably make sense. In this case, should the React generator move to it ? Do you have any opinion on this ? Any plans ?

I would love to have your ideas on how to properly implement this, and if you have any pointers on how to do so. Also, should this be managed as an official Rails project, like webpacker, or do you think this is out of scope ?

Testing

Interested to hear thoughts about tests using webpacker and rails. I noticed there is no config for the test env for instance.

Are there any conventions? Like where to put tests? We had them in spec/javascripts before but now I'm wondering if I'm meant to put them in app/javascript. Also, should tests be bundled to its own bundle, app/javascript/packs/tests.js or would you bundle the tests together with the rest of the app code but skip them in production or something?

got a high level overview?

Hey all, great to see rails finally coming around to the idea of built-in support for a modern js stack.

Last year I converted a 60k sprockets/coffeescript/backbone project over to webpack/babel/react and learned a lot about how to get these two systems playing nicely with each other in the process, without pulling your hair out in the transition process. Happy to offer whatever advice I can on the lessons I learned doing so and help out with the implementation too.

Is there a high-level overview anywhere that describes the general architecture you're shooting for with this?

  • What will the interop between sprockets/webpack look like? Will it be one way or both?
  • Do you plan to support webpack's dev server or push everything through sprockets instead? (we've been more than happy / productive letting sprockets run the show -- we use storybook for rapid component development instead)

IMO, one of the biggest value-adds you can create with this is an opinionated stance on babel/wepack plugin presets and path resolution. That's where most of the friction is getting started (and where most of the gains are for keeping large javascript apps well organized).

eslint-loader + es2015/react/stage-0 + coffee-loader/add-module-exports (required for seamless commonjs interop) + style-loader/postcss is a great combo.

Also, I wouldn't write-off webpack's css and image support just yet. They can live happily together alongside sprockets and there's good reason to support both (inlining tiny images and allowing react components to directly require the css files they need -- keeping the two next to each other makes things far easier to develop/maintain).

There's lots of good work being done on the inline-style front but FWIW I haven't found anything I'm comfortable with using in production. Selector-based styles still get the job done just fine and ease the transition process from sprockets to webpack.

Just wanted to throw this out there in case it helps. Can't wait to see it land! I think rails api + actioncable + built-in webpack/babel support is going to be huge.

ExecJS support

Any chance we can get ExecJS support for running webpack?

Deployment

Wondering how to deal with deployment to, say Heroku, or running tests on Travis.

I noticed this gem hooks into assets:precompile where it runs webpack. That seems to be a good solution since Heroku runs this when deploying. However, the yarn dependencies need to be installed somehow.

Would it make sense to run bin/yarn install as part of this gem's assets:precompile hook? Or how would you install those dependencies on Heroku? Found this commit which said it would be handled in Rails 5.1, but didn't say how: d2a6537

"packs" or "bundles"

It seems that the term "pack" is synonymous with the webpack documentation for bundles.

Eventually, we'll want to configure larger Rails apps to support Code Splitting.

The advantage of using the term "bundles" in the directories and docs is that it will be immediately obvious to the experienced webpack users what these are.

However, maybe we want to use the terms "pack" and "packs" to specifically mean webpack bundles configured via the Rails default configuration of entry points. So maybe "packs" is better?
(but per discussion below, we cannot restrict finding the "pack" files).

Another issue we need to consider is splitting the vendor bundle.

Luckily, Webpack now supports an implicit vendor bundle.

This means that we'll have a "pack" (or bundle) that does not map to a file in the /app/javascripts/packs directory. So long as we're depending on the manifest file that @gauravtiwari is using, and not so much on what's in the "packs" directory, then we should be covered.

Plus, there's another import piece to the puzzle of using a "vendor bundle", which is the manifest file.

Pause server and wait for Webpack to compile

This is an issue we've ran into with our own Webpack solution as well as something this plugin will face. When you save a asset and refresh the page you're not exactly sure if the asset has finished compiling. Most of the time the bundle compilation is super fast if extracting out vendor dependencies, but it can an issue. This is something the Webpack dev server kind of does for you but in this case we're not running through it. We've landed on just using the notification plugin to show OS notification when bundle has compiled successfully(or has failed). While this works it's not ideal. Another solution is Live Reload or Browser sync, but I've never been a huge fan of these outside of CSS reloading.

It would be nice to pause the server until asset has finished compiling completely. This is something the Django Webpack project does. https://github.com/owais/django-webpack-loader/blob/6c297a038a60f21356d4dc6bbfedd8ad49a34731/webpack_loader/loader.py

It could even be taken a step farther and show errors in the browser much like sprockets does. The stats.json holds most of this information.

Is this something anyone is interested in?

Intentions regarding webpack-dev-server?

Hello,

I've also been experimenting with Ruby / Webpack integration. My focus has mainly been on getting the developer experience similar to the existing asset-pipeline, but with the assets served via webpack-dev-server, so that source maps work and to utilize hot-reloading.

To that end I've created a few small wrappers for yarn and webpack. Both are extremely embryonic at the moment, and I'm quite happy to abandon them in favor of other solution(s) that are perhaps more established.

Do you envision webpacker controlling webpack-dev-server in any way? My intended solution is to start it in a background process and provide asset tag helpers that would point to the appropriate address/port and paths. I'd also like the solution to be Rails agnostic so it would work stand-alone, much like Sprockets does, since I also do some work with Sinatra. If you see those goals as compatible, I'd love to drop the work I've done and contribute to webpacker.

Thoughts?

[Q] Server side rendering

This is a question, not an issue with the project -- feel free to close it if it shouldn't be here.

In one of my recent projects, I gave up using Rails views completely and used React components instead. The Rails router takes care of the API endpoints and the react router takes care of the views. The controllers would serve the resources in JSON to the react views. One problem I couldn't solve with this setup was server-side rendering.

I think a lot of people will try what I did when webpacker becomes more mature. Do you have an idea about how to solve server-side-rendering problem when people use Rails as an API backend and use JS to render the views?

node-sass issue

Hello everyone, I am using webpacker and trying to deploy the app to a Ubuntu server. I got the following issue in my browser console.

Uncaught Error: Module build failed: Error: Missing binding /root/fountain/releases/20170119052638/vendor/node_modules/node-sass/vendor/linux-x64-48/binding.node
Node Sass could not find a binding for your current environment: Linux 64-bit with Node.js 6.x

Found bindings for the following environments:

  • OS X 64-bit with Node.js 6.x

Consider removing third party integrations out of this gem.

Some initial discussion here: #109 (comment)

Webpacker, as name suggests should only be used for adding webpack and yarn support to any Rails app because there are just tons of frontend frameworks and libraries and eventually everyone would like have support, which will make this gem cluttered up, introduce bugs and eventually hard to maintain. For ex, this is how webpacker rake task now looks like, https://github.com/rails/webpacker/blob/master/lib/tasks/webpacker.rake

Therefore, it seems that it's best we leave these integrations out to community. @renchap is already working on integration for react and we can create a separate one for angular and vue too. He suggested that, if the Rails team prefer to have "official" integrations, we could move all these JS framework adapters into the official Rails GH team repo. Perhaps, something like omniauth with it's many adapters.

Insure yarn is installed before running the install template.

As a n00b, I installed the gem and ran bin/rails webpacker:install

Then I saw the generator leave this message:

...
         run  ./bin/yarn add --dev webpack@beta webpack-merge path-complete-extname babel-loader babel-core babel-preset-latest coffee-loader coffee-script rails-erb-loader from "."
Yarn executable was not detected in the system.
Download Yarn at https://yarnpkg.com/en/docs/install

This error message should tell me what to do after I download Yarn.

Perhaps add a check for yarn prior to here:

exec "./bin/rails app:template LOCATION=#{WEBPACKER_APP_TEMPLATE_PATH}"
?

P.S. I was using rails 5.0.1, which does not have yarn installed by default. After I ran brew install yarn and reran the generator all was well.

Deploy on AWS Beanstalk

I'm breaking out a discussion (from #116) for the best approach deployment of Rails with webpacker and yarn on AWS Elastic Beanstalk (and maybe EC2).

I'm using the latest Ruby platform on AWS EBS:

64bit Amazon Linux 2016.09 v2.3.1 running Ruby 2.3 (Puma)

I encounter errors upon deploy with:

$ eb deploy

Some key log messages are that yarn is not detected:

Yarn executable was not detected in the system.
Download Yarn at https://yarnpkg.com/en/docs/install

and a missing webpack node module:

sh: ./node_modules/webpack/bin/webpack.js: No such file or directory

Using Rails 5.0.1 and webpacker 1.0, the rake assets:precompile fails due the missing webpack module. However, I know that the reason the module is missing is because none of my modules are installed, because yarn is not available.

I solved this by installing yarn globally on the server, but I would prefer that I could check for a missing yarn and install prior to rake assets:precompile.

Is anyone else trying to solve the same problem? Is it overkill to ask that yarn be installed upon deploy?

Code Spliting

Webpack 2 documentation on this topic has not been written as of this writing, but it hasn't changed from Webpack 1 to much.

var webpack = require("webpack");

module.exports = {
  entry: {
    app: "./app.js",
    vendor: ["jquery", "underscore", ...],
  },
  output: {
    filename: "bundle.js"
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js")
  ]
}

Source: https://webpack.github.io/docs/code-splitting.html#split-app-and-vendor-code

Compile as part of `rails assets:precompile`.

We were using ReactOnRails before trying Webpacker. In order to get Heroku to compile the assets I had to add the following rake task.

Rake::Task['assets:precompile']
  .clear_prerequisites
  .enhance(['assets:compile_environment'])

namespace :assets do
  # In this task, set prerequisites for the assets:precompile task
  task compile_environment: :webpack do
    Rake::Task['assets:environment'].invoke
  end

  desc 'Compile assets with webpack'
  task :webpack do
    sh 'bundle exec rails webpacker:compile'
  end
end

Anyway we can make this part of webpacker?

Include files coming from engines

Will JS files coming from engines be available to be required in pack?

My use case is a library that's composed by many pluggable engines, some of them having complex react components I'm currently building with webpack. I'd like to somehow be able to create a single compiled file in the end at the application level.

One solution would be to add a bundle.js file for each engine and version control it into the repo, but then I'm duplicating dependencies - react, for example, as well as any other one.

In my scenario, the ideal solution is to have a single entry point in my application that requires files from engines, the same way they would be required if they were npm packages.

So, in my application.js file, I'd like to have:

require('plugin1/application.js');
require('plugin2/application.js');

Thanks for making the effort to integrate webpack into rails!

[Question] How are you handling npm tasks and dependencies?

I've just begun using Webpacker in a Rails project to replace my use of Gulp. As someone coming from a primarily node/js background, I've noticed a few immediate issues that I've developed workarounds to, but am wondering if there are any better ways to accomplish what I'm trying to do within Rails.

  1. Packages that use node, but contain code in the /javascript folder don't know where to find their module dependencies. This issue came up for me primarily with my use of Jest and resulted in errors such as Couldn't find preset "es2015" relative to directory .../javascript/packs when running my tests from within the /packs folder.

  2. In a typical node app, you would call your scripts such as npm test from the root directory. With the way Webpacker is currently setup, you must cd into the /vendor folder before you can run any npm tasks.

  3. It seems like it will be confusing to onboard new developers onto a project by telling them that you can't type yarn to install your npm files, but rather, you have to type bin/yarn

My solution to the first two issues above has been to symlink the node_modules folder and the package.json file to the root directory. Symlinking the node_modules folder has successfully resolved my issue with Jest not being able to find files that it requires, and symlinking package.json allows me to run npm scripts from the root folder. For anyone interested in following that approach, in terminal, from the root of your app you can do:

ls -s vendor/node_modules node_modules
ls -s vendor/package.json package.json

To somewhat resolve the third issue, I made an invalid yarn.lock file containing a warning in my root directory that causes running yarn to break. Someone debugging the yarn file will see that they should be using the binstub instead:

### yarn.lock
# Do not run `YARN` in the root directory!
# Use `./bin/yarn` to install dependencies!
This line is just to break the yarn install :)

Now I'm wondering, are these approaches correct? Has anyone developed a better way to resolve these issues? It just seems odd to me now that the two main files/folders in my /vendor folder are being symlinked in the root folder of my Rails app.

Expose bundles to Sprockets

I don't know the correct way to go about this, but I need to load a bundled file through sprockets for a gem to use it (react-rails). Basically, I expose a module globally in a pack (using webpack's library output option) and I need to point react-rails to this bundle to pre-render some stuff with ExecJS, but react-rails loads js through sprockets, right now if I manually add the pack to the assets path in the assets initialisers, I can get the server-side renderer to load it through sprockets, but it doesn't detect changes to it, which causes the server rendered version to be out of sync with the client side version (which loads the bundle with the javascript_pack helper). I can only assume this is going to be an even bigger problem in production. What I guess I need is an interface for sprockets to load these bundles, does that make sense as part of this gem?

For reference, have a look at the repo I'm working on, it is thoroughly explained in the README.

Heroku error: didn't find any digests file && ActionView::Template::Error (Can't find hello_react)

Step to reproduce:

  1. rails new myapp -d postgresql
  2. add webpacker to gemfile gem 'webpacker', :git => "https://github.com/rails/webpacker.git"
  3. bundle install
  4. rails webpacker:install
  5. rails webpacker:install:vue
  6. rails webpacker:compile
  7. use the <%= javascript_pack_tag 'hello_vue' %>
  8. test on localhost (It works*)
  9. heroku create webpacker-demos-123
  10. git remote add
  11. push to heroku (don't work*)

ERROR (didn't find any digests file)

remote: Using webpacker 1.0 from https://github.com/rails/webpacker.git (at master@8f584dd)
remote: Bundle complete! 16 Gemfile dependencies, 54 gems now installed.
remote: Gems in the groups development and test were not installed.
remote: Bundled gems are installed into ./vendor/bundle.
remote: Bundle completed (3.32s)
remote: Cleaning up the bundler cache.
remote: -----> Detecting rake tasks
remote: -----> Preparing app for Rails asset pipeline
remote: Running: rake assets:precompile
remote: I, [2017-02-25T01:31:43.346954 #437] INFO -- : Didn't find any digests file at /tmp/build_a7f573d5e29cf560546c07e2807f75aa/public/packs/digests.json. You must first compile the packs via rails webpacker:compile
remote: sh: 1: ./node_modules/webpack/bin/webpack.js: not found
remote: !
remote: ! Precompiling assets failed.
remote: !
remote: ! Push rejected, failed to compile Ruby app.
remote:
remote: ! Push failed
remote: Verifying deploy...
remote:
remote: ! Push rejected to webpacker-demos.
remote:
To https://git.heroku.com/webpacker-demos.git
! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/webpacker-demos.git'
pushing to origin/master

To fix the above error, turns out I need to rake assets:precompile instead of rails webpacker:compile. Should the error message be modified?

Once the assets are precompiled. Pushing to heroku works but leads to another error ( ActionView::Template::Error (Can't find hello_react))

2017-02-25T01:41:14.753037+00:00 heroku[router]: at=info method=GET path="/" host=webpacker-demos.herokuapp.com request_id=44e6cff5-5bbc-46d9-b84c-ced9704e12c3 fwd="138.75.142.195" dyno=web.1 connect=0ms service=35ms status=500 bytes=1669
2017-02-25T01:41:14.730223+00:00 app[web.1]: I, [2017-02-25T01:41:14.730082 #4] INFO -- : [44e6cff5-5bbc-46d9-b84c-ced9704e12c3] Started GET "/" for 138.75.142.195 at 2017-02-25 01:41:14 +0000
2017-02-25T01:41:14.734543+00:00 app[web.1]: I, [2017-02-25T01:41:14.734419 #4] INFO -- : [44e6cff5-5bbc-46d9-b84c-ced9704e12c3] Processing by FrontpagesController#index as HTML
2017-02-25T01:41:14.750165+00:00 app[web.1]: I, [2017-02-25T01:41:14.750028 #4] INFO -- : [44e6cff5-5bbc-46d9-b84c-ced9704e12c3] Rendering frontpages/index.html.erb within layouts/application
2017-02-25T01:41:14.752474+00:00 app[web.1]: I, [2017-02-25T01:41:14.752379 #4] INFO -- : [44e6cff5-5bbc-46d9-b84c-ced9704e12c3] Rendered frontpages/index.html.erb within layouts/application (2.1ms)
2017-02-25T01:41:14.752779+00:00 app[web.1]: I, [2017-02-25T01:41:14.752711 #4] INFO -- : [44e6cff5-5bbc-46d9-b84c-ced9704e12c3] Completed 500 Internal Server Error in 18ms
2017-02-25T01:41:14.754036+00:00 app[web.1]: F, [2017-02-25T01:41:14.753928 #4] FATAL -- : [44e6cff5-5bbc-46d9-b84c-ced9704e12c3]
2017-02-25T01:41:14.754105+00:00 app[web.1]: F, [2017-02-25T01:41:14.754040 #4] FATAL -- : [44e6cff5-5bbc-46d9-b84c-ced9704e12c3] ActionView::Template::Error (Can't find hello_react-e57d9d18a79d866e81fe in #<Webpacker::Digests:0x007f46977f3110 @path=#Pathname:/app/public/packs/digests.json, @digests={}>):
2017-02-25T01:41:14.754371+00:00 app[web.1]: F, [2017-02-25T01:41:14.754297 #4] FATAL -- : [44e6cff5-5bbc-46d9-b84c-ced9704e12c3] 1: <\h1>Hello world!
2017-02-25T01:41:14.754373+00:00 app[web.1]: [44e6cff5-5bbc-46d9-b84c-ced9704e12c3] 2:
2017-02-25T01:41:14.754375+00:00 app[web.1]: [44e6cff5-5bbc-46d9-b84c-ced9704e12c3] 3: <%# javascript_pack_tag 'hello_vue-819142dc19b77ca48015' %>
2017-02-25T01:41:14.754376+00:00 app[web.1]: [44e6cff5-5bbc-46d9-b84c-ced9704e12c3] 4: <%= javascript_pack_tag 'hello_react-e57d9d18a79d866e81fe' %>
2017-02-25T01:41:14.754426+00:00 app[web.1]: F, [2017-02-25T01:41:14.754370 #4] FATAL -- : [44e6cff5-5bbc-46d9-b84c-ced9704e12c3]
2017-02-25T01:41:14.754492+00:00 app[web.1]: F, [2017-02-25T01:41:14.754436 #4] FATAL -- : [44e6cff5-5bbc-46d9-b84c-ced9704e12c3] app/views/frontpages/index.html.erb:4:in `_app_views_frontpages_index_html_erb___4234948065689000601_69970601556860'

Is this related to existing issues? I'm still digging

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.