I’ve just started using the new @atlassianlabs/jql-editor-forge package in my Custom UI Forge app with Create React App v5 (which uses webpack v5), and thought I’d detail some of the the issues I encountered getting it to build in my project in case they’re useful to anyone else, and to provide feedback Atlassian in the hope that some of these issues can be resolved without the following workarounds.
antlr4ts issue
Due to this issue in antlr4ts (a dependency of @atlassianlabs/jql-editor), Node’s assert and util packages must be manually polyfilled (this happened automatically in webpack v4 and below, but does not automatically happen with webpack v5 anymore)
This can be accomplished by a tool like react-app-rewired (if using Create React App - otherwise the polyfills can be added to the webpack config here), which can be used to add polyfills:
-
npm install react-app-rewired --save-devand switch yourpackage.jsonscript calls to be:
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test",
+ "test": "react-app-rewired test",
"eject": "react-scripts eject"
}
- Add required polyfills with
npm install --save-dev assert util - Create a
config-overrides.jsfile with the following contents:
module.exports = function override(config, env) {
// antlr4ts (a dependency of @atlassianlabs/jql-editor) requires the following polyfills to run with Webpack 5
const loaders = config.resolve;
loaders.fallback = {
assert: require.resolve("assert"),
util: require.resolve("util"),
};
return config;
};
named import from default-exporting module error
If you encounter the following error (which is normally a webpack warning, but is treated as an error with Create React App and fails the build):
Should not import the named export 'name' (imported as 'packageName') from default-exporting module (only default export is available soon)
It is due to two analytics files in several Atlassian repos that need to be patched.
- Install
patch-packagewithnpm install --save-dev patch-packageand add apostinstallscript to your npm run scripts:
"scripts": {
+ "postinstall": "patch-package"
}
- Create these two files in a
patchesfolder:
@atlassianlabs+jql-editor+1.0.0.patch:
diff --git a/node_modules/@atlassianlabs/jql-editor/dist/esm/analytics/index.js b/node_modules/@atlassianlabs/jql-editor/dist/esm/analytics/index.js
index fd32741..b09e497 100644
--- a/node_modules/@atlassianlabs/jql-editor/dist/esm/analytics/index.js
+++ b/node_modules/@atlassianlabs/jql-editor/dist/esm/analytics/index.js
@@ -1,6 +1,5 @@
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import { ANALYTICS_CHANNEL } from './types';
-import { name as packageName, version as packageVersion } from '../version.json';
import { useAnalyticsEvents } from '@atlaskit/analytics-next';
import { useCallback } from 'react';
export var useJqlPackageAnalytics = function useJqlPackageAnalytics(analyticsSource, packageName, packageVersion, analyticsChannel) {
@@ -22,7 +21,7 @@ export var useJqlPackageAnalytics = function useJqlPackageAnalytics(analyticsSou
};
};
export var useJqlEditorAnalytics = function useJqlEditorAnalytics(analyticsSource) {
- return useJqlPackageAnalytics(analyticsSource, packageName, packageVersion, ANALYTICS_CHANNEL);
+ return useJqlPackageAnalytics(analyticsSource, "", "", ANALYTICS_CHANNEL);
};
export * from './types';
export * from './listener';
\ No newline at end of file
@atlassianlabs+jql-editor-autocomplete-rest+1.0.0.patch:
diff --git a/node_modules/@atlassianlabs/jql-editor-autocomplete-rest/dist/esm/analytics/index.js b/node_modules/@atlassianlabs/jql-editor-autocomplete-rest/dist/esm/analytics/index.js
index 8c7031f..ea66e43 100644
--- a/node_modules/@atlassianlabs/jql-editor-autocomplete-rest/dist/esm/analytics/index.js
+++ b/node_modules/@atlassianlabs/jql-editor-autocomplete-rest/dist/esm/analytics/index.js
@@ -1,6 +1,5 @@
-import { name as packageName, version as packageVersion } from '../version.json';
import { ANALYTICS_CHANNEL, useJqlPackageAnalytics } from '@atlassianlabs/jql-editor';
export var useJqlEditorAutocompleteAnalytics = function useJqlEditorAutocompleteAnalytics(analyticsSource) {
- return useJqlPackageAnalytics(analyticsSource, packageName, packageVersion, ANALYTICS_CHANNEL);
+ return useJqlPackageAnalytics(analyticsSource, null, null, ANALYTICS_CHANNEL);
};
export * from './types';
\ No newline at end of file
I would encourage Atlassian to update these packages to ensure they’re natively compatible with Webpack 5 to resolve the need for these patches.
