Svelte Integration

[halafi]

Svelte Integration

[Tenuka22]

`<script lang="ts">
import data from '@emoji-mart/data';
import { Picker } from 'emoji-mart';
import { onMount, createEventDispatcher, onDestroy } from 'svelte';

let emojiPickerEl: HTMLElement | null = null;
let picker: any;
let mounted = false;

const dispatch = createEventDispatcher();

onMount(() => {
	if (emojiPickerEl) {
		picker = new Picker({ data });
		emojiPickerEl.appendChild(picker);
		setTimeout(() => {
			mounted = true;
		}, 1);
	}
});

onDestroy(() => {
	picker = null;
	emojiPickerEl = null;
});

</script>`

I've created the component but this gives a ton of errors

`[{
"resource": "/e:/PROJECTS/nemori/src/lib/components/emoji-mart.svelte",
"owner": "generated_diagnostic_collection_name#1",
"code": "a11y-click-events-have-key-events",
"severity": 4,
"message": "A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as <button type="button"> or might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details.",
"source": "svelte",
"startLineNumber": 28,
"startColumn": 1,
"endLineNumber": 34,
"endColumn": 3
}]
11:39:39 AM [vite-plugin-svelte] E:/PROJECTS/nemori/src/lib/components/emoji-mart.svelte:23:0 A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as or might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details.
11:39:47 AM [vite] Error when evaluating SSR module /src/lib/components/emoji-mart.svelte: failed to import "emoji-mart"
|- SyntaxError: [vite] Named export 'Picker' not found. The requested module 'emoji-mart' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'emoji-mart';
const {Picker} = pkg;

at analyzeImportedModDifference (file:///E:/PROJECTS/nemori/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:51938:15)      
at nodeImport (file:///E:/PROJECTS/nemori/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:52946:5)
at async ssrImport (file:///E:/PROJECTS/nemori/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:52800:16)
at async eval (E:/PROJECTS/nemori/src/lib/components/emoji-mart.svelte:5:31)
at async instantiateModule (file:///E:/PROJECTS/nemori/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:52858:5)

11:39:47 AM [vite] Error when evaluating SSR module /src/routes/(root)/_components/announcement-manage-form.svelte: failed to import "emoji-mart"
|- SyntaxError: [vite] Named export 'Picker' not found. The requested module 'emoji-mart' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'emoji-mart';
const {Picker} = pkg;

at analyzeImportedModDifference (file:///E:/PROJECTS/nemori/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:51938:15)      
at nodeImport (file:///E:/PROJECTS/nemori/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:52946:5)
at async ssrImport (file:///E:/PROJECTS/nemori/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:52800:16)
at async eval (E:/PROJECTS/nemori/src/lib/components/emoji-mart.svelte:5:31)
at async instantiateModule (file:///E:/PROJECTS/nemori/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:52858:5)

11:39:47 AM [vite] Error when evaluating SSR module /src/routes/(root)/calendar/create/announcement/+page.svelte: failed to import "emoji-mart"
|- SyntaxError: [vite] Named export 'Picker' not found. The requested module 'emoji-mart' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'emoji-mart';
const {Picker} = pkg;

at analyzeImportedModDifference (file:///E:/PROJECTS/nemori/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:51938:15)      
at nodeImport (file:///E:/PROJECTS/nemori/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:52946:5)
at async ssrImport (file:///E:/PROJECTS/nemori/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:52800:16)
at async eval (E:/PROJECTS/nemori/src/lib/components/emoji-mart.svelte:5:31)
at async instantiateModule (file:///E:/PROJECTS/nemori/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:52858:5)

SyntaxError: [vite] Named export 'Picker' not found. The requested module 'emoji-mart' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'emoji-mart';
const {Picker} = pkg;

at analyzeImportedModDifference (file:///E:/PROJECTS/nemori/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:51938:15)      
at nodeImport (file:///E:/PROJECTS/nemori/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:52946:5)
at async ssrImport (file:///E:/PROJECTS/nemori/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:52800:16)
at async eval (E:/PROJECTS/nemori/src/lib/components/emoji-mart.svelte:5:31)
at async instantiateModule (file:///E:/PROJECTS/nemori/node_modules/vite/dist/node/chunks/dep-Cy9twKMn.js:52858:5)

11:39:51 AM [vite] ✨ new dependencies optimized: devalue
11:39:51 AM [vite] ✨ optimized dependencies changed. reloading
11:40:17 AM [vite] ✨ new dependencies optimized: lucide-svelte
11:40:17 AM [vite] ✨ optimized dependencies changed. reloading
prerun(C-node) worker= false
Running in main thread, faking onCustomMessage
`