Comments (1)
`<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
`
from emoji-mart.
Related Issues (20)
- do you have a tool to create the dataset out of the official annonations?
- Optional chaining in distributed code breaks webpack 4
- A form field element has neither an id nor a name attribute
- How to disable custom emoji feature?
- How to remove the preview part? HOT 6
- onEmojiSelect is selecting native emoji but set prop is assign to "apple"
- Need some new configuration parameters HOT 1
- Add Quick Reactions Picker to `emoji-mart`
- How to reset/update or re-render Picker?
- exceptEmojis doesn't work with different instances.
- Be able to go to category even while search is active
- clicks don't work inside MUI modal dialog HOT 1
- How to integrate emoji-mart to quilljs?
- How to customize the display of title
- Incorrect types distributed for FrequentlyUsed.get
- emoji-mart not working with Tippy.js Popover
- Any plans for official Vue support?
- Make emoji component work on NextJS HOT 1
- Feature Request: Allow users to define event listeners for the search bar
- Emoji-mart not working in firefox browser when rendered inside Frame(react-frame-component)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from emoji-mart.