Upgrading to v5
Contents
Important changes
Import restrictions
It turns out importing from React4xp entries causes "intermittent" SSR errors. "When" it happens depends upon which page is visited first, after starting the React4xp application.
"Why" it happens is slightly complex. Entries and dependencies are transpiled with different optimizations. When an entry is imported somewhere: the imported entry’s source code is duplicated into multiple bundles. Each bundle pushes it’s "version" of the code onto the global chunk object using a chunk id. All duplications use the same chunk id, but have different optimizations. When the original entry "wins", everything works as expected, but when a imported chunk with wrong optimization wins, the error occurs.
To avoid this we have introduced import restrictions on the site folder and entryDirs. Trying to import from any restricted path, will cause a compilation error with a helpful error message.
Entry Extension Whitelist
We have also introduced a configurable entryExtensionWhitelist.
This is a list of file extensions that are allowed to be imported from under site and entryDirs. There is a default list, but you can override it in react4xp.config.json.
@enonic/react-components
If you are using @enonic/react-components, you might run into some compiletime resolve issues. The new version of this package fixes that.
Upgrade steps
Upgrade @enonic/react4xp in package.json, and also the lib-react4xp in build.gradle.
package.json
npm install --save-dev @enonic/react4xp@^5build.gradle
dependencies {
include "com.enonic.lib:lib-react4xp:5.x.x"
}react4xp.config.json
entryExtensionWhitelist: [
'css',
'd', (1)
'png',
'sass',
'scss',
'styl'
],| 1 | TypeScript declaration files |
Build
Try to compile and see if you get the compilation error mentioned in the what section at the top.
Move code
If you get a compilation error, move any imported entry code outside site and entryDirs. For example into the src/main/resources/react4xp folder.
Side notes
@enonic/react-components
npm install --save-dev @enonic/react-components@^4