Can not use @atlaskit/jql-editor with React@18.2?

Forge
1

frontend/index.jsx

import { invoke } from "@forge/bridge";
import {useAutocompleteProvider} from "@atlaskit/jql-editor-autocomplete-rest"
import { JQLEditorAsync as JQLEditor } from "@atlaskit/jql-editor";

dependencies:

"dependencies": {
    "@atlaskit/jql-editor-common": "^2.2.0",
    "@forge/bridge": "4.3.0",
    "@forge/react": "10.10.3",
    "@forge/resolver": "1.6.5-next.0",
    "react": "~18.2.0",
    "react-dom": "~18.2.0"


"devDependencies": {
    "eslint": "^8.56.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "css-loader": "^6.8.1",
    "style-loader": "^3.3.3"
  },
  "dependencies": {
    "@atlaskit/jql-editor-common": "^2.2.0",
    "@atlaskit/jql-editor": "^4.15.0",
    "@forge/bridge": "4.3.0",
    "@forge/react": "10.10.3",
    "@forge/resolver": "1.6.5-next.0",
    "react": "~18.2.0",
    "react-dom": "~18.2.0"
  },
  "resolutions": {
    "react": "~18.2.0",
    "react-dom": "~18.2.0",
    "@atlaskit/**/react": "~18.2.0",
    "@atlaskit/**/react-dom": "~18.2.0",
    "@atlaskit/ds-lib": "^3.5.0",
    "@atlaskit/platform-feature-flags": "^1.0.0"
  }
}

Error: lots kind of errors
ERROR in ./node_modules/@atlaskit/tooltip/dist/esm/tooltip-container.compiled.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack

._11c8qk37{font:var(–ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,“Segoe UI”,Ubuntu,system-ui,“Helvetica Neue”,sans-serif)}
| ._2rko1sit{border-radius:var(–ds-border-radius,3px)}
| ._152tze3t{inset-block-start:var(–ds-space-0,0)}

2

Error: Bundling failed: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack

._1pfhu2gc{margin-block-start:var(–ds-space-100,8px)}, Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack
._1pfhu2gc{margin-block-start:var(–ds-space-100,8px)}, Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack
._1bah1y6m{justify-content:flex-start}
| ._1bahesu3{justify-content:flex-end}
| ._1e0c1txw{display:flex}, Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack
._1pfhu2gc{margin-block-start:var(–ds-space-100,8px)}
| ._1ul91osq{min-width:100%}, Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack
._1pfh1ejb{margin-block-start:var(–ds-space-300,24px)}
| ._1pfhu2gc{margin-block-start:var(–ds-space-100,8px)}, Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack
._11c8qk37{font:var(–ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,“Segoe UI”,Ubuntu,system-ui,“Helvetica Neue”,sans-serif)}
| ._1e0c1o8l{display:inline-block}
| ._1pfhze3t{margin-block-start:var(–ds-space-0,0)}, Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack
._11c8qk37{font:var(–ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,“Segoe UI”,Ubuntu,system-ui,“Helvetica Neue”,sans-serif)}
| ._zulp12x7{gap:var(–ds-space-075,6px)}
| ._1bah1q9y{justify-content:baseline}, Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack
._bozgv77o{padding-inline-start:var(–ds-space-025,2px)}
| ._ect41sbm{font-family:var(–ds-font-family-body,ui-sans-serif,-apple-system,BlinkMacSystemFont,“Segoe UI”,Ubuntu,system-ui,“Helvetica Neue”,sans-serif)}
| ._syaz1ick{color:var(–ds-text-danger,#de350b)}, Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack
._11c813hg{font:var(–ds-font-heading-xxlarge,normal 500 35px/40px ui-sans-serif,-apple-system,BlinkMacSystemFont,“Segoe UI”,Ubuntu,system-ui,“Helvetica Neue”,sans-serif)}
| ._11c816g6{font:var(–ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,“Segoe UI”,Ubuntu,system-ui,“Helvetica Neue”,sans-serif)}
| ._11c81bk4{font:var(–ds-font-heading-small,normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,“Segoe UI”,Ubuntu,system-ui,“Helvetica Neue”,sans-serif)}, Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack
._1hms8stv{text-decoration-line:underline}
| ._4bfu18uv{text-decoration-color:initial}
| ._ajmmnqa1{text-decoration-style:solid}, Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack
._195g1e8l{margin-inline:var(–ds-space-negative-200,-1rem)}
| ._195g4pxn{margin-inline:var(–ds-space-negative-025,-.125rem)}
| ._195ggp71{margin-inline:var(–ds-space-negative-050,-.25rem)}, Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack
._19itglyw{border:none}
| ._1q1l108i{–ds-elevation-surface-current:var(–ds-surface-hovered,#f1f2f4)}
| ._1q1l16qz{–ds-elevation-surface-current:var(–ds-surface-overlay-hovered,#f1f2f4)}, Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack
._1bah1b1v{justify-content:space-around}
| ._1bah1fhb{justify-content:stretch}
| ._1bah1h6o{justify-content:center}, Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack
._128m1bk5:focus-visible{outline-width:var(–ds-border-width-outline,2px)}
| ._1ah3115h:focus-visible{outline-offset:var(–_1203r2w)}
| ._1ah31bk5:focus-visible{outline-offset:var(–ds-border-width-outline,2px)}, Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack
._1bah1b1v{justify-content:space-around}
| ._1bah1fhb{justify-content:stretch}
| ._1bah1h6o{justify-content:center}, Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack
|
._195g1i6y{margin-inline:var(–ds-space-negative-025,-2px)}
| ._1mouze3t{margin-block:var(–ds-space-0,0)}._16jlidpf{flex-grow:0}
| ._16jlkb7n{flex-grow:1}, Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack
._19itglyw{border:none}
| ._80om13gf{cursor:not-allowed}
| ._80omtlke{cursor:pointer}, Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack
._16jlidpf{flex-grow:0}
| ._16jlkb7n{flex-grow:1}
| ._1bsb1osq{width:100%}, Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack
._11c81doa{font:var(–ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,“Segoe UI”,Ubuntu,system-ui,“Helvetica Neue”,sans-serif)}
| ._11c81oud{font:var(–ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,“Segoe UI”,Ubuntu,system-ui,“Helvetica Neue”,sans-serif)}
| ._11c81vlj{font:var(–ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,“Segoe UI”,Ubuntu,system-ui,“Helvetica Neue”,sans-serif)}, Module parse failed: Unexpected character ‘@’ (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack
|
@media (min-width:30rem){._114bglyw{display:none}}
| @media not all and (min-width:30rem){._1m0aglyw{display:none}}
| @media (min-width:48rem){._181nglyw{display:none}}, Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack
._1e0cglyw{display:none}
| @media (min-width:30rem){._114b19ly{display:revert}}
| @media not all and (min-width:30rem){._1m0a19ly{display:revert}}, Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack
|
._y44v1a7z{animation:k17lnbbx 1s ease-in-out}
| ._y44v1ozz{animation:kztt5h0 .86s infinite}._134c892t{stroke-linecap:round}
| ._1e0c116y{display:inline-flex}, Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack
._11c8qk37{font:var(–ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,“Segoe UI”,Ubuntu,system-ui,“Helvetica Neue”,sans-serif)}
| ._2rko1sit{border-radius:var(–ds-border-radius,3px)}
| ._152tze3t{inset-block-start:var(–ds-space-0,0)}