Upgrading to Pageflow Scrolled 16.2.0

Warning

This page is still work in progress.

Pageflow 16.2 switches from the unmaintained Webpacker gem to Shakapacker.

Shakapacker Migration

In your host application, delete all Webpacker related files:

• bin/webpack
• bin/webpack-dev-server
• config/webpack/development.js
• config/webpack/environment.js
• config/webpack/production.js
• config/webpack/test.js
• config/webpacker.yml

Remove entries for webpacker and uglifierfrom your Gemfile and add shakapacker and terser instead:

# Gemfile
- gem 'uglifier', '>= 1.3.0'
+ gem 'terser', '~> 1.1'

- gem 'webpacker', '~> 4.2'
+ gem 'shakapacker', '~> 7.1'

Then run

$ bundle install

and change your production environment to use terser:

# config/environments/production.rb
-  config.assets.js_compressor = :uglifier
+  config.assets.js_compressor = :terser

Install Shakapacker:

$ ./bin/rails shakapacker:install

This will ask to override your package.json file. If you have customized the file, review the diff. Otherwise accept the change. In particular, make sure to restore the changes to your application's package.json file to depend on the pageflow and pageflow-scrolled packages which are distributed as part of the pageflow gem:

{
  "scripts": {
    "preinstall": "bundle exec rake pageflow_scrolled:create_bundle_symlinks_for_yarn"
  },
  "dependencies": {
    ...
    "pageflow": "file:.bundle/for-yarn/pageflow/package",
    "pageflow-scrolled": "file:.bundle/for-yarn/pageflow/entry_types/scrolled/package",
    ...
  }
}

Then run

$ yarn install --force

Now you need to adapt the Babel config provided by Shakapacker for React support. Using a simplified version of the steps from Shakapacker's customizing Babel configuration guide, first run:

$ yarn add react@^16 react-dom@^16 @babel/preset-react

Remove the babel key from your package.json file and instead create or update babel.config.js in your repository root:

// babel.config.js
module.exports = function (api) {
  const defaultConfigFunc = require('shakapacker/package/babel/preset.js')
  const resultConfig = defaultConfigFunc(api)
  const isDevelopmentEnv = api.env('development')
  const isTestEnv = api.env('test')

  const changesOnDefault = {
    presets: [
      [
        '@babel/preset-react',
        {
          development: isDevelopmentEnv || isTestEnv,
          useBuiltIns: true
        } 
      ]
    ]
  }

  resultConfig.presets = [...resultConfig.presets, ...changesOnDefault.presets]

  return resultConfig
}

Re-run the Pageflow Scrolled install generator and review changes:

$ ./bin/rails generate pageflow_scrolled:install