Vue Webpack 4 build error

[hn5092]

Module parse failed: Unexpected token (110:14)
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
| static processConfig(n, e) {
| var t;

return e ?? (e = {}), e.disabled ?? (e.disabled = n.isTextInputDisabled), e.placeholder ?? (e.placeholder = {}), (t = e.placeholder).text ?? (t.text = n.textInputPlaceholderText), e;

| }
| // this is is a bug fix where if the browser is scrolled down and the user types in text that creates new line

@ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js& 1:0-19
@ ./src/App.vue?vue&type=script&lang=js&
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.1.111:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

[hn5092]

same error on sandbox

[hn5092]

[OvidijusParsiunas]

Hi @hn5092, thankyou for raising this issue! I am going to investigate this problem now and update you on the progress.

[OvidijusParsiunas]

Does this sandbox for Vue 2 work on your computer?
https://codesandbox.io/s/deep-chat-vue2-cdqpt2?file=/src/App.vue

Also, is there any chance you could send me a link to your sandbox to help my investigation. (Or dm it to me) Thanks!

[hn5092]

error again, it's my sanbox, pls help me fix it , thx https://codesandbox.io/p/sandbox/deep-chat-vue2-forked-hcpz94?file=/package.json:1,1

[hn5092]

i found it's unknow ?? token , but i can't fix it .just learned vue

[OvidijusParsiunas]

Root of the problem:
Deep Chat's code is transpiled into a JavaScript version that is newer than ES5/ES2015 as only the later versions support web components (references here and here). Hence, the issue you are having stems from the fact that Vue 2 is using Webpack 4 (by default) which can run into problems when loading JavaScript syntax newer than ES5/ES2015 (reference here).

Solution:
If you are targeting modern browsers (that support ES6/ES2016 or later) and the problem above is solely for your build step, you can use one of the two options:

• Upgrade your Webpack version to 5. Guide here.
• Dynamically download the Deep Chat module via a script. Live example here. (This involves the installation of the vue-head package, make sure to pay close attention to the code in main.js and App.vue files)

Let me know if this helps.

[hn5092]

牛逼!🐮🍺 thx!

[OvidijusParsiunas]

If you don't mind I'll be closing this issue, you can still comment below if you experience problems relating to this or create new issues for anything else, thanks!

[OvidijusParsiunas]

For future reference, you can track issues/solutions for building ES5/ES2015 JavaScript in the following issue.

[OvidijusParsiunas]

Hi, this issue seems to also affect the earlier versions of Vue 3 which also use Webpack 4.
I investigated it further and managed to transpile the component into JavaScript that uses ES5/2015.

This means that you no longer need to use the above solution and can simply import deep-chat version 1.1.21 and use it like the normal examples.