Using @atlassianlabs/jql-editor-forge with Webpack v5 in Create React App

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:

  1. npm install react-app-rewired --save-dev and switch your package.json script 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"
}
  1. Add required polyfills with npm install --save-dev assert util
  2. Create a config-overrides.js file 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.

  1. Install patch-package with npm install --save-dev patch-package and add a postinstall script to your npm run scripts:
 "scripts": {
+  "postinstall": "patch-package"
 }
  1. Create these two files in a patches folder:

@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.

5 Likes

It also depends on styled-components, which is also not great.

Hey @joshp thank you for the feedback and providing such a detailed explanation and workaround.
I’ve raised these issues internally and we’ll look to prioritise them accordingly.

Kind regards,
Kyle

1 Like

Thanks @Kyle :raised_hands:

We’re also using JQL for configuration purposes. So it would be helpful if JQL editor would be available not only with search input appearance, but also as form field.

Hey @kazimir_io, yes this feature is supported by omitting the onSearch property and instead using onUpdate as mentioned in the README.

Oh, great!

styled-components dependency issue is also an important one for us, as it’s older version with vulnerabilities in the dependency tree

I would add to this, the repository of the JQL Editor seems to be private: Log in with Atlassian account - it is linked from the NPM page however

I want to note that styled-components dependency is blocking us from adoption of JQL editor.

@Kyle can someone address this issue?

Hey @kazimir_io we have prioritised the above issues but at this stage we have no immediate timeline for delivery. In the meantime I’d encourage people to follow the workaround @joshp has shared.

If you are referring to the styled-components dependency then it would be great if you could create a new post with the relevant details, as these issues would be addressed separately.

There has been numerous amount of threads in relation of old styled-components dependency in Atlaskit, just some of them:

Moreover, styled-components v3 (even the latest compatible version) has vulnerability in the dependency tree, which makes us vulnerable by default if we use jql-editor

@Kyle any thoughts?

Hey @kazimir_io I’ve created a ticket internally for us to explore what version/library is most appropriate for us for component styling going forward. This is a bit more involved as we depend on Atlaskit libraries internally and need to align on a consistent tech stack.

I don’t expect us to have capacity to immediately address this, but if you could raise a separate post that will help us more effectively gauge interest/impact of the issue.

@Kyle All of the Atlaskit core libraries are moved from styled-components to emotion, which should make the move more obvious.

In regards to the styled-components dependency we have published a new version of our Forge and Connect JQL editor packages migrated to Emotion JS, aligned with Atlaskit.

Please leave us feedback if you have any issues adopting the updated packages.

Hello everyone, thanks again for your patience. We’ve published an updated version of our @atlassianlabs/jql-editor-forge and @atlassianlabs/jql-editor-connect packages which should resolve the Webpack v5 compatibility issues.

1 Like

Thanks so much @Kyle - just upgraded and looks great :raised_hands:

1 Like

thanks a lot, I’m currently working on a Feature that will use the JQL Editor and can now remove the custom versions of those packages

1 Like