shakapacker 6.0.0.rc.6

data/docs/customizing_babel_config.md

@@ -0,0 +1,59 @@
+# Customizing Babel Config
+
+## Default Configuration
+The default configuration of babel is done by using `package.json` to use the file within the `@shakacode/shakapacker` package.
+
+```json
+{
+  "babel": {
+    "presets": [
+      "./node_modules/@shakacode/shakapacker/package/babel/preset.js"
+    ]
+  }
+}
+```
+
+## Customizing the Babel Config
+This example shows how you can create an object and apply _additional_ presets and plugins on top of the default.
+
+### React Configuration
+To use this example file,
+
+```
+yarn add react react-dom @babel/preset-react
+yarn add --dev @pmmmwh/react-refresh-webpack-plugin react-refresh
+```
+
+```js
+// babel.config.js
+module.exports = function (api) {
+  const defaultConfigFunc = require('@shakacode/shakapacker/package/babel/preset.js')
+  const resultConfig = defaultConfigFunc(api)
+  const isProductionEnv = api.env('production')
+
+  const changesOnDefault = {
+    presets: [
+      [
+        '@babel/preset-react',
+        {
+          development: isDevelopmentEnv || isTestEnv,
+          useBuiltIns: true
+        } 
+      ],
+      isProductionEnv && ['babel-plugin-transform-react-remove-prop-types', 
+        { 
+          removeImport: true 
+        }
+      ]
+    ].filter(Boolean),
+    plugins: [
+      process.env.WEBPACK_SERVE && 'react-refresh/babel'
+    ].filter(Boolean),
+  }
+
+  resultConfig.presets = [...resultConfig.presets, ...changesOnDefault.presets]
+  resultConfig.plugins = [...resultConfig.plugins, ...changesOnDefault.plugins ]
+
+  return resultConfig
+}
+```

data/docs/deployment.md

