webpacker 6.0.0.beta.2 → 6.0.0.beta.7

data/docs/troubleshooting.md

@@ -0,0 +1,160 @@
+# Troubleshooting
+
+## Debugging your webpack config
+
+1. Read the error message carefully. The error message will tell you the precise key value
+   that is not matching what Webpack expects.
+2. Put a `debugger` statement in your Webpack configuration and run `bin/webpack --debug-webpacker`.
+   If you have a node debugger installed, you'll see the Chrome debugger for your webpack
+   config. For example, install the Chrome extension 
+   [NiM](https://chrome.google.com/webstore/detail/nodejs-v8-inspector-manag/gnhhdgbaldcilmgcpfddgdbkhjohddkj) and
+   set the option for the dev tools to open automatically. Or put `chrome://inspect` in the URL bar.
+   For more details on debugging, see the official
+   [Webpack docs on debugging](https://webpack.js.org/contribute/debugging/#devtools)
+3. Any arguments that you add to bin/webpack get sent to webpack. For example, you can pass `--debug` to switch loaders to debug mode. See [webpack CLI debug options](https://webpack.js.org/api/cli/#debug-options) for more information on the available options.
+4. You can also pass additional options to the command to run the webpack-dev-server and start the webpack-dev-server with the option `--debug-webpacker`
+
+## ENOENT: no such file or directory - node-sass
+
+If you get the error `ENOENT: no such file or directory - node-sass` on deploy with
+`assets:precompile` or `bundle exec rails webpacker:compile` you may need to
+move Sass to production `dependencies`.
+
+Move any packages that related to Sass (e.g. `node-sass` or `sass-loader`) from
+`devDependencies` to `dependencies` in `package.json`. This is because
+webpacker is running on a production system with the Rails workflow to build
+the assets. Particularly on hosting providers that try to detect and do the right
+thing, like Heroku.
+
+However, if you get this on local development, or not during a deploy then you
+may need to rebuild `node-sass`. It's a bit of a weird error; basically, it
+can't find the `node-sass` binary.  An easy solution is to create a postinstall
+hook to ensure `node-sass` is rebuilt whenever new modules are installed.
+
+In `package.json`:
+
+```json
+"scripts": {
+  "postinstall": "npm rebuild node-sass"
+}
+```
+
+## Can't find hello_react.js in manifest.json
+
+* If you get this error `Can't find hello_react.js in manifest.json`
+when loading a view in the browser it's because webpack is still compiling packs.
+Webpacker uses a `manifest.json` file to keep track of packs in all environments,
+however since this file is generated after packs are compiled by webpack. So,
+if you load a view in browser whilst webpack is compiling you will get this error.
+Therefore, make sure webpack
+(i.e `./bin/webpack-dev-server`) is running and has
+completed the compilation successfully before loading a view.
+
+
+## throw er; // Unhandled 'error' event
+
+* If you get this error while trying to use Elm, try rebuilding Elm. You can do
+  so with a postinstall hook in your `package.json`:
+
+```
+"scripts": {
+  "postinstall": "npm rebuild elm"
+}
+```
+
+
+## webpack or webpack-dev-server not found
+
+* This could happen if  `webpacker:install` step is skipped. Please run `bundle exec rails webpacker:install` to fix the issue.
+
+* If you encounter the above error on heroku after upgrading from Rails 4.x to 5.1.x, then the problem might be related to missing `yarn` binstub. Please run following commands to update/add binstubs:
+
+```bash
+bundle config --delete bin
+./bin/rails app:update:bin # or rails app:update:bin
+```
+
+
+## Running webpack on Windows
+
+If you are running webpack on Windows, your command shell may not be able to interpret the preferred interpreter
+for the scripts generated in `bin/webpack` and `bin/webpack-dev-server`. Instead you'll want to run the scripts
+manually with Ruby:
+
+```
+C:\path>ruby bin\webpack
+C:\path>ruby bin\webpack-dev-server
+```
+
+
+## Invalid configuration object. webpack has been initialised using a configuration object that does not match the API schema.
+
+If you receive this error when running `$ ./bin/webpack-dev-server` ensure your configuration is correct; most likely the path to your "packs" folder is incorrect if you modified from the original "source_path" defined in `config/webpacker.yml`.
+
+## Running Elm on Continuous Integration (CI) services such as CircleCI, CodeShip, Travis CI
+
+If your tests are timing out or erroring on CI it is likely that you are experiencing the slow Elm compilation issue described here: [elm-compiler issue #1473](https://github.com/elm-lang/elm-compiler/issues/1473)
+
+The issue is related to CPU count exposed by the underlying service. The basic solution involves using [libsysconfcpus](https://github.com/obmarg/libsysconfcpus) to change the reported CPU count.
+
+Basic fix involves:
+
+```bash
+# install sysconfcpus on CI
+git clone https://github.com/obmarg/libsysconfcpus.git $HOME/dependencies/libsysconfcpus
+cd libsysconfcpus
+.configure --prefix=$HOME/dependencies/sysconfcpus
+make && make install
+
+# use sysconfcpus with elm-make
+mv $HOME/your_rails_app/node_modules/.bin/elm-make $HOME/your_rails_app/node_modules/.bin/elm-make-old
+printf "#\041/bin/bash\n\necho \"Running elm-make with sysconfcpus -n 2\"\n\n$HOME/dependencies/sysconfcpus/bin/sysconfcpus -n 2 $HOME/your_rails_app/node_modules/.bin/elm-make-old \"\$@\"" > $HOME/your_rails_app/node_modules/.bin/elm-make
+chmod +x $HOME/your_rails_app/node_modules/.bin/elm-make
+```
+
+## Rake assets:precompile fails. ExecJS::RuntimeError
+This error occurs because you are trying to minify by terser a pack that's already been minified by Webpacker. To avoid this conflict and prevent appearing of ExecJS::RuntimeError error, you will need to disable uglifier from Rails config:
+
+```ruby
+// production.rb
+# From
+
+Rails.application.config.assets.js_compressor = :uglifier
+
+# To
+
+Rails.application.config.assets.js_compressor = Uglifier.new(harmony: true)
+
+```
+
+### Angular: WARNING in ./node_modules/@angular/core/esm5/core.js, Critical dependency: the request of a dependency is an expression
+
+To silent these warnings, please update `config/webpack/environment.js`
+
+```js
+// environment.js
+const webpack = require('webpack')
+const { resolve } = require('path')
+const { environment, config } = require('@rails/webpacker')
+
+environment.plugins.append('ContextReplacement',
+  new webpack.ContextReplacementPlugin(
+    /angular(\\|\/)core(\\|\/)(@angular|esm5)/,
+    resolve(config.source_path)
+  )
+)
+```
+
+### Compilation Fails Silently
+
+If compiling is not producing output files and there are no error messages to help troubleshoot. Setting the webpack_compile_output configuration variable to 'true' in webpacker.yml may add some helpful error information to your log file (Rails log/development.log or log/production.log)
+
+```yml
+# webpacker.yml
+default: &default
+  source_path: app/javascript
+  source_entry_path: packs
+  public_root_path: public
+  public_output_path: complaints_packs
+  webpack_compile_output: true
+```

data/docs/v6_upgrade.md

@@ -0,0 +1,86 @@
+# To Webpacker v6 from v5
+
+This guide aims to help you migrating to Webpacker 6. If you are using vanilla Webpacker install then hopefully, the upgrade should be really straightforward.
+
+## Main differences with v5
+
+The main goal for Webpacker v6 is to manage the JavaScript in your Rails application with Webpack. This will allows you, for example, to use JavaScript modules, automatic code splitting using multiple entry points, use PostCSS or use [Vue](https://vuejs.org/) or [React](https://reactjs.org/).
+
+You probably don't want to install Webpacker and Webpack if you only need some JavaScript Sprinkles, Sass integration, images and fonts support.
+
+### Default integrations
+
+By default, Webpacker v6 out of the box supports JS and static assets (fonts, images etc.) compilation. Webpacker now detects automatically relevant packages to support more tools.
+
+See [Integrations](https://github.com/rails/webpacker#integrations) for more information.
+
+Why? Because most developers don't need to handle CSS, SASS or another tools with Webpack. [Sprockets](https://github.com/rails/sprockets) is probably enough and we don't want to make things harder.
+
+### Simpler API
+
+Webpacker is still a wrapper around [Webpack](https://webpack.js.org/) to simplify the integration in your Rails application.
+
+But we noticed that the [Webpacker v5 configuration](https://github.com/rails/webpacker/blob/5-x-stable/docs/webpack.md) was a bit confusing mostly because Webpack is a complicated beast to manage.
+
+There are so many different toolchains in JavaScript these days, it would be impossible to create te perfect configuration for everybody. That is also why defaults installers have been removed.
+
+In order to simplify even more the configuration, the custom API to manage the Webpack configuration has been removed.
+
+Now you have a straight access to the Webpack configuration and you can change it very easily with webpack-merge. So now, you can refer to the documentation of the tools you want to install it with Webpack. Here is an example with [Vue](https://github.com/rails/webpacker#other-frameworks).
+
+## How to upgrade to Webpacker v6
+
+1. If your `source_path` is `app/javascript`, rename it to `app/packs`
+2. If your `source_entry_path` is `packs`, rename it to `entrypoints`
+3. Rename `config/webpack` to `config/webpack_old`
+4. Rename `config/webpacker.yml` to `config/webpacker_old.yml`
+5. Uninstall the current version of `webpack-dev-server`: `yarn remove webpack-dev-server`
+6. Upgrade Webpacker
+
+  ```ruby
+  # Gemfile
+  gem 'webpacker', '~> 6.0.0.pre.2'
+  ```
+
+  ```bash
+  bundle install
+  ```
+
+  ```bash
+  yarn add @rails/webpacker@next
+  ```
+
+  ```bash
+  bundle exec rails webpacker:install
+  ```
+
+- Change `javascript_packs_with_chunks_tag` and `stylesheet_packs_with_chunks_tag` to `javascript_pack_tag` and
+  `stylesheet_pack_tag`.
+
+7. If you are using any integrations like `css`, `React` or `TypeScript`. Please see https://github.com/rails/webpacker#integrations section on how they work in v6.
+
+8. Copy over any custom webpack config from `config/webpack_old`
+
+- Common code previously called 'environment' changed to 'base'
+- import `environment` changed name to `webpackConfig`.
+
+  ```js
+  // config/webpack/base.js
+  const { webpackConfig, merge } = require('@rails/webpacker')
+  const customConfig = require('./custom')
+
+  module.exports = merge(webpackConfig, customConfig)
+  ```
+
+9. Copy over custom browserlist config from `.browserlistrc` if it exists into the `"browserlist"` key in `package.json` and remove `.browserslistrc`.
+
+10. `extensions` was removed from the webpacker.yml file. Move custom extensions to
+  your configuration by by merging an object like this. For more details, see docs for
+  [Webpack Configuration](https://github.com/rails/webpacker/blob/master/README.md#webpack-configuration)
+```js
+{
+  resolve: {
+      extensions: ['.ts', '.tsx']
+  }
+}
+```

data/lib/install/config/webpacker.yml

@@ -1,14 +1,14 @@
 # Note: You must restart bin/webpack-dev-server for changes to take effect
 
 default: &default
-  source_path: app/javascript
-  source_entry_path: packs
+  source_path: app/packs
+  source_entry_path: entrypoints
   public_root_path: public
   public_output_path: packs
   cache_path: tmp/cache/webpacker
   webpack_compile_output: true
 
-  # Additional paths webpack should lookup modules
+  # Additional paths webpack should look up modules
   # ['app/assets', 'engine/foo/app/assets']
   additional_paths: []
 
@@ -25,6 +25,8 @@ development:
     host: localhost
     port: 3035
     public: localhost:3035
+    # Inject browserside javascript that required by both HMR and Live(full) reload
+    inject_client: true
     # Hot Module Replacement updates modules while the application is running without a full reload
     hmr: false
     # Inline should be set to true if using HMR; it inserts a script to take care of live reloading

data/lib/install/{javascript/packs → packs/entrypoints}/application.js

@@ -1,7 +1,7 @@
 /* eslint no-console:0 */
 // This file is automatically compiled by Webpack, along with any other files
 // present in this directory. You're encouraged to place your actual application logic in
-// a relevant structure within app/javascript and only use these pack files to reference
+// a relevant structure within app/packs and only use these pack files to reference
 // that code so it'll be compiled.
 //
 // To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate

data/lib/install/template.rb

@@ -5,10 +5,10 @@ say "Copying webpack core config"
 directory "#{__dir__}/config/webpack", "config/webpack"
 
 if Dir.exists?(Webpacker.config.source_path)
-  say "The JavaScript app source directory already exists"
+  say "The packs app source directory already exists"
 else
-  say "Creating JavaScript app source directory"
-  directory "#{__dir__}/javascript", Webpacker.config.source_path
+  say "Creating packs app source directory"
+  directory "#{__dir__}/packs", Webpacker.config.source_path
 end
 
 apply "#{__dir__}/binstubs.rb"
@@ -26,13 +26,15 @@ if File.exists?(git_ignore_path)
   end
 end
 
+results = []
+
 Dir.chdir(Rails.root) do
-  if Webpacker::VERSION =~ /^[0-9]+\.[0-9]+\.[0-9]+$/
+  if Webpacker::VERSION.match?(/^[0-9]+\.[0-9]+\.[0-9]+$/)
     say "Installing all JavaScript dependencies [#{Webpacker::VERSION}]"
-    run "yarn add @rails/webpacker@#{Webpacker::VERSION}"
+    results << run("yarn add @rails/webpacker@#{Webpacker::VERSION}")
   else
     say "Installing all JavaScript dependencies [from prerelease rails/webpacker]"
-    run "yarn add @rails/webpacker@next"
+    results << run("yarn add @rails/webpacker@next")
   end
 
   package_json = File.read("#{__dir__}/../../package.json")
@@ -41,10 +43,10 @@ Dir.chdir(Rails.root) do
 
   # needed for experimental Yarn 2 support and should not harm Yarn 1
   say "Installing webpack and webpack-cli as direct dependencies"
-  run "yarn add webpack@#{webpack_version} webpack-cli@#{webpack_cli_version}"
+  results << run("yarn add webpack@#{webpack_version} webpack-cli@#{webpack_cli_version}")
 
   say "Installing dev server for live reloading"
-  run "yarn add --dev webpack-dev-server @webpack-cli/serve"
+  results << run("yarn add --dev webpack-dev-server @webpack-cli/serve")
 end
 
 insert_into_file Rails.root.join("package.json").to_s, before: /\n}\n*$/ do
@@ -66,4 +68,9 @@ if Rails::VERSION::MAJOR == 5 && Rails::VERSION::MINOR > 1
   say "policy.connect_src :self, :https, \"http://localhost:3035\", \"ws://localhost:3035\" if Rails.env.development?", :yellow
 end
 
-say "Webpacker successfully installed 🎉 🍰", :green
+if results.all?
+  say "Webpacker successfully installed 🎉 🍰", :green
+else
+  say "Webpacker installation failed 😭 See above for details.", :red
+  exit 1
+end

data/lib/tasks/webpacker/binstubs.rake

@@ -7,9 +7,9 @@ namespace :webpacker do
     prefix = task.name.split(/#|webpacker:binstubs/).first
 
     if Rails::VERSION::MAJOR >= 5
-      exec "#{RbConfig.ruby} #{bin_path}/rails #{prefix}app:template LOCATION=#{binstubs_template_path}"
+      exec "#{RbConfig.ruby} #{bin_path}/rails #{prefix}app:template LOCATION='#{binstubs_template_path}'"
     else
-      exec "#{RbConfig.ruby} #{bin_path}/rake #{prefix}rails:template LOCATION=#{binstubs_template_path}"
+      exec "#{RbConfig.ruby} #{bin_path}/rake #{prefix}rails:template LOCATION='#{binstubs_template_path}'"
     end
   end
 end

data/lib/tasks/webpacker/check_node.rake

@@ -3,6 +3,7 @@ namespace :webpacker do
   desc "Verifies if Node.js is installed"
   task :check_node do
     begin
+      raise Errno::ENOENT if `which node || which nodejs`.strip.empty?
       node_version = `node -v || nodejs -v`.strip
       raise Errno::ENOENT if node_version.blank?
 

data/lib/tasks/webpacker/check_yarn.rake

@@ -3,6 +3,7 @@ namespace :webpacker do
   desc "Verifies if Yarn is installed"
   task :check_yarn do
     begin
+      raise Errno::ENOENT if `which yarn`.strip.empty?
       yarn_version = `yarn --version`.strip
       raise Errno::ENOENT if yarn_version.blank?
 

data/lib/tasks/webpacker/install.rake

@@ -7,9 +7,9 @@ namespace :webpacker do
     prefix = task.name.split(/#|webpacker:install/).first
 
     if Rails::VERSION::MAJOR >= 5
-      exec "#{RbConfig.ruby} #{bin_path}/rails #{prefix}app:template LOCATION=#{install_template_path}"
+      exec "#{RbConfig.ruby} #{bin_path}/rails #{prefix}app:template LOCATION='#{install_template_path}'"
     else
-      exec "#{RbConfig.ruby} #{bin_path}/rake #{prefix}rails:template LOCATION=#{install_template_path}"
+      exec "#{RbConfig.ruby} #{bin_path}/rake #{prefix}rails:template LOCATION='#{install_template_path}'"
     end
   end
 end

data/lib/webpacker/commands.rb

@@ -64,7 +64,8 @@ class Webpacker::Commands
 
     def current_version
       packs = manifest.refresh.values.map do |value|
-        next if value.is_a?(Hash)
+        value = value["src"] if value.is_a?(Hash)
+        next unless value.is_a?(String)
 
         File.join(config.root_path, "public", "#{value}*")
       end.compact

data/lib/webpacker/compiler.rb

@@ -35,7 +35,7 @@ class Webpacker::Compiler
 
   # Returns true if all the compiled packs are up to date with the underlying asset files.
   def fresh?
-    watched_files_digest == last_compilation_digest
+    last_compilation_digest&.== watched_files_digest
   end
 
   # Returns true if the compiled packs are out of date with the underlying asset files.
@@ -69,7 +69,7 @@ class Webpacker::Compiler
       bin_webpack_path = config.root_path.join("bin/webpack")
       first_line = File.readlines(bin_webpack_path).first.chomp
       /ruby/.match?(first_line) ? RbConfig.ruby : ""
-     end
+    end
 
     def run_webpack
       logger.info "Compiling..."

data/lib/webpacker/configuration.rb

@@ -63,11 +63,11 @@ class Webpacker::Configuration
     fetch(:webpack_compile_output)
   end
 
-  private
-    def fetch(key)
-      data.fetch(key, defaults[key])
-    end
+  def fetch(key)
+    data.fetch(key, defaults[key])
+  end
 
+  private
     def data
       @data ||= load
     end

data/lib/webpacker/dev_server_runner.rb

@@ -64,6 +64,7 @@ module Webpacker
       def execute_cmd
         env = Webpacker::Compiler.env
         env["WEBPACKER_CONFIG"] = @webpacker_config
+        env["WEBPACK_DEV_SERVER"] = "true"
 
         cmd = if node_modules_bin_exist?
           ["#{@node_modules_bin_path}/webpack", "serve"]
@@ -73,6 +74,7 @@ module Webpacker
 
         if @argv.include?("--debug-webpacker")
           cmd = [ "node", "--inspect-brk"] + cmd
+          @argv.delete "--debug-webpacker"
         end
 
         cmd += ["--config", @webpack_config]