#Upgrade 0.22 to 0.23

Change startupjs and all @startupjs/* dependencies in your package.json to ^0.23.

#BREAKING CHANGES

1. Update babel, metro and webpack config files:

   1. Change their extensions to .cjs:

      • babel.config.js -> babel.config.cjs
      • metro.config.js -> metro.config.cjs
      • webpack.server.config.js -> webpack.server.config.cjs
      • webpack.web.config.js -> webpack.web.config.cjs

   2. change the require of bundler inside all of them to have an explicit .cjs extension:

      • require('startupjs/bundler') -> require('startupjs/bundler.cjs')

   3. add .cjs extension to the 'startupjs/babel' preset in babel.config.cjs:

      • 'startupjs/babel' -> 'startupjs/babel.cjs'

      module.exports = {
        presets: [
          ['startupjs/babel.cjs', {
            alias: {}
          }]
        ]
      }

2. Update startupjs config file:

   1. Change its extension to .cjs:

      • startupjs.config.js -> startupjs.config.cjs

   2. Update it's require of config to a new CJS file:

      • require('@startupjs/ui/config') -> require('@startupjs/ui/config-cjs/index.cjs')

3. Add vite.config.cjs file to your project root with the following content:

   const config = require('startupjs/bundler.cjs').viteConfig
   module.exports = config

4. Update server:

   1. Change server.js to:

      import run from './server/index.js'
      run()

   2. Add the following to the end of server/index.js:

      export default function run () {}

5. Update package.json.

   1. Add after "name":

      "type": "module",
      "sideEffects": [],

   2. Change postinstall script to:

      "scripts": {
          "postinstall": "startupjs patch-package"
      }

   3. Change build script to:

      "scripts": {
          "build": "startupjs build --async"
      }

      Note that this will start building production bundle splitting all your components into separate chunks. You have to have http2 enabled on your load-balancer and cache all your .js files to have this working correctly.

   4. Put /* @asyncImports */ comment to the top of your main/pages/index.js and to all other frontend-microservices */pages/index.js if you have any (like admin/pages/index.js, etc.)

      This will transform imports in this files to be asynchronous for production. Which will greatly improve the initial loading speed.

   5. Remove postinstall-postinstall and patch-package from your devDependencies

   6. Fix react-native-web version in dependencies to 0.12.3:

      "dependencies": {
          "react-native-web": "0.12.3"
      }

6. Delete patches folder completely.

7. Delete the file clientHelpers/BASE_URL.web.js if it exists.

8. If you have react-native.config.js file, change its extension to .cjs:

   • react-native.config.js -> react-native.config.cjs

9. Change hot-reloading library on web to Fast Refresh. This simplifies the hot reloading setup and gets rid of the extra end-user dependency @hot-loader/react-dom. End-users must update their projects to remove the @hot-loader/react-dom from their package.json and from the Root/index.web.js file.

#For full list of new features and bug fixes see CHANGELOG