I’m creating an app for Jira with JQL to filter issues, there’s a component from @atlaskit : jql-editor, just copy and paste the example code into my project, but fails to build, here’s the console errors:
✕ Building and uploading your app...
ℹ Packaging app files
Error: Bundling failed: 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 https://webpack.js.org/concepts#loaders
|
> ._14mj1crf:after{border-radius:9pt}
| ._14mj1l7b:after{border-radius:3px}
| ._14mj1q5u:after{border-radius:var(--ds-border-radius-circle,50%)}, 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 https://webpack.js.org/concepts#loaders
|
> ._2rko1l7b{border-radius:3px}
| ._189e1bk5{border-width:var(--ds-border-width-outline,2px)}
| ._1dqonqa1{border-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 https://webpack.js.org/concepts#loaders
> ._12ji1r31{outline-color:currentColor}
| ._12y3idpf{outline-width:0}
| ._1e0c1o8l{display:inline-block}, 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 https://webpack.js.org/concepts#loaders
|
> ._2rko1l7b{border-radius:3px}
| ._2rko1q5u{border-radius:var(--ds-border-radius-circle,50%)}
| ._2rkob7nn{border-radius:var(--ds-border-radius-300,9pt)}, 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 https://webpack.js.org/concepts#loaders
|
> ._2rko1q5u{border-radius:var(--ds-border-radius-circle,50%)}._189e1bk5{border-width:var(--ds-border-width-outline,2px)}
| ._1dqonqa1{border-style:solid}
| ._1h6d1bhr{border-color:var(--ds-surface-overlay,#fff)}, 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 https://webpack.js.org/concepts#loaders
> ._1bsb1crf{width:9pt}
| ._1bsbdlk8{width:14px}
| ._1bsbf6fq{width:18px}, 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 https://webpack.js.org/concepts#loaders
|
> ._2rko1l7b{border-radius:3px}
| ._2rko1q5u{border-radius:var(--ds-border-radius-circle,50%)}
| ._2rkob7nn{border-radius:var(--ds-border-radius-300,9pt)}, 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 https://webpack.js.org/concepts#loaders
> ._154i1v6z{top:7px}
| ._154iidpf{top:0}
| ._154it94y{top:1px}, 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 https://webpack.js.org/concepts#loaders
|
> ._2rko1sit{border-radius:var(--ds-border-radius,3px)}
| ._195g1h5n{margin-inline:-.03125rem}
| ._195g1n1a{margin-inline:-1px}, 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 https://webpack.js.org/concepts#loaders
|
> ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
| ._14mj1kw7:after{border-radius:inherit}
| ._2rkosqtm{border-radius:var(--ds-border-radius-100,3px)}, 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 https://webpack.js.org/concepts#loaders
|
> ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
| ._14mj1kw7:after{border-radius:inherit}
| ._2rko14q2{border-radius:var(--ds-border-radius-circle,2002pc)}, 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 https://webpack.js.org/concepts#loaders
|
> ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
| ._14mj1kw7:after{border-radius:inherit}
| ._2rko14q2{border-radius:var(--ds-border-radius-circle,2002pc)}, 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 https://webpack.js.org/concepts#loaders
|
> ._v564g17y{transition:opacity .3s}._16jlidpf{flex-grow:0}
| ._16jlkb7n{flex-grow:1}
| ._18m915vq{overflow-y:hidden}, 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 https://webpack.js.org/concepts#loaders
> ._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 https://webpack.js.org/concepts#loaders
> ._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 https://webpack.js.org/concepts#loaders
> ._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 https://webpack.js.org/concepts#loaders
> ._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 https://webpack.js.org/concepts#loaders
> ._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 https://webpack.js.org/concepts#loaders
> ._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"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 https://webpack.js.org/concepts#loaders
> ._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"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 https://webpack.js.org/concepts#loaders
> ._bozgv77o{padding-inline-start:var(--ds-space-025,2px)}
| ._ect41gqc{font-family:var(--ds-font-family-body,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"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 https://webpack.js.org/concepts#loaders
> ._11c8140y{font:var(--ds-font-heading-xsmall,normal 600 14px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
| ._11c81c04{font:var(--ds-font-heading-xlarge,normal 600 29px/2pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
| ._11c81vhk{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"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 https://webpack.js.org/concepts#loaders
> ._18m915vq{overflow-y:hidden}
| ._1bsb1ejb{width:var(--ds-space-300,24px)}
| ._1bsb1kw7{width:inherit}, 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 https://webpack.js.org/concepts#loaders
|
> ._2rko14q2{border-radius:var(--ds-border-radius-circle,2002pc)}
| ._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}._1bah1h6o{justify-content:center}
| ._1bsb1tcg{width:24px}, 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 https://webpack.js.org/concepts#loaders
> ._17jb1osq >svg{max-height:100%}
| ._1bsb1tcg{width:24px}
| ._1bsb7vkz{width:1pc}, 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 https://webpack.js.org/concepts#loaders
|
> ._2rko1q5u{border-radius:var(--ds-border-radius-circle,50%)}._1bsb1tcg{width:24px}
| ._1bsb7vkz{width:1pc}
| ._1bsbckbl{width:3pc}, 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 https://webpack.js.org/concepts#loaders
> ._18m915vq{overflow-y:hidden}
| ._1bsb1tcg{width:24px}
| ._1bsb7vkz{width:1pc}, 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 https://webpack.js.org/concepts#loaders
|
> ._152ttb3r{inset-block-start:.11em}
| ._1bsbgm0b{width:.9em}
| ._1e0c1nu9{display:inline}, 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 https://webpack.js.org/concepts#loaders
> ._1o51eoah{animation-fill-mode:backwards}
| ._1o51q7pw{animation-fill-mode:forwards}
| ._1pgl1fu8{animation-timing-function:cubic-bezier(.15,1,.3,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 https://webpack.js.org/concepts#loaders
> ._1hms8stv{text-decoration-line:underline}
| ._4bfu1r31{text-decoration-color:currentColor}
| ._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 https://webpack.js.org/concepts#loaders
> ._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 https://webpack.js.org/concepts#loaders
> ._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 https://webpack.js.org/concepts#loaders
> ._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 https://webpack.js.org/concepts#loaders
> ._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 https://webpack.js.org/concepts#loaders
> ._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 https://webpack.js.org/concepts#loaders
|
> ._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 https://webpack.js.org/concepts#loaders
> ._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 https://webpack.js.org/concepts#loaders
> ._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 https://webpack.js.org/concepts#loaders
> ._11c81ixg{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
| ._11c81o8v{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
| ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"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 https://webpack.js.org/concepts#loaders
|
> @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 https://webpack.js.org/concepts#loaders
> ._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 (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> ._134c892t{stroke-linecap:round}
| ._1e0c116y{display:inline-flex}
| ._1o51q7pw{animation-fill-mode:forwards}, 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 https://webpack.js.org/concepts#loaders
> ._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
| ._2rko1sit{border-radius:var(--ds-border-radius,3px)}
| ._152tze3t{inset-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 https://webpack.js.org/concepts#loaders
> ._80om73ad{cursor:default}, 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 https://webpack.js.org/concepts#loaders
|
> ._19itidpf{border:0}._18m915vq{overflow-y:hidden}
| ._19bvidpf{padding-left:0}
| ._1bsbt94y{width:1px}
I’ve tried npm, yarn, pnpm, neither works at all, always the same errors and don’t know how to solve it 
here’s my package.json
{
"name": "jira-global-page-ui-kit",
"version": "1.1.11",
"main": "index.js",
"license": "MIT",
"private": true,
"scripts": {
"lint": "eslint src/**/*"
},
"devDependencies": {
"eslint": "^8.56.0",
"eslint-plugin-react-hooks": "^4.6.0"
},
"dependencies": {
"@atlaskit/jql-editor": "^5.3.2",
"@atlaskit/jql-editor-autocomplete-rest": "^3.0.0",
"@atlaskit/tokens": "^5.1.0",
"@emotion/styled": "^11.14.0",
"@forge/bridge": "4.5.2",
"@forge/react": "11.2.1",
"@forge/resolver": "1.6.10",
"react": "^18",
"react-dom": "^18",
"styled-components": "^6.1.19"
}
}
and I have studied the example code from Examples – Atlaskit