Vue3, ts, babel: it won't compile on import GlitchedWriter from 'vue-glitched-writer'

[tinadanweb]

ERROR Failed to compile with 1 error 17:16:10

`` error in ./node_modules/vue-glitched-writer/dist/vue-glitched-writer.esm.js

Module parse failed: Unexpected token (1429:37) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | element = ref(null), | preset = computed( // @ts-ignore

() => cjs.presets[props.preset] ?? {}),

| writeOnAppear = attrs.appear !== undefined || typeof props.text === 'object' && props.text.length > 0, | queueInterval = computed(() => {

@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/views/Earlyaccess.vue?vue&type=script&lang=js 1:0-49 @ ./src/views/Earlyaccess.vue?vue&type=script&lang=js @ ./src/views/Earlyaccess.vue @ ./src/router/index.ts @ ./src/main.ts @ multi (webpack)-dev-server/client?http://192.168.0.100:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

No issues found. ``

[thetarnav]

I've tried to do something with that, but I had no luck yet. It has to be an issue with my build tools since the component itself is working fine. I will try some more tomorrow, but for now, if you really want to use this component, you can just grab the component's code from the repo and use it in your project.

Here is the component's source code, just change 'vue-demi' to 'vue', and install glitched-writer via npm i glitched-writer (although you probably already have it installed).

And this is the "escapeHtml" function that is imported in the component:

function escapeHtml(html: string) {
    var text = document.createTextNode(html)
    var p = document.createElement('p')
    p.appendChild(text)
    return p.innerHTML
}

With all that, the component should be up and running. Sorry for the inconvenience, but I relly on some template to build this component and have little knowledge about bundlers.

[outtii]

Hi thetarnav,

First, thanks for your amazing work.

I think I am experimenting the same problem :

 error  in ./node_modules/vue-glitched-writer/dist/vue-glitched-writer.esm.js

Module parse failed: Unexpected token (1429:37)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|           element = ref(null),
|           preset = computed( // @ts-ignore
>     () => cjs.presets[props.preset] ?? {}),
|           writeOnAppear = attrs.appear !== undefined || typeof props.text === 'object' && props.text.length > 0,
|           queueInterval = computed(() => {

Did you already have the opportunity to fix this issue ?

Have a nice day,

[thetarnav]

Thanks for reminding me to take care of this :) I tried a different building solution, basically scrapping the whole SFC idea since it requires knowing more about build tools to be able to solve issues. Instead, now I'm relying on existing tools for building typescript. The new version is published under the beta tag: vue-glitched-writer@beta Let me know if it helps!