shakapacker 9.1.0 → 9.3.0.beta.0

data/docs/typescript-migration.md

@@ -3,6 +3,7 @@
 This guide helps you adopt TypeScript types in your Shakapacker configuration files for better type safety and IDE support.
 
 ## Table of Contents
+
 - [Benefits](#benefits)
 - [Quick Start](#quick-start)
 - [Migration Steps](#migration-steps)
@@ -12,6 +13,7 @@ This guide helps you adopt TypeScript types in your Shakapacker configuration fi
 ## Benefits
 
 Using TypeScript with Shakapacker provides:
+
 - **Type Safety**: Catch configuration errors at compile time
 - **IDE Support**: Get autocompletion and inline documentation
 - **Better Refactoring**: Safely rename and restructure configurations
@@ -56,13 +58,13 @@ Rename `config/webpack/webpack.config.js` to `config/webpack/webpack.config.ts`:
 
 ```typescript
 // config/webpack/webpack.config.ts
-import { generateWebpackConfig, merge } from 'shakapacker'
-import type { WebpackConfigWithDevServer } from 'shakapacker/types'
-import type { Configuration } from 'webpack'
+import { generateWebpackConfig, merge } from "shakapacker"
+import type { WebpackConfigWithDevServer } from "shakapacker/types"
+import type { Configuration } from "webpack"
 
 const customConfig: Configuration = {
   resolve: {
-    extensions: ['.css', '.ts', '.tsx']
+    extensions: [".css", ".ts", ".tsx"]
   }
 }
 
@@ -83,7 +85,7 @@ import type {
   WebpackConfigWithDevServer,
   RspackConfigWithDevServer,
   CompressionPluginOptions
-} from 'shakapacker/types'
+} from "shakapacker/types"
 ```
 
 ### Step 2: Type Your Configuration Objects
@@ -94,16 +96,16 @@ Add type annotations to your configuration objects:
 // Before (JavaScript)
 const customConfig = {
   resolve: {
-    extensions: ['.css', '.ts', '.tsx']
+    extensions: [".css", ".ts", ".tsx"]
   }
 }
 
 // After (TypeScript)
-import type { Configuration } from 'webpack'
+import type { Configuration } from "webpack"
 
 const customConfig: Configuration = {
   resolve: {
-    extensions: ['.css', '.ts', '.tsx']
+    extensions: [".css", ".ts", ".tsx"]
   }
 }
 ```
@@ -120,8 +122,8 @@ function modifyConfig(config) {
 }
 
 // After (TypeScript)
-import type { Configuration } from 'webpack'
-import type { WebpackPluginInstance } from 'shakapacker/types'
+import type { Configuration } from "webpack"
+import type { WebpackPluginInstance } from "shakapacker/types"
 
 function modifyConfig(config: Configuration): Configuration {
   const plugins = config.plugins as WebpackPluginInstance[]
@@ -134,11 +136,11 @@ function modifyConfig(config: Configuration): Configuration {
 
 ```typescript
 // config/webpack/development.ts
-import { generateWebpackConfig } from 'shakapacker'
-import type { WebpackConfigWithDevServer } from 'shakapacker/types'
+import { generateWebpackConfig } from "shakapacker"
+import type { WebpackConfigWithDevServer } from "shakapacker/types"
 
 const developmentConfig: WebpackConfigWithDevServer = generateWebpackConfig({
-  devtool: 'eval-cheap-module-source-map',
+  devtool: "eval-cheap-module-source-map",
   devServer: {
     hot: true,
     port: 3035
@@ -153,11 +155,11 @@ export default developmentConfig
 ### Pattern 1: Custom Loaders
 
 ```typescript
-import type { RuleSetRule } from 'webpack'
+import type { RuleSetRule } from "webpack"
 
 const customLoader: RuleSetRule = {
   test: /\.svg$/,
-  use: ['@svgr/webpack']
+  use: ["@svgr/webpack"]
 }
 
 const config: Configuration = generateWebpackConfig({
@@ -170,12 +172,12 @@ const config: Configuration = generateWebpackConfig({
 ### Pattern 2: Plugin Configuration
 
 ```typescript
-import CompressionPlugin from 'compression-webpack-plugin'
-import type { CompressionPluginOptions } from 'shakapacker/types'
+import CompressionPlugin from "compression-webpack-plugin"
+import type { CompressionPluginOptions } from "shakapacker/types"
 
 const compressionOptions: CompressionPluginOptions = {
-  filename: '[path][base].gz',
-  algorithm: 'gzip',
+  filename: "[path][base].gz",
+  algorithm: "gzip",
   test: /\.(js|css|html|json|ico|svg|eot|otf|ttf)$/
 }
 
@@ -187,8 +189,8 @@ const config: Configuration = generateWebpackConfig({
 ### Pattern 3: Conditional Configuration
 
 ```typescript
-import type { Configuration } from 'webpack'
-import { env } from 'shakapacker'
+import type { Configuration } from "webpack"
+import { env } from "shakapacker"
 
 const config: Configuration = generateWebpackConfig()
 
@@ -208,11 +210,11 @@ export default config
 
 ```typescript
 // config/rspack/rspack.config.ts
-import type { RspackConfigWithDevServer } from 'shakapacker/types'
-import { generateWebpackConfig } from 'shakapacker'
+import type { RspackConfigWithDevServer } from "shakapacker/types"
+import { generateWebpackConfig } from "shakapacker"
 
 const rspackConfig: RspackConfigWithDevServer = generateWebpackConfig({
-  mode: 'development',
+  mode: "development",
   devServer: {
     hot: true,
     port: 3036
@@ -246,11 +248,13 @@ npm run type-check
 ## Available Types Reference
 
 ### Core Types
+
 - `Config` - Shakapacker configuration from shakapacker.yml
 - `Env` - Environment variables and helpers
 - `DevServerConfig` - Development server configuration
 
 ### Webpack/Rspack Types
+
 - `WebpackConfigWithDevServer` - Webpack configuration with dev server
 - `RspackConfigWithDevServer` - Rspack configuration with dev server
 - `WebpackPluginInstance` - Webpack plugin instance type
@@ -258,6 +262,7 @@ npm run type-check
 - `RspackPlugin` - **⚠️ Deprecated:** Use `RspackPluginInstance` instead
 
 ### Helper Types
+
 - `CompressionPluginOptions` - Compression plugin configuration
 - `ReactRefreshWebpackPlugin` - React refresh for Webpack
 - `ReactRefreshRspackPlugin` - React refresh for Rspack
@@ -287,7 +292,7 @@ plugins.push(new MyPlugin())
 
 ```typescript
 // If types aren't available, declare them
-declare module 'my-custom-loader' {
+declare module "my-custom-loader" {
   const loader: any
   export default loader
 }
@@ -316,27 +321,31 @@ Here's a complete example of a typed webpack configuration:
 
 ```typescript
 // config/webpack/webpack.config.ts
-import { generateWebpackConfig, merge, config as shakapackerConfig } from 'shakapacker'
-import type { Configuration } from 'webpack'
-import type { WebpackConfigWithDevServer } from 'shakapacker/types'
-import CompressionPlugin from 'compression-webpack-plugin'
-import { resolve } from 'path'
+import {
+  generateWebpackConfig,
+  merge,
+  config as shakapackerConfig
+} from "shakapacker"
+import type { Configuration } from "webpack"
+import type { WebpackConfigWithDevServer } from "shakapacker/types"
+import CompressionPlugin from "compression-webpack-plugin"
+import { resolve } from "path"
 
 // Type-safe custom configuration
 const customConfig: Configuration = {
   resolve: {
-    extensions: ['.css', '.ts', '.tsx'],
+    extensions: [".css", ".ts", ".tsx"],
     alias: {
-      '@': resolve(__dirname, '../../app/javascript'),
-      'components': resolve(__dirname, '../../app/javascript/components'),
-      'utils': resolve(__dirname, '../../app/javascript/utils')
+      "@": resolve(__dirname, "../../app/javascript"),
+      components: resolve(__dirname, "../../app/javascript/components"),
+      utils: resolve(__dirname, "../../app/javascript/utils")
     }
   },
   module: {
     rules: [
       {
         test: /\.svg$/,
-        use: ['@svgr/webpack'],
+        use: ["@svgr/webpack"],
         issuer: /\.(tsx?|jsx?)$/
       }
     ]
@@ -347,13 +356,13 @@ const customConfig: Configuration = {
 const webpackConfig: Configuration = generateWebpackConfig(customConfig)
 
 // Type-safe modifications based on environment
-if (shakapackerConfig.env === 'production') {
+if (shakapackerConfig.env === "production") {
   const plugins = (webpackConfig.plugins || []) as WebpackPluginInstance[]
 
   plugins.push(
     new CompressionPlugin({
-      filename: '[path][base].br',
-      algorithm: 'brotliCompress',
+      filename: "[path][base].br",
+      algorithm: "brotliCompress",
       test: /\.(js|css|html|json|ico|svg|eot|otf|ttf)$/
     })
   )
@@ -376,4 +385,4 @@ After migrating to TypeScript:
 - [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html)
 - [Webpack TypeScript Configuration](https://webpack.js.org/configuration/configuration-languages/#typescript)
 - [Shakapacker Types Documentation](./types/README.md)
-- [Migration Examples](https://github.com/shakacode/shakapacker/tree/main/examples/typescript-config)
+- [Migration Examples](https://github.com/shakacode/shakapacker/tree/main/examples/typescript-config)

data/docs/typescript.md

@@ -8,8 +8,8 @@ Shakapacker v9 includes TypeScript support, providing type safety and better IDE
 
 ```typescript
 // webpack.config.ts
-import { generateWebpackConfig } from 'shakapacker'
-import type { Configuration } from 'webpack'
+import { generateWebpackConfig } from "shakapacker"
+import type { Configuration } from "webpack"
 
 const config: Configuration = generateWebpackConfig({
   // Your config with full type safety
@@ -22,7 +22,7 @@ export default config
 
 ```javascript
 // webpack.config.js
-const { generateWebpackConfig } = require('shakapacker')
+const { generateWebpackConfig } = require("shakapacker")
 
 /** @type {import('webpack').Configuration} */
 const config = {
@@ -48,10 +48,12 @@ module.exports = generateWebpackConfig(config)
 ## IDE Setup
 
 ### VS Code
+
 - Install TypeScript extension (built-in)
 - Set `"typescript.tsdk": "node_modules/typescript/lib"` in settings
 
 ### WebStorm/IntelliJ
+
 - Enable TypeScript service in Settings → Languages & Frameworks → TypeScript
 
 ## Common Patterns
@@ -59,7 +61,7 @@ module.exports = generateWebpackConfig(config)
 ### Environment-Specific Config
 
 ```typescript
-import { generateWebpackConfig, env } from 'shakapacker'
+import { generateWebpackConfig, env } from "shakapacker"
 
 const config = generateWebpackConfig({
   optimization: {
@@ -71,8 +73,8 @@ const config = generateWebpackConfig({
 ### Rspack Config
 
 ```typescript
-import { generateRspackConfig } from 'shakapacker/rspack'
-import type { RspackOptions } from '@rspack/core'
+import { generateRspackConfig } from "shakapacker/rspack"
+import type { RspackOptions } from "@rspack/core"
 
 const config: RspackOptions = {
   // Rspack-specific config
@@ -84,16 +86,18 @@ export default generateRspackConfig(config)
 ## Troubleshooting
 
 **Cannot find module 'shakapacker'**
+
 ```typescript
 /// <reference types="shakapacker" />
 ```
 
 **Type errors with custom loaders**
+
 ```typescript
-use: [require.resolve('custom-loader') as any]
+use: [require.resolve("custom-loader") as any]
 ```
 
 ## Further Reading
 
 - [Webpack TypeScript Documentation](https://webpack.js.org/configuration/configuration-languages/#typescript)
-- [TypeScript Handbook](https://www.typescriptlang.org/docs/)
+- [TypeScript Handbook](https://www.typescriptlang.org/docs/)

data/docs/using_esbuild_loader.md

@@ -11,6 +11,7 @@ If you face any issues, please report them at https://github.com/shakacode/shaka
 While esbuild is a complete bundler, through the usage of [esbuild-loader](https://github.com/privatenumber/esbuild-loader), you can still leverage esbuild's speedy transpilation and minification in your Webpack-based configs.
 
 Please note, that unlike Babel or SWC loader, esbuild-loader has got no support for things like:
+
 - React Hot Module reload
 - ES5 as a compilation target
 - Automatic polyfills for missing browser features
@@ -28,7 +29,7 @@ npm install esbuild esbuild-loader
 ```
 
 2. Add or change `javascript_transpiler` value in your default `shakapacker.yml` config to `esbuild`
-The default configuration of babel is done by using `package.json` to use the file within the `shakapacker` package.
+   The default configuration of babel is done by using `package.json` to use the file within the `shakapacker` package.
 
 ```yml
 default: &default
@@ -47,7 +48,7 @@ default: &default
   cache_manifest: false
 
   # Select JavaScript transpiler to use, available options are 'babel' (default), 'swc' or 'esbuild'
-  javascript_transpiler: 'esbuild'
+  javascript_transpiler: "esbuild"
 ```
 
 ### (Optional) Replace minification with esbuild
@@ -59,14 +60,14 @@ o do so, you need to modify your webpack configuration and use `ESBuildMinifyPlu
 Example:
 
 ```js
-const { generateWebpackConfig } = require('shakapacker')
-const { ESBuildMinifyPlugin } = require('esbuild-loader')
+const { generateWebpackConfig } = require("shakapacker")
+const { ESBuildMinifyPlugin } = require("esbuild-loader")
 
 const options = {
   optimization: {
     minimizer: [
       new ESBuildMinifyPlugin({
-        target: 'es2015' 
+        target: "es2015"
       })
     ]
   }
@@ -101,11 +102,10 @@ See some examples below of potential `config/babel.config.js`.
 
 ### Example: Specifying esnext target environment
 
-
 ```js
 const customConfig = {
   options: {
-    target: 'esnext'
+    target: "esnext"
   }
 }
 
@@ -115,12 +115,12 @@ module.exports = customConfig
 ### Example: Using custom jsxFragment and jsxFactory
 
 ```js
-const { env } = require('shakapacker')
+const { env } = require("shakapacker")
 
 const customConfig = {
   options: {
-    jsxFragment: 'Fragment',
-    jsxFactory: 'h' 
+    jsxFragment: "Fragment",
+    jsxFactory: "h"
   }
 }
 

data/docs/v6_upgrade.md

@@ -13,41 +13,47 @@ Webpacker used to configure Webpack indirectly, which lead to a [complicated sec
 While you have to configure integration with frameworks yourself, [`webpack-merge`](https://github.com/survivejs/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).
 
 ## webpacker v6.0.0.rc.6 to shakapacker v6.0.0
+
 See an example migration here: [PR 27](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/pull/27).
 
 ### Update to v6.5.2
+
 1. Remove setting the NODE_ENV in your `bin/webpacker` and `bin/webpacker-dev-server` bin stubs as these are not set in the webpack runner file.
 
 ### Update Steps to v6.0.0 from v6.0.0.rc.6
+
 _If you're on webpacker v5, follow [how to upgrade to webpacker v6.0.0.rc.6 from v5](#how-to-upgrade-to-webpacker-v600rc6-from-v5) to get to v6.0.0.rc.6 first._
 
 1. Change the gem name from `webpacker` to `shakapacker` and the NPM package from `@rails/webpacker` to `shakapacker`.
 1. Install the peer dependencies. Run `yarn add @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/runtime babel-loader compression-webpack-plugin terser-webpack-plugin webpack webpack-assets-manifest webpack-cli webpack-merge webpack-sources webpack-dev-server`. You may have old versions of libraries. Run `yarn install` and check for warnings like `warning " > shakapacker@6.1.1" has incorrect peer dependency "compression-webpack-plugin@^9.0.0"` and `file-loader@1.1.11" has incorrect peer dependency "webpack@^2.0.0 || ^3.0.0 || ^4.0.0"`. In other words, warnings like these are **serious** and will cause considerable confusion if not respected.
 1. Update any scripts that called `bin/webpack` or `bin/webpack-dev-server` to `bin/webpacker` or `bin/webpacker-dev-server`
 1. Update your webpack config for a single config file, `config/webpack/webpack.config.js`. If you want to use the prior style of having a separate file for each NODE_ENV, you can use this shim for `config/webpack/webpack.config.js`. WARNING, previously, if you did not set `NODE_ENV`, `NODE_ENV` defaulted to `development`. Thus, you might expect `config/webpack/development.js` to run, but you'll instead be using the the configuration file that corresponds to your `RAILS_ENV`. If your `RAILS_ENV` is `test`, you'd be running `config/webpack/test.js`.
+
    ```js
    // name this file config/webpack/webpack.config.js
-   const { env, webpackConfig } = require('shakapacker')
-   const { existsSync } = require('fs')
-   const { resolve } = require('path')
+   const { env, webpackConfig } = require("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 {                       
+     } else {
        // Probably an error if the file for the NODE_ENV does not exist
-       throw new Error(`Got Error with NODE_ENV = ${env.nodeEnv}`);
+       throw new Error(`Got Error with NODE_ENV = ${env.nodeEnv}`)
      }
    }
 
    module.exports = envSpecificConfig()
    ```
+
 1. Update `babel.config.js` if you need JSX support. See [Customizing Babel Config](./customizing_babel_config.md)
 1. If you are using the view helper called `asset_pack_path`, change "media/" in path to "static/" or consider using the `image_pack_path`.
 
 ## How to upgrade to Webpacker v6.0.0.rc.6 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. **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.
@@ -80,67 +86,73 @@ _If you're on webpacker v5, follow [how to upgrade to webpacker v6.0.0.rc.6 from
    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 terser-webpack-plugin webpack webpack-assets-manifest webpack-cli webpack-merge webpack-sources webpack-dev-server
    ```
 
 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 configuration, 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 still keep your entries in a separate directory, called something like `packs`, or `entries`. This directory is defined with the `source_path`.
 
 1. Update `webpack-dev-server` to the current version, greater than 4.2, updating `package.json`.
 
-   **Important:** If you encounter the error `[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema` with an unknown property `_assetEmittingPreviousFiles`, this indicates your webpack-dev-server configuration contains deprecated options. 
-   
+   **Important:** If you encounter the error `[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema` with an unknown property `_assetEmittingPreviousFiles`, this indicates your webpack-dev-server configuration contains deprecated options.
+
    To resolve this issue:
    - Ensure you're using webpack-cli >= 4.7.0 with webpack-dev-server 5.x (webpack-cli 4.7+ is compatible with webpack-dev-server v5)
    - Check your current versions: `npm list webpack-cli webpack-dev-server`
    - Remove any legacy options like `_assetEmittingPreviousFiles` from your dev-server configuration
    - Review the [webpack-dev-server migration guide](https://github.com/webpack/webpack-dev-server/blob/master/migration-v5.md) for proper v4 to v5 migration steps
-   
+
    See [issue #526](https://github.com/shakacode/shakapacker/issues/526) for more details.
 
-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. 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. `config/webpack/environment.js` was changed to `config/webpack/base.js` and exports a native webpack config so no need to call `toWebpackConfig`.
    Use `merge` to make changes:
-   
+
    ```js
    // config/webpack/base.js
-   const { webpackConfig, merge } = require('@rails/webpacker');
+   const { webpackConfig, merge } = require("@rails/webpacker")
    const customConfig = {
      module: {
        rules: [
          {
-           test: require.resolve('jquery'),
-           loader: 'expose-loader',
+           test: require.resolve("jquery"),
+           loader: "expose-loader",
            options: {
-             exposes: ['$', 'jQuery']
+             exposes: ["$", "jQuery"]
            }
          }
        ]
      }
-   };
-   
-   module.exports = merge(webpackConfig, customConfig);
+   }
+
+   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": [
@@ -148,6 +160,7 @@ _If you're on webpacker v5, follow [how to upgrade to webpacker v6.0.0.rc.6 from
      ]
    }
    ```
+
    See customization example the [Customizing Babel Config](./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/main/README.md#webpack-configuration)
@@ -155,10 +168,11 @@ _If you're on webpacker v5, follow [how to upgrade to webpacker v6.0.0.rc.6 from
    ```js
    {
      resolve: {
-       extensions: ['.ts', '.tsx', '.vue', '.css']
+       extensions: [".ts", ".tsx", ".vue", ".css"]
      }
    }
    ```
+
 1. In `webpacker.yml`, check if you had `watched_paths`. That is now `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.
@@ -175,7 +189,6 @@ _If you're on webpacker v5, follow [how to upgrade to webpacker v6.0.0.rc.6 from
 
 1. Now, follow the steps above to get to shakapacker v6 from webpacker v6.0.0.rc.6
 
-
 ## 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...61e897f2c604085f45b9ab5e23642501e430fb28)

data/docs/v7_upgrade.md

@@ -14,7 +14,7 @@ Just so you know, Shakapacker v8 will remove any backward compatibility for spel
 
 **Note:** At each step of changing the version, ensure that you update both gem and npm versions to the same "exact" version (like `x.y.z` and not `^x.y.z` or `>= x.y.z`).
 
-1. Upgrade Shakapacker to the latest 6.x version and make sure there are no issues running your application. 
+1. Upgrade Shakapacker to the latest 6.x version and make sure there are no issues running your application.
 2. Upgrade Shakapacker to version 7.
 3. Run `rake shakapacker:binstubs` to get the new files in place. Then delete the `bin/webpacker` and `bin/webpacker-dev-server` ones.
 4. Change spelling from Webpacker to Shakapacker in the code
@@ -23,8 +23,8 @@ Just so you know, Shakapacker v8 will remove any backward compatibility for spel
      - Rename`Shakapacker.config.webpacker_precompile?` method, replace it with `Shakapacker.config.shakapacker_precompile?`
    - `--debug-webpacker` is now `--debug-shakapacker` for your shakapacker binstubs.
 5. Rename files
-    - Rename `config/webpacker.yml` to `config/shakapacker.yml`.
-    - Rename environment variables from `WEBPACKER_XYZ` to `SHAKAPACKER_XYZ`.
+   - Rename `config/webpacker.yml` to `config/shakapacker.yml`.
+   - Rename environment variables from `WEBPACKER_XYZ` to `SHAKAPACKER_XYZ`.
 6. Where you have used webpackConfig, you must create a new instance with `generateWebpackConfig`. Alternatively, you can rename the import to globalMutableWebpackConfig, which retains the v6 behavior of a global, mutable object.
 7. You may need to upgrade dependencies in package.json. You should use `yarn upgrade-interactive`.
 
@@ -35,25 +35,27 @@ When generating file paths for static assets, a top-level directory will no long
 ## The `webpackConfig` property is changed
 
 The `webpackConfig` property in the `shakapacker` module has been changed. The shakapacker module has two options:
+
 1. `generateWebpackConfig`: a function that returns a new webpack configuration object, which ensures that any modifications made to it will not affect any other usage of the webpack configuration.
 2. `globalMutableWebpackConfig`: if a project still desires the old mutable object. You can rename your imports of `webpackConfig` with `globalMutableWebpackConfig`.
 
 ## Example Upgrade
+
 If you started with:
 
 ```js
-const { webpackConfig } = require('shakapacker')
+const { webpackConfig } = require("shakapacker")
 ```
 
 Switch to:
 
 ```js
-const { generateWebpackConfig } = require('shakapacker')
+const { generateWebpackConfig } = require("shakapacker")
 const webpackConfig = generateWebpackConfig()
 ```
 
 or use `globalMutableWebpackConfig` if the project desires to use a globally mutable object.
 
 ```js
-const { globalMutableWebpackConfig: webpackConfig } = require('shakapacker')
+const { globalMutableWebpackConfig: webpackConfig } = require("shakapacker")
 ```