Optional Chaining Error

Gravatar

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

User profile image

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

Gravatar

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?http://192.168.0.159:3000/sockjs-node (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?http://192.168.0.159:3000/sockjs-node (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

Gravatar

My Node.js version is v14.17.0.

Gravatar

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

Gravatar

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.