error: i use webpack,but see this error

[jeasoncc]

when i try import { Button } from "carbon-components-svelte/";

i see this error: ERROR in ./node_modules/carbon-components-svelte/src/ComboBox/ComboBox.svelte 1034:6 Module parse failed: Unexpected token (1034:6) File was processed with these loaders:

• ./node_modules/svelte-loader/index.js You may need an additional loader to handle the result of these loaders.	$$invalidate(1, open = false);	$$invalidate(22, inputValue = "");	> ref?.focus();	}

  @ ./node_modules/carbon-components-svelte/src/ComboBox/index.js 1:0-56 1:0-56 @ ./node_modules/carbon-components-svelte/src/index.js @ ./src/shared/Sidebar.svelte @ ./src/App.svelte @ ./src/main.js @ multi ./src/main.js

ERROR in ./node_modules/carbon-components-svelte/src/ContextMenu/ContextMenu.svelte 217:33 Module parse failed: Unexpected token (217:33) File was processed with these loaders:

• ./node_modules/svelte-loader/index.js You may need an additional loader to handle the result of these loaders. | if (target != null) { | if (Array.isArray(target)) { | > target.forEach(node => node?.removeEventListener("contextmenu", openMenu)); | } else { | target.removeEventListener("contextmenu", openMenu); @ ./node_modules/carbon-components-svelte/src/ContextMenu/index.js 1:0-62 1:0-62 @ ./node_modules/carbon-components-svelte/src/index.js @ ./src/shared/Sidebar.svelte @ ./src/App.svelte @ ./src/main.js @ multi ./src/main.js

but when i use : import Button from "carbon-components-svelte/src/Button/Button.svelte"; it works

[metonym]

What Svelte version are you using?

The optional chaining operator is supported since Svelte version 3.24.

[jeasoncc]

thank author answer my question, this is my config: "@babel/core": "^7.13.10", "@babel/preset-env": "^7.13.12", "@storybook/addon-actions": "^6.1.21", "@storybook/addon-essentials": "^6.1.21", "@storybook/addon-links": "^6.1.21", "@storybook/preset-scss": "^1.0.3", "@storybook/svelte": "^6.1.21", "@testing-library/jest-dom": "^5.11.10", "@testing-library/svelte": "^3.0.3", "@testing-library/user-event": "^12.8.3", "@types/file-saver": "^2.0.1", "@types/jest": "^26.0.22", "appwrite": "^2.0.0", "babel-jest": "^26.6.3", "babel-loader": "^8.2.2", "carbon-components-svelte": "^0.50.1", "carbon-icons-svelte": "^10.38.0", "carbon-preprocess-svelte": "^0.6.0", "cross-env": "^7.0.3", "css-loader": "^4.3.0", "date-fns": "^2.19.0", "electron": "^11.4.1", "electron-builder": "^22.13.1", "electron-winstaller": "^5.0.0", "eslint": "^7.22.0", "eslint-plugin-svelte3": "^2.7.3", "file-loader": "^6.2.0", "file-saver": "^2.0.5", "husky": "^4.3.8", "jest": "^26.6.3", "jest-transform-svelte": "^2.1.1", "license-checker": "^25.0.1", "mini-css-extract-plugin": "^0.11.3", "normalize.css": "^8.0.1", "npm-run-all": "^4.1.5", "prettier": "^2.2.1", "prettier-plugin-svelte": "^1.4.2", "sass": "^1.32.8", "sass-loader": "^10.1.1", "style-loader": "^1.3.0", "svelte": "^3.35.0", "svelte-htm": "^1.1.1", "svelte-i18n": "^3.3.7", "svelte-jester": "^1.3.2", "svelte-loader": "^3.1.2", "svelte-preprocess": "^4.6.9", "svelte-spa-router": "^3.1.0", "webpack": "^4.46.0", "webpack-cli": "^3.3.12", "webpack-dev-server": "^3.11.2", "workbox-webpack-plugin": "^5.1.4", "workbox-window": "^5.1.4"

[metonym]

According to https://github.com/sveltejs/svelte-loader/issues/137#issuecomment-706750871, it seems that webpack version 4 does not support optional chaining because it uses an older version of acorn.

The solution would be to either upgrade to webpack 5 or use package.json#resolutions to force webpack 4 to use a later version of acorn.

[jeasoncc]

i upgrade wepack4 to 5, import statement have not error,but when i use the component,it tip me: Uncaught (in promise) TypeError: parent_component is undefined

[metonym]

There's a working webpack 5 example set-up in this repo. If you're still seeing this error, please provide a minimal repro and I'd be happy to investigate.