Cannot assign to read only property 'compressed' of object '[object Module]'

[riderx]

When build with vite and typescript in dev it work, but build in prod it show this error

[riderx]

let emojiIndex = new EmojiIndex(JSON.parse(JSON.stringify(dataEmoji))); temporary fix the issue

[serebrov]

@riderx Thanks for the report and the workaround, but I need some demo code to reproduce the issue.

Is your project open source (could you send a link in that case)? If not, it would be good to have some demo project where this issue is reproduced.

[riderx]

@serebrov here you go, the exemple fail but if you uncomment the second line it work
https://stackblitz.com/edit/vue3-ts?devtoolsheight=33&file=src/App.vue

[serebrov]

@riderx Looks like something goes wrong with the json import in this setup.

The imported json ends up being Module and not an Object:

console.log(dataEmoji)
> Module
> aliases: (...)
> categories: (...)
> compressed: true
> default: (...)
> emojis: (...)
> __esModule: true
> ...

console.log(JSON.parse(JSON.stringify(dataEmoji)))
> App.vue?037b:8 Object
> Object
> aliases: {raised_hand: 'hand', satisfied: 'laughing', …}
> categories: (9) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
> compressed: true
> ...

I do not see why exactly it does not work - vue cli (and webpack) should be able to handle this by default.

The other fix I found is to use require instead of import:

/* import * as dataEmoji from 'emoji-mart-vue-fast/data/twitter.json' */

/* eslint-disable @typescript-eslint/no-var-requires */
const dataEmoji = require('emoji-mart-vue-fast/data/twitter.json')