0

After failing to implement svelte kit with carbon components myself, I copied the example from the project github examples folder. Now importing base carbon components works, but they are not interactive. For example the DatePicker widget should display calendar widget after being clicked and it simply does not in my app.

After failing to implement svelte kit with carbon components myself, I copied the example from the project github examples folder

+page.svelte:

<script>
    import DatePicker from "carbon-components-svelte/src/DatePicker/DatePicker.svelte";
    import DatePickerInput from "carbon-components-svelte/src/DatePicker/DatePickerInput.svelte";
</script>
<DatePicker datePickerType="single" on:change>
    <DatePickerInput labelText="Meeting date" placeholder="mm/dd/yyyy" />
</DatePicker>

first picture is current state on my local machine, when the widget is being clicked, nothing happnes second picture shows desired behaviour

Current state on my machine

Desired behaviour

Jan Cahlík
  • 91
  • 6
  • Please show your code. Refer to [the guide on how to create a minimal, reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) on how to ask good questions. – cSharp Mar 10 '23 at 07:08
  • Hi the code is same as here: https://github.com/carbon-design-system/carbon-components-svelte/tree/master/examples/sveltekit Thank you, I edited the question – Jan Cahlík Mar 10 '23 at 08:03

1 Answers1

1

[SOLVED]

I simply updated all my dependencies to latest version by specifying each dependency version like this "*" and then ran:

npm update --save

this is how my package.json looks like currently:

{
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "@sveltejs/kit": "^1.11.0",
    "carbon-components-svelte": "^0.73.2",
    "carbon-pictograms-svelte": "^12.3.0",
    "carbon-preprocess-svelte": "^0.9.1",
    "svelte": "^3.56.0",
    "vite": "^4.1.4"
  }
}
Jan Cahlík
  • 91
  • 6