Using @atlaskit/jql-edior in Vite project

Atlassian Ecosystem Design
1

Hi everyone,

I’m using @atlaskit/jql-editor in my Vite project, which currently has improper behaviors:

  • When i hover on JQLEditor’s buttons (expand, help, search): It doesn’t show tooltip.
  • When i hover on a JQLEditor’s button, then hover another JQLEditor’s button: Below error occurs

Image:
image

image
image1064×818 148 KB

I know the cause is Vite optimization since I used JQLEditor in a newly-created normal React project and it worked fine. So I exclude the @atlaskit/jql-edior from Vite optimization by updating the vite.config.ts:

import { defineConfig } from 'vite';

export default () => {
  return defineConfig({
    // ... other configs

    define: {
      'process.env': {},
    },
    optimizeDeps: {
      exclude: ['@supabase/sql-to-rest', '@atlaskit/jql-editor'],
      // exclude: ['@supabase/sql-to-rest', '@atlaskit/jql-editor', '@atlaskit/jql-editor-autocomplete-rest'],
    },
  });
};

When starting project there’s no error, but it gives errors when I open project in browser:

  • In browser:

SyntaxError: The requested module ‘/@fs/Users/kitemetric/Documents/github/solomon-v2/node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js?v=dd363710’ does not provide an export named ‘default’

image
image992×144 30.7 KB

  • In terminal:

Sourcemap for “my-project/node_modules/@atlaskit/analytics-next-stable-react-context/dist/esm/index.js” points to missing source files
Sourcemap for “my-project/node_modules/@atlaskit/analytics-next-stable-react-context/dist/esm/context.js” points to missing source files

Simplified code: create new Vite React project and use below component

import { useCallback, useState } from "react";
import { JQLEditorAsync as JQLEditor } from "@atlaskit/jql-editor";
import { useAutocompleteProvider } from "@atlaskit/jql-editor-autocomplete-rest";

const getInitialData = async (url: string) => {
  return {
    jqlFields: [
      {
        value: `"user"`,
        displayName: "User",
        searchable: "true",
        orderable: "true",
        auto: "true",
        operators: ["=", "!=", "in"],
        types: ["com.atlassian.jira.user.ApplicationUser"],
      },
    ],
    jqlFunctions: [],
  };
};

const getSuggestions = async (url: string) => {
  return {
    results: [
      {
        value: `user1`,
        displayName: `User1`,
      },
      {
        value: `user2`,
        displayName: `User2`,
      },
      {
        value: `user3`,
        displayName: `User3`,
      },
    ],
  };
};

const MyJQLEditor = () => {
  const autocompleteProvider = useAutocompleteProvider(
    "my-app",
    getInitialData,
    getSuggestions
  );

  const [query, setQuery] = useState<string>(`"user" in (user1, user2, user3)`);

  const onUpdate = useCallback((jql: string) => {
    setQuery(jql);
  }, []);

  const onSearch = useCallback((jql: string) => {
    // Do some action on search
  }, []);

  return (
      <JQLEditor
        analyticsSource={"my-app"}
        query={query}
        onUpdate={onUpdate}
        onSearch={onSearch}
        autocompleteProvider={autocompleteProvider}
        locale={"en"}
      />
  );
};

export default MyJQLEditor;

Dependencies:

  "dependencies": {
    "@atlaskit/jql-editor": "^4.7.0",
    "@atlaskit/jql-editor-autocomplete-rest": "^2.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
  },

Does anyone use @atlaskit/jql-editor in a Vite project before? How can I solve this problem? or can @atlaskit/jql-editor support Vite?

Thank you so much

[UPDATE] My current solution: using CSS to hide the search and help button in JQLEditor, just show only the Expand button