webpacker 6.0.0.beta → 6.0.0.beta.5

data/config/README.md

@@ -0,0 +1,3 @@
+# Note
+
+This directory exists for Jest specs that execute code expecting the Rails config directory at this path.

data/config/webpacker.yml

@@ -0,0 +1 @@
+config/lib/install/config/webpacker.yml

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/lib/install/config/webpacker.yml

@@ -1,8 +1,8 @@
 # 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
@@ -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,10 +1,10 @@
 /* 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
+// To reference this file, add <%= javascript_packs_with_chunks_tag 'application' %> to the appropriate
 // layout file, like app/views/layouts/application.html.erb
 
 // Uncomment to copy all static images under ../images to the output folder and reference

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"

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/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]

data/lib/webpacker/helper.rb

@@ -72,27 +72,15 @@ module Webpacker::Helper
     favicon_link_tag(resolve_path_to_image(name), options)
   end
 
-  # Creates a script tag that references the named pack file, as compiled by webpack per the entries list
-  # in package/environments/base.js. By default, this list is auto-generated to match everything in
-  # app/javascript/packs/*.js. In production mode, the digested reference is automatically looked up.
-  #
-  # Example:
-  #
-  #   <%= javascript_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
-  #   <script src="/packs/calendar-1016838bab065ae1e314.js" data-turbolinks-track="reload"></script>
-  def javascript_pack_tag(*names, **options)
-    javascript_include_tag(*sources_from_manifest_entries(names, type: :javascript), **options)
-  end
-
   # Creates script tags that reference the js chunks from entrypoints when using split chunks API,
   # as compiled by webpack per the entries list in package/environments/base.js.
   # By default, this list is auto-generated to match everything in
-  # app/javascript/packs/*.js and all the dependent chunks. In production mode, the digested reference is automatically looked up.
+  # app/packs/entrypoints/*.js and all the dependent chunks. In production mode, the digested reference is automatically looked up.
   # See: https://webpack.js.org/plugins/split-chunks-plugin/
   #
   # Example:
   #
-  #   <%= javascript_packs_with_chunks_tag 'calendar', 'map', 'data-turbolinks-track': 'reload' %> # =>
+  #   <%= javascript_pack_tag 'calendar', 'map', 'data-turbolinks-track': 'reload' %> # =>
   #   <script src="/packs/vendor-16838bab065ae1e314.chunk.js" data-turbolinks-track="reload"></script>
   #   <script src="/packs/calendar~runtime-16838bab065ae1e314.chunk.js" data-turbolinks-track="reload"></script>
   #   <script src="/packs/calendar-1016838bab065ae1e314.chunk.js" data-turbolinks-track="reload"></script>
@@ -101,13 +89,13 @@ module Webpacker::Helper
   #
   # DO:
   #
-  #   <%= javascript_packs_with_chunks_tag 'calendar', 'map' %>
+  #   <%= javascript_pack_tag 'calendar', 'map' %>
   #
   # DON'T:
   #
-  #   <%= javascript_packs_with_chunks_tag 'calendar' %>
-  #   <%= javascript_packs_with_chunks_tag 'map' %>
-  def javascript_packs_with_chunks_tag(*names, **options)
+  #   <%= javascript_pack_tag 'calendar' %>
+  #   <%= javascript_pack_tag 'map' %>
+  def javascript_pack_tag(*names, **options)
     javascript_include_tag(*sources_from_manifest_entrypoints(names, type: :javascript), **options)
   end
 
@@ -127,53 +115,35 @@ module Webpacker::Helper
     end
   end
 
-  # Creates a link tag that references the named pack file, as compiled by webpack per the entries list
-  # in package/environments/base.js. By default, this list is auto-generated to match everything in
-  # app/javascript/packs/*.js. In production mode, the digested reference is automatically looked up.
-  #
-  # Note: If the development server is running and hot module replacement is active, this will return nothing.
-  # In that setup you need to configure your styles to be inlined in your JavaScript for hot reloading.
-  #
-  # Examples:
-  #
-  #   <%= stylesheet_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
-  #   <link rel="stylesheet" media="screen" href="/packs/calendar-1016838bab065ae1e122.css" data-turbolinks-track="reload" />
-  def stylesheet_pack_tag(*names, **options)
-    stylesheet_link_tag(*sources_from_manifest_entries(names, type: :stylesheet), **options)
-  end
-
   # Creates link tags that reference the css chunks from entrypoints when using split chunks API,
   # as compiled by webpack per the entries list in package/environments/base.js.
   # By default, this list is auto-generated to match everything in
-  # app/javascript/packs/*.js and all the dependent chunks. In production mode, the digested reference is automatically looked up.
+  # app/packs/entrypoints/*.js and all the dependent chunks. In production mode, the digested reference is automatically looked up.
   # See: https://webpack.js.org/plugins/split-chunks-plugin/
   #
   # Examples:
   #
-  #   <%= stylesheet_packs_with_chunks_tag 'calendar', 'map' %> # =>
+  #   <%= stylesheet_pack_tag 'calendar', 'map' %> # =>
   #   <link rel="stylesheet" media="screen" href="/packs/3-8c7ce31a.chunk.css" />
   #   <link rel="stylesheet" media="screen" href="/packs/calendar-8c7ce31a.chunk.css" />
   #   <link rel="stylesheet" media="screen" href="/packs/map-8c7ce31a.chunk.css" />
   #
   # DO:
   #
-  #   <%= stylesheet_packs_with_chunks_tag 'calendar', 'map' %>
+  #   <%= stylesheet_pack_tag 'calendar', 'map' %>
   #
   # DON'T:
   #
-  #   <%= stylesheet_packs_with_chunks_tag 'calendar' %>
-  #   <%= stylesheet_packs_with_chunks_tag 'map' %>
-  def stylesheet_packs_with_chunks_tag(*names, **options)
+  #   <%= stylesheet_pack_tag 'calendar' %>
+  #   <%= stylesheet_pack_tag 'map' %>
+  def stylesheet_pack_tag(*names, **options)
     stylesheet_link_tag(*sources_from_manifest_entrypoints(names, type: :stylesheet), **options)
   end
 
   private
-    def sources_from_manifest_entries(names, type:)
-      names.map { |name| current_webpacker_instance.manifest.lookup!(name, type: type) }.flatten
-    end
 
     def sources_from_manifest_entrypoints(names, type:)
-      names.map { |name| current_webpacker_instance.manifest.lookup_pack_with_chunks!(name, type: type) }.flatten.uniq
+      names.map { |name| current_webpacker_instance.manifest.lookup_pack_with_chunks!(name.to_s, type: type) }.flatten.uniq
     end
 
     def resolve_path_to_image(name, **options)

data/lib/webpacker/version.rb

@@ -1,4 +1,4 @@
 module Webpacker
   # Change the version in package.json too, please!
-  VERSION = "6.0.0.beta".freeze
+  VERSION = "6.0.0.beta.5".freeze
 end

data/lib/webpacker/webpack_runner.rb

@@ -15,6 +15,7 @@ module Webpacker
 
       if @argv.include?("--debug-webpacker")
         cmd = [ "node", "--inspect-brk"] + cmd
+        @argv.delete "--debug-webpacker"
       end
 
       if @argv.include?("--trace-deprecation")

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rails/webpacker",
-  "version": "6.0.0-beta",
+  "version": "6.0.0-beta.5",
   "description": "Use webpack to manage app-like JavaScript modules in Rails",
   "main": "package/index.js",
   "files": [

data/package/__tests__/development.js

@@ -22,7 +22,8 @@ describe('Development environment', () => {
       expect(webpackConfig).toMatchObject({
         devServer: {
           host: 'localhost',
-          port: 3035
+          port: 3035,
+          injectClient: true
         }
       })
     })

data/package/__tests__/index.js

@@ -0,0 +1,9 @@
+const index = require('../index')
+
+describe('index', () => {
+  test('exports webpack-merge v5 functions', () => {
+    expect(index.merge).toBeInstanceOf(Function)
+    expect(index.mergeWithRules).toBeInstanceOf(Function)
+    expect(index.mergeWithCustomize).toBeInstanceOf(Function)
+  })
+})

data/package/environments/__tests__/base.js

@@ -17,14 +17,14 @@ describe('Base config', () => {
   describe('config', () => {
     test('should return entry', () => {
       expect(baseConfig.entry.application).toEqual(
-        resolve('app', 'javascript', 'packs', 'application.js')
+        resolve('app', 'packs', 'entrypoints', 'application.js')
       )
     })
 
     test('should return multi file entry points', () => {
       expect(baseConfig.entry.multi_entry.sort()).toEqual([
-        resolve('app', 'javascript', 'packs', 'multi_entry.css'),
-        resolve('app', 'javascript', 'packs', 'multi_entry.js')
+        resolve('app', 'packs', 'entrypoints', 'multi_entry.css'),
+        resolve('app', 'packs', 'entrypoints', 'multi_entry.js')
       ])
     })
 
@@ -53,7 +53,7 @@ describe('Base config', () => {
 
     test('should return default resolve.modules with additions', () => {
       expect(baseConfig.resolve.modules).toEqual([
-        resolve('app', 'javascript'),
+        resolve('app', 'packs'),
         resolve('app/assets'),
         resolve('/etc/yarn'),
         resolve('some.config.js'),