# Using @atlaskit/jql-edior in Vite project

**URL:** <https://community.developer.atlassian.com/t/using-atlaskit-jql-edior-in-vite-project/83296>\
**Category:** Atlassian Ecosystem Design\
**Tags:** jql-editor\
**Created:** [September 8, 2024, 10:18pm UTC](https://community.developer.atlassian.com/t/using-atlaskit-jql-edior-in-vite-project/83296 "2024-09-08T22:18:43Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![NgocDuLe](https://avatars.discourse-cdn.com/v4/letter/n/d6d6ee/32.png) [@NgocDuLe](https://community.developer.atlassian.com/u/NgocDuLe)\
**Post date:** [September 8, 2024, 10:18pm UTC](https://community.developer.atlassian.com/t/using-atlaskit-jql-edior-in-vite-project/83296/1 "2024-09-08T22:18:43Z")

</div>

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](https://global.discourse-cdn.com/atlassiandeveloper/original/3X/e/8/e8415da5c7412fe7b8178e60a34dc13f0c2a2f75.png)  
 ![image](https://global.discourse-cdn.com/atlassiandeveloper/original/3X/e/1/e115b79d81dd3d29365c88caac564a5ec00b568d.png)

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:

```auto
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](https://global.discourse-cdn.com/atlassiandeveloper/original/3X/0/a/0a569790e7a628b9ca0112df50541974dc220aee.png)

- 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

```TS
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:

```auto
  "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 1] My current solution:** using CSS to hide the search and help button in JQLEditor, just show only the Expand button  
**[UPDATE 2]** These buttons work normally on production. The error just happens in local development due to Vite Optimization

---

<div class="post-metadata">

**Author:** ![kchatzik.ibv](https://avatars.discourse-cdn.com/v4/letter/k/f07891/32.png) [@kchatzik.ibv](https://community.developer.atlassian.com/u/kchatzik.ibv)\
**Post date:** [November 25, 2025, 1:36pm UTC](https://community.developer.atlassian.com/t/using-atlaskit-jql-edior-in-vite-project/83296/2 "2025-11-25T13:36:35Z")

</div>

For anyone still experiencing this issue, it seems like `@atlaskit/jql-editor` is not compatible with React’s `<StrictMode />`, causing it to render the text input twice.

Removing `<StrictMode />` should fix the issue for this component when running locally.

See [RFC-78: Dropping support for React 16 and rendering in a React 18 concurrent root in Jira and Confluence - #22 by KylorHall](https://community.developer.atlassian.com/t/rfc-78-dropping-support-for-react-16-and-rendering-in-a-react-18-concurrent-root-in-jira-and-confluence/87026/22)