@@ -0,0 +1,116 @@
+# Deployment
+
+Webpacker hooks up a new `webpacker:compile` task to `assets:precompile`, which gets run whenever you run `assets:precompile`.
+If you are not using Sprockets `webpacker:compile` is automatically aliased to `assets:precompile`.
+
+```
+
+## Heroku
+
+In order for your Webpacker app to run on Heroku, you'll need to do a bit of configuration before hand.
+
+```bash
+heroku create my-webpacker-heroku-app
+heroku addons:create heroku-postgresql:hobby-dev
+heroku buildpacks:add heroku/nodejs
+heroku buildpacks:add heroku/ruby
+git push heroku master
+```
+
+We're essentially doing the following here:
+
+* Creating an app on Heroku
+* Creating a Postgres database for the app (this is assuming that you're using Heroku Postgres for your app)
+* Adding the Heroku NodeJS and Ruby buildpacks for your app. This allows the `npm` or `yarn` executables to properly function when compiling your app - as well as Ruby.
+* Pushing your code to Heroku and kicking off the deployment
+
+## Nginx
+
+Webpacker doesn't serve anything in production. You’re expected to configure your web server to serve files in public/ directly.
+
+Some servers support sending precompressed versions of files when they're available. For example, nginx offers a `gzip_static` directive that serves files with the `.gz` extension to supported clients. With an optional module, nginx can also serve Brotli compressed files with the `.br` extension (see below for installation and configuration instructions).
+
+Here's a sample nginx site config for a Rails app using Webpacker:
+
+```nginx
+upstream app {
+  # server unix:///path/to/app/tmp/puma.sock;
+}
+
+server {
+  listen 80;
+  server_name www.example.com;
+  root /path/to/app/public;
+
+  location @app {
+    proxy_pass http://app;
+    proxy_redirect off;
+
+    proxy_set_header Host $host;
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header X-Forwarded-Proto $scheme;
+  }
+
+  location / {
+    try_files $uri @app;
+  }
+
+  location = /favicon.ico { access_log off; log_not_found off; }
+  location = /robots.txt  { access_log off; log_not_found off; }
+
+  location ~ /\.(?!well-known).* {
+    deny all;
+  }
+
+  location ~ ^/(assets|packs)/ {
+    gzip_static on;
+    brotli_static on; # Optional, see below
+    expires max;
+    add_header Cache-Control public;
+  }
+}
+```
+
+### Installing the ngx_brotli module
+
+If you want to serve Brotli compressed files with nginx, you will need to install the `nginx_brotli` module. Installation instructions from source can be found in the official [google/ngx_brotli](https://github.com/google/ngx_brotli) git repository. Alternatively, depending on your platform, the module might be available via a pre-compiled package.
+
+Once installed, you need to load the module. As we want to serve the pre-compressed files, we only need the static module. Add the following line to your `nginx.conf` file and reload nginx:
+
+```
+load_module modules/ngx_http_brotli_static_module.so;
+```
+
+Now, you can set `brotli_static on;` in your nginx site config, as per the config in the last section above.
+
+## CDN
+
+Webpacker out-of-the-box provides CDN support using your Rails app `config.action_controller.asset_host` setting. If you already have [CDN](http://guides.rubyonrails.org/asset_pipeline.html#cdns) added in your Rails app
+you don't need to do anything extra for Webpacker, it just works.
+
+## Capistrano
+
+### Assets compiling on every deployment even if JavaScript and CSS files are not changed
+
+Make sure you have `public/packs` and `node_modules` in `:linked_dirs`
+
+```ruby
+append :linked_dirs, "log", "tmp/pids", "tmp/cache", "tmp/sockets", "public/packs", ".bundle", "node_modules"
+```
+
+If you have `node_modules` added to `:linked_dirs` you'll need to run yarn install before `deploy:assets:precompile`, so you can add this code snippet at the bottom deploy.rb
+
+```ruby
+before "deploy:assets:precompile", "deploy:yarn_install"
+namespace :deploy do
+  desc "Run rake yarn install"
+  task :yarn_install do
+    on roles(:web) do
+      within release_path do
+        execute("cd #{release_path} && yarn install --silent --no-progress --no-audit --no-optional")
+      end
+    end
+  end
+end
+```

data/docs/developing_webpacker.md

@@ -0,0 +1,29 @@
+# Developing Webpacker
+
+It's a little trickier for Rails developers to work on the JS code of a project like shakacode/shakapacker. So here are some tips!
+
+## Use some test app
+For example, for React on Rails Changes, I'm using [shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh).
+This directory is the `TEST_APP_DIR`.
+
+## Fork shakacode/shakapacker
+Let's call the shakacode/shakapacker directory `WEBPACKER_DIR` which has shakacode/shakapacker's `package.json`.
+
+## Changing the Package
+### Setup with Yalc
+Use [`yalc`](https://github.com/wclr/yalc) unless you like yak shaving weird errors.
+1. In `WEBPACKER_DIR`, run `yalc publish`
+2. In `TEST_APP_DIR`, run `yalc link @shakacode/shakapacker`
+
+## Update the Package Code
+1. Make some JS change in WEBPACKER_DIR
+2. Run `yalc push` and your changes will be pushed to your `TEST_APP_DIR`'s node_modules.
+3. You may need to run `yarn` in `TEST_APP_DIR` if you added or removed dependencies of shakacode/shakapacker.
+
+## Updating the Ruby Code
+
+For the Ruby part, just change the gem reference `TEST_APP_DIR`, like:
+
+```ruby
+gem "webpacker", path: "../../forks/webpacker"
+```

data/docs/troubleshooting.md

@@ -0,0 +1,212 @@
+# 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/webpacker --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/webpacker 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/webpacker-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`:
+
+```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/webpacker` and `bin/webpacker-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/webpacker-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
+# In 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/webpack.config.js`:
+```js
+const webpack = require('webpack')
+const { resolve } = require('path')
+const { webpackConfig, merge } = require('@shakacode/shakapacker')
+
+module.exports = merge(webpackConfig, {
+  plugins: [
+    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
+```
+
+### Using global variables for dependencies
+
+If you want to access any dependency without importing it everywhere or use it directly in your dev tools, please check: [https://webpack.js.org/plugins/provide-plugin/](https://webpack.js.org/plugins/provide-plugin/) and the [webpack docs on shimming globals](https://webpack.js.org/guides/shimming/#shimming-globals).
+
+Note, if you are exposing globals, like jQuery, to non-webpack dependencies (like an inline script) via the [expose-loader](https://webpack.js.org/loaders/expose-loader/), you will need to override the default of `defer: true` to be `defer:false` your call to the `javascript_pack_tag` so that the browser will load your bundle to setup the global variable before other code depends on it. However, you really should try to remove the dependendency on such globals.
+
+Thus ProvidePlugin manages build-time dependencies to global symbols whereas the expose-loader manages runtime dependencies to global symbols.
+
+**You don't need to assign dependencies on `window`.**
+
+For instance, with [jQuery](https://jquery.com/):
+```diff
+// app/packs/entrypoints/application.js
+
+- import jQuery from 'jquery'
+- window.jQuery = jQuery
+```
+
+Instead do:
+```js
+// config/webpack/webpack.config.js
+
+const webpack = require('webpack')
+const { webpackConfig, merge } = require('@shakacode/shakapacker')
+
+module.exports = merge(webpackConfig, {
+  plugins: [
+    new webpack.ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jquery',
+    })
+  ],
+})
+```
+
+## Wrong CDN src from javascript_pack_tag
+
+If your deployment doesn't rebuild assets between environments (such as when
+using Heroku's Pipeline promote feature). You might find that your production
+application is using your staging `config.asset_host` host when using
+`javascript_pack_tag`.
+
+This can be fixed by setting the environment variable `WEBPACKER_ASSET_HOST` to
+an empty string where your assets are compiled. On Heroku this is done under
+*Settings* -> *Config Vars*.
+
+This way webpacker won't hard-code the CDN host into the manifest file used by
+`javascript_pack_tag`, but instead fetch the CDN host at runtime, resolving the
+issue.
+
+See [this issue](https://github.com/rails/webpacker/issues/3005) for more
+details.

data/docs/v6_upgrade.md

@@ -0,0 +1,158 @@
+# Upgrading from Webpacker 5 to 6
+
+There are several substantial changes in Webpacker 6 that you need to manually account for when coming from Webpacker 5. This guide will help you through it.
+
+## Webpacker has become a slimmer wrapper around Webpack
+
+By default, Webpacker 6 is focused on compiling and bundling JavaScript. This pairs with the existing asset pipeline in Rails that's setup to transpile CSS and static images using [Sprockets](https://github.com/rails/sprockets). For most developers, that's the recommended combination. But if you'd like to use Webpacker for CSS and static assets as well, please see [integrations](https://github.com/shakacode/shakapacker#integrations) for more information.
+
+Webpacker used to configure Webpack indirectly, which lead to a [complicated secondary configuration process](https://github.com/rails/webpacker/blob/5-x-stable/docs/webpack.md). This was done in order to provide default configurations for the most popular frameworks, but ended up creating more complexity than it cured. So now Webpacker delegates all configuration directly to Webpack's default configuration setup.
+
+This means you have to configure integration with frameworks yourself, but webpack-merge helps with this. See this example for [Vue](https://github.com/shakacode/shakapacker#other-frameworks) and scroll to the bottom for [more examples](#examples-of-v5-to-v6).
+
+## How to upgrade to Webpacker v6 from v5
+1. Ensure you have a clean working git branch. You will be overwriting all your files and reverting the changes that you don't want.
+
+1. Consider changing from the v5 default for `source_entry_path` in `webpacker.yml`.
+  ```yml
+    source_path: app/javascript
+    source_entry_path: packs
+  ```
+  consider changing to the v6 default:
+  ```yml
+    source_path: app/javascript
+    source_entry_path: /
+  ```
+  Then consider moving your `app/javascript/packs/*` (including `application.js`) to `app/javascript/` and updating the configuration file.
+
+  Note, moving your files is optional, as you can stil keep your entries in a separate directory, called something like `packs`, or `entries`. This directory is defined within the source_path.
+
+1. **Ensure no nested directories in your `source_entry_path`.** Check if you had any entry point files in child directories of your `source_entry_path`. Files for entry points in child directories are not supported by shakacode/shakapacker v6. Move those files to the top level, adjusting any imports in those files.
+
+  The new v6 configuration does not allow nesting, so as to allow placing the entry points at in the root directory of JavaScript. You can find this change [here](https://github.com/rails/webpacker/commit/5de0fbc1e16d3db0c93202fb39f5b4d80582c682#diff-7af8667a3e36201db57c02b68dd8651883d7bfc00dc9653661be11cd31feeccdL19).
+
+1. Upgrade the Webpacker Ruby gem and the NPM package
+
+   Note: [Check the releases page to verify the latest version](https://github.com/rails/webpacker/releases), and make sure to install identical version numbers of webpacker gem and `@shakacode/shakapacker` npm package. (Gems use a period and packages use a dot between the main version number and the beta version.)
+
+   Example going to a specific version:
+
+   ```ruby
+   # Gemfile
+   gem 'webpacker', '6.0.0.rc.7'
+   ```
+
+   ```bash
+   bundle install
+   ```
+
+   ```bash
+   yarn add @shakacode/shakapacker@6.0.0-rc.7 --exact
+   ```
+
+  ```bash
+  bundle exec rails webpacker:install
+  ```
+
+  Overwrite all files and check what changed.
+
+  Note, the webpacker:install will install the peer dependencies:
+  ```bash
+  yarn add @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/runtime babel-loader compression-webpack-plugin pnp-webpack-plugin terser-webpack-plugin webpack webpack-assets-manifest webpack-cli webpack-merge webpack-sources webpack-dev-server
+  ```
+
+1. There is now a single default configuration file of `config/webpack/webpack.config.js`. Previously, the config file was set
+  to `config/webpack/#{NODE_ENV}.js`. In the `config/webpack/` directory, you can either refactor your code in `test.js`, `development.js`, and `production.js` to a single file, `webpack.config.js` or you can replace the contents of `config/webpack/config.webpack.js` to conditionally load the old file based on the NODE_ENV with this snippet:
+   ```js
+   const { env, webpackConfig } = require('@shakacode/shakapacker')
+   const { existsSync } = require('fs')
+   const { resolve } = require('path')
+
+   const envSpecificConfig = () => {
+     const path = resolve(__dirname, `${env.nodeEnv}.js`)
+     if (existsSync(path)) {
+       console.log(`Loading ENV specific webpack configuration file ${path}`)
+       return require(path)
+     } else {
+       return webpackConfig
+     }
+   }
+
+   module.exports = envSpecificConfig()
+   ```
+
+1. Review the new default's changes to `webpacker.yml`. Consider each suggested change carefully, especially the change to have your `source_entry_path` be at the top level of your `source_path`.
+   The v5 default used `packs` for `source_entry_path`:
+   ```yml
+   source_path: app/javascript
+   source_entry_path: packs
+   ```
+   The v6 default uses the top level directory.
+   ```yml
+   source_path: app/javascript
+   source_entry_path: /
+   ```
+   If you prefer this configuratiom, then you will move your `app/javascript/packs/*` (including `application.js`) to `app/javascript/` and update the configuration file.
+
+   Note, moving your files is optional, as you can stil keep your entries in a separate directory, called something like `packs`, or `entries`. This directory is defined with the `source_path`.
+
+1. **Ensure no nested directories in your `source_entry_path`.** Check if you had any entry point files in child directories of your `source_entry_path`. Files for entry points in child directories are not supported by shakacode/shakapacker v6. Move those files to the top level, adjusting any imports in those files.
+
+   The new v6 configuration does not allow nesting, so as to allow placing the entry points at in the root directory of JavaScript. You can find this change [here](https://github.com/rails/webpacker/commit/5de0fbc1e16d3db0c93202fb39f5b4d80582c682#diff-7af8667a3e36201db57c02b68dd8651883d7bfc00dc9653661be11cd31feeccdL19).
+
+1. Update `webpack-dev-server` to the current version, greater than 4.2, updating `package.json`.
+
+1. Update API usage of the view helpers by changing `javascript_packs_with_chunks_tag` and `stylesheet_packs_with_chunks_tag` to `javascript_pack_tag` and `stylesheet_pack_tag`. Ensure that your layouts and views will only have **at most one call** to `javascript_pack_tag` and **at most one call** to `stylesheet_pack_tag`. You can now pass multiple bundles to these view helper methods. If you fail to changes this, you may experience performance issues, and other bugs related to multiple copies of React, like [issue 2932](https://github.com/rails/webpacker/issues/2932).  If you expose jquery globally with `expose-loader,` by using `import $ from "expose-loader?exposes=$,jQuery!jquery"` in your `app/javascript/application.js`, pass the option `defer: false` to your `javascript_pack_tag`.
+
+1. If you are using any integrations like `css`, `postcss`, `React` or `TypeScript`. Please see https://github.com/shakacode/shakapacker#integrations section on how they work in v6.
+
+1. Import `environment` changed to `webpackConfig`. For example, the new code looks like:
+   ```js
+   // config/webpack/webpack.config.js
+   const { webpackConfig, merge } = require('@shakacode/shakapacker')
+   const customConfig = require('./custom')
+
+   module.exports = merge(webpackConfig, customConfig)
+   ```
+
+1. Copy over custom browserlist config from `.browserslistrc` if it exists into the `"browserslist"` key in `package.json` and remove `.browserslistrc`.
+
+1. Remove `babel.config.js` if you never changed it. Configure your `package.json` to use the default:
+  ```json
+  "babel": {
+    "presets": [
+      "./node_modules/shakapacker/package/babel/preset.js"
+    ]
+  }
+  ```
+  See customization example the [Customizing Babel Config](./docs/customizing_babel_config.md) for React configuration.
+
+1. `extensions` was removed from the `webpacker.yml` file. Move custom extensions to your configuration by merging an object like this. For more details, see docs for [Webpack Configuration](https://github.com/shakacode/shakapacker/blob/master/README.md#webpack-configuration)
+
+    ```js
+    {
+      resolve: {
+        extensions: ['.ts', '.tsx', '.vue', '.css']
+      }
+    }
+    ```
+1. In `webpacker.yml`, check if you had `watched_paths`. That is not `additional_paths`.
+
+1. Some dependencies were removed in [PR 3056](https://github.com/rails/webpacker/pull/3056). If you see the error: `Error: Cannot find module 'babel-plugin-macros'`, or similar, then you need to `yarn add <dependency>` where <dependency> might include: `babel-plugin-macros`, `case-sensitive-paths-webpack-plugin`, `core-js`, `regenerator-runtime`. Or you might want to remove your dependency on those.
+
+1. Review the new default's changes to `webpacker.yml` and `config/webpack`. Consider each suggested change carefully, especially the change to have your `source_entry_path` be at the top level of your `source_path`.
+
+1. Make sure that you can run `bin/webpacker` without errors.
+
+1. Try running `RAILS_ENV=production bin/rails assets:precompile`. If all goes well, don't forget to clean the generated assets with `bin/rails assets:clobber`.
+
+1. Run `yarn add webpack-dev-server` if those are not already in your dev dependencies. Make sure you're using v4+.
+
+1. Update any scripts that called `/bin/webpack` or `bin/webpack-dev-server` to `/bin/webpacker` or `bin/webpacker-dev-server`
+
+1. Try your app!
+
+## Examples of v5 to v6
+
+1. [React on Rails Project with HMR and SSR](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/compare/webpacker-5.x...master)
+2. [Vue and Sass Example](https://github.com/guillaumebriday/upgrade-webpacker-5-to-6)

data/gemfiles/Gemfile-rails-edge

@@ -0,0 +1,12 @@
+source "https://rubygems.org"
+
+git_source(:github) { |repo| "https://github.com/#{repo}.git" }
+
+gemspec path: "../"
+
+gem "rails", github: "rails/rails", branch: "main"
+gem "arel", github: "rails/arel"
+gem "rake", ">= 11.1"
+gem "rack-proxy", require: false
+gem "minitest", "~> 5.0"
+gem "byebug"

data/gemfiles/Gemfile-rails.5.2.x

@@ -0,0 +1,9 @@
+source "https://rubygems.org"
+
+gemspec path: "../"
+
+gem "rails", "~> 5.2.0"
+gem "rake", ">= 11.1"
+gem "rack-proxy", require: false
+gem "minitest", "~> 5.0"
+gem "byebug"

data/gemfiles/Gemfile-rails.6.0.x

@@ -0,0 +1,9 @@
+source "https://rubygems.org"
+
+gemspec path: "../"
+
+gem "rails", "~> 6.0.0.rc2"
+gem "rake", ">= 11.1"
+gem "rack-proxy", require: false
+gem "minitest", "~> 5.0"
+gem "byebug"

data/gemfiles/Gemfile-rails.6.1.x

@@ -0,0 +1,12 @@
+source "https://rubygems.org"
+
+git_source(:github) { |repo| "https://github.com/#{repo}.git" }
+
+gemspec path: "../"
+
+gem "rails", '~>6.1.0'
+gem "arel", github: "rails/arel"
+gem "rake", ">= 11.1"
+gem "rack-proxy", require: false
+gem "minitest", "~> 5.0"
+gem "byebug"

data/lib/install/application.js

@@ -0,0 +1,15 @@
+/* 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
+// that code so it'll be compiled.
+//
+// To reference this file, add <%= javascript_pack_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
+// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
+// or the `imagePath` JavaScript helper below.
+//
+// const images = require.context('./images', true)
+// const imagePath = (name) => images(name, true)

data/lib/install/bin/webpacker

@@ -0,0 +1,15 @@
+#!/usr/bin/env ruby
+
+require "pathname"
+require "bundler/setup"
+require "webpacker"
+require "webpacker/webpack_runner"
+
+ENV["RAILS_ENV"] ||= "development"
+ENV["NODE_ENV"]  ||= ENV["RAILS_ENV"]
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile", Pathname.new(__FILE__).realpath)
+
+APP_ROOT = File.expand_path("..", __dir__)
+Dir.chdir(APP_ROOT) do
+  Webpacker::WebpackRunner.run(ARGV)
+end