🚀 Generate full stack React, Vue, Angular applications easily with our new Web Application Generator! 🚀

Optional Chaining Error


Support for the experimental syntax 'optionalChaining' isn't currently enabled (87:42):

I tried installing @babel/plugin-proposal-optional-chaining. Still having the same error


Hi! Could you provide more information? When does this error occur? Do you have any logs?


It happens when I freshly unzipped the file, yarn install it, and yarn start. Tried reinstalling the optional chaining plugin still same.

ERROR Failed to compile with 2 errors 9:10:13 AM error in ./src/pages/Chat/components/Avatar/Avatar.vue?vue&type=script&lang=js&

Syntax Error: SyntaxError: C:\Users\Kahhou_Lau\MCUC-Vue\src\pages\Chat\components\Avatar\Avatar.vue: Support for the experimental syntax 'optionalChaining' isn't currently enabled (30:23):

28 | computed: { 29 | initials() {

30 | return this.user?.name?.charAt(0).toUpperCase() + this.user?.surname?.charAt(0).toUpperCase(); | ^ 31 | } 32 | } 33 | }

Add @babel/plugin-proposal-optional-chaining (https://git.io/vb4Sk) to the 'plugins' section of your Babel config to enable transformation.

@ ./src/pages/Chat/components/Avatar/Avatar.vue?vue&type=script&lang=js& 1:0-311 1:327-330 1:332-640 1:332-640 @ ./src/pages/Chat/components/Avatar/Avatar.vue @ ./nodemodules/cache-loader/dist/cjs.js??ref--12-0!./nodemodules/babel-loader/lib!./nodemodules/cache-loader/dist/cjs.js??ref--0-0!./nodemodules/vue-loader/lib??vue-loader-options!./src/pages/Chat/components/ChatInfo/ChatInfo.vue?vue&type=script&lang=js& @ ./src/pages/Chat/components/ChatInfo/ChatInfo.vue?vue&type=script&lang=js& @ ./src/pages/Chat/components/ChatInfo/ChatInfo.vue @ ./nodemodules/cache-loader/dist/cjs.js??ref--12-0!./nodemodules/babel-loader/lib!./nodemodules/cache-loader/dist/cjs.js??ref--0-0!./nodemodules/vue-loader/lib??vue-loader-options!./src/pages/Chat/Chat.vue?vue&type=script&lang=js& @ ./src/pages/Chat/Chat.vue?vue&type=script&lang=js& @ ./src/pages/Chat/Chat.vue @ ./src/Routes.js @ ./src/main.js @ multi (webpack)-dev-server/client? (webpack)/hot/dev-server.js ./src/main.js

error in ./src/pages/Chat/components/ChatList/ChatList.vue?vue&type=script&lang=js&

Syntax Error: SyntaxError: C:\Users\Kahhou_Lau\MCUC-Vue\src\pages\Chat\components\ChatList\ChatList.vue: Support for the experimental syntax 'optionalChaining' isn't currently enabled (87:42):

85 | } 86 | });

87 | let lastMessage = chat.messages?.[chat.messages.length - 1] || {}; | ^ 88 | lastMessage.owner = lastMessage.userId === this.user.id; 89 | return { 90 | id: chat.id,

Add @babel/plugin-proposal-optional-chaining (https://git.io/vb4Sk) to the 'plugins' section of your Babel config to enable transformation.

@ ./src/pages/Chat/components/ChatList/ChatList.vue?vue&type=script&lang=js& 1:0-313 1:329-332 1:334-644 1:334-644 @ ./src/pages/Chat/components/ChatList/ChatList.vue @ ./nodemodules/cache-loader/dist/cjs.js??ref--12-0!./nodemodules/babel-loader/lib!./nodemodules/cache-loader/dist/cjs.js??ref--0-0!./nodemodules/vue-loader/lib??vue-loader-options!./src/pages/Chat/Chat.vue?vue&type=script&lang=js& @ ./src/pages/Chat/Chat.vue?vue&type=script&lang=js& @ ./src/pages/Chat/Chat.vue @ ./src/Routes.js @ ./src/main.js @ multi (webpack)-dev-server/client? (webpack)/hot/dev-server.js ./src/main.js

User profile image

Can you tell me what version of node js you have? The problem may be with a version lower than 12. And please see this answer on stackoverflow.com: https://stackoverflow.com/a/61857119, perhaps this will help


My Node.js version is v14.17.0.


Hi, it still doesn't solve my problem. Can you help me on that please. Thank you


Also is it possible to convert this project into NUXT project configuration?

User profile image

We have tried to reproduce this error on different systems and different software versions, but all without success.

Maybe you can give us access to your code so we can try to run it on our system? Well, or you could substitute optional chaining, for example:

return moment(this.chat.lastMessage?.timestamp).format('D MMM') || "";

replace by

return moment(this.chat.lastMessage && this.chat.lastMessage.timestamp).format('D MMM') || "";

And yes, you can transform the project into NUXT, but it takes a lot of effort.

Cookie Consent

By continuing to browse or by clicking 'OK', you agree to the storing of cookies on your device to enhance your site experience and for analytical purposes. To learn more about how we use cookies, please see our cookies policy.