Docs Developer Site
DeveloperDocsReact4xp3.xUpgrade

React4XP - Upgrade

Contents

We have tried to simplify the build system and limit the number of options.

What

Npm packages

There used to be 7 npm packages, now there are only two:

  • @enonic/react4xp - The build system.

  • @enonic/react-components - Optional pure react components.

Development Mode

In order to make a development build you can add -Pdev or -Pdevelopment to the gradle commandline.

This will also set Node environment variable BUILD_ENV='development'

Verbosity

In order to increase verbosity you can add -i or --info to the gradle commandline.

This will also set Node environment variable VERBOSE='true'

react4xp.properties

This file has been dropped in favour of react4xp.config.js

react4xp.config.js

This is where you can add extra externals, or override some defaults. There should be an updated example file in the @enonic/react4xp package under examples/react4xp.config.js

See <https://github.com/enonic/enonic-react4xp/blob/master/examples/react4xp.config.js>

Example:

module.exports = {
  chunkDirs: ['aChunkDir', 'anotherChunkDir'],
  entryDirs: ['anEntryDir', 'anotherEntryDir'],
  entryExtensions: ['jsx', 'tsx', 'ts', 'es6', 'es', 'js'],
  externals: {
    lodash: '_'
  }
};

NashornPolyfills

The path for the entry file for extra nashorn polyfills is now hardcoded to

<Project.Dir>/src/main/resources/react4xpNashornPolyfills.es6

Webpack overrides (only used when building components)

The path for the webpack overrides file is now hardcoded to <Project.Dir>/webpack.config.react4xp.js

There should be an updated example file in the @enonic/react4xp package under examples/webpack.config.react4xp.js

Application configuration file (runtime settings)

You can now set some runtime options in $XP_HOME/config/<app.name>.cfg There should be an updated example file in the @enonic/react4xp package under examples/app.cfg

Starting from 3.2.0 react4xp.ssr.settings can only be a string. Number value is no longer supported and will cause an error.

See <https://github.com/enonic/enonic-react4xp/blob/master/examples/app.cfg>

Example:

react4xp.ssr.lazyLoad = false
react4xp.ssr.maxThreads = 0
react4xp.ssr.settings = --optimistic-types=false

How

package.json

Uninstall the react4xp npm package

npm uninstall react4xp

Install the @enonic/react4xp npm package

npm install --save-dev @enonic/react4xp

build.gradle

Upgrade lib-react4xp to 3.x.x in build.gradle

rootProject.ext.LIB_REACT4XP_VERSION = "3.2.0"

Update paths to gradle files imported from node_modules/@enonic/react4xp

def react4xpGradlePath = 'node_modules/@enonic/react4xp/react4xp.gradle'
apply from: 'node_modules/@enonic/react4xp/npmInstall.gradle'
apply from: 'node_modules/@enonic/react4xp/updaters.gradle'

If you have extra externals, chunkDirs, entryDirs or entryExtensions

Copy node_modules/@enonic/react4xp/examples/react4xp.config.js into you project.

cp node_modules/@enonic/react4xp/examples/react4xp.config.js .

  • Move externals, chunkDirs, entryDirs or entryExtensions from react4xp.properties into react4xp.config.js

If you have extra nashorn polyfills

  • Make sure they are placed in <Project.Dir>/src/main/resources/react4xpNashornPolyfills.es6

If you have webpack overrides

  • Make sure they are placed in <Project.Dir>/webpack.config.react4xp.js

There should be an updated example file in the @enonic/react4xp package under examples/webpack.config.react4xp.js

If you are using react components from the react4xp-regions package

  • Uninstall the react4xp-regions npm package (might already be gone, was dependency of the react4xp npm package)

Install the @enonic/react-components npm package

npm install --save-dev @enonic/react-components

Jsx/Tsx files

Edit your jsx files and change import path from:

import Regions from 'react4xp-regions/Regions';

to:

import Regions from '@enonic/react-components/Regions';

Contents

Contents