React4XP - Upgrade to v3
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 globals, or override some defaults. There should be an updated example file in the @enonic/react4xp package under 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.
Example:
react4xp.ssr.lazyLoad = false
react4xp.ssr.maxThreads = 0
react4xp.ssr.settings = --optimistic-types=falseHow
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 files
Edit your jsx files and change import path from:
import Regions from 'react4xp-regions/Regions';to:
import Regions from '@enonic/react-components/Regions';