error in ./node_modules/@formkit/themes/dist/index.mjs

[KashifCh-eth]

Hi There.

I have installed formkit last year in vue.js web application. and its working profectly. but last month i have format window and installed again. but now that web application give me an error. when i trying to compile in my machine. i have tried many ways. but facing same error

Error:

`

ERROR Failed to compile with 2 errors
error in ./node_modules/@formkit/themes/dist/index.mjs

Module parse failed: Unexpected token (63:55)
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
| Object.assign(iconRegistry, icons);
| }

if (isClient && !themeWasRequested && documentStyles?.getPropertyValue("--formkit-theme")) {
| themeDidLoad();
| themeWasRequested = true;

@ ./src/main.js 8:0-25
@ multi (webpack)-dev-server/client?http://localhost:8085&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

error in ./node_modules/@formkit/vue/dist/index.cjs

Module parse failed: Unexpected token (72:41)
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
| const isRequired = vue.ref(false);
| const checkForRequired = (parsedRules) => {

    isRequired.value = (parsedRules ?? []).some(

| (rule) => rule.name === "required"
| );

@ ./src/main.js 7:0-53 24:8-14 24:16-29
@ multi (webpack)-dev-server/client?http://localhost:8085&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js`_

and i have checked my main.js file. its same like previous one. but not im an error

my main.js file

`
import {createApp} from 'vue';
import App from './App.vue';
import router from './router';
import store from "./store";
import Axios from 'axios';
import { openDB } from 'idb';
import { plugin, defaultConfig } from '@formkit/vue'
import '@formkit/themes'
import helper from '@/assets/js/helper.js';

const config = require('./config.js');

const idbPromise = openDB('pkichain-user-store', 1, {
upgrade(db) {
db.createObjectStore('user-wallet');
db.createObjectStore('user-nonces');
},
});

let API = config.API_DEV
if(config.PRODUCTION){
API = config.API_PRODUCTION
}

const app = createApp(App)

app.use(router)
app.use(store)
app.use(plugin, defaultConfig({
theme: 'genesis' // will load from CDN and inject into document head
}))
app.mount("#app")

app.config.globalProperties.$http = Axios;
app.config.globalProperties.$helper = helper;
app.config.globalProperties.$API = API;
app.config.globalProperties.$config = config;
app.config.globalProperties.$idb = idbPromise;

Notiflix.Confirm.Init({messageFontSize: "14px", plainText: false, messageMaxLength:"1000", titleColor: "#f16500", titleFontSize: "20px", okButtonColor:"#ffffff", okButtonBackground: "#0B4B5B"});
Notiflix.Notify.Init({position: 'right-bottom'});

`

can you please to help with this. how i solved this formkit error

[justin-schroeder]

Hmm, looks like your build tool doesn’t support ?? (null coalescing operator https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing). It looks like you are using an older Webpack setup perhaps? Try adding: @babel/plugin-proposal-nullish-coalescing-operator to your webpack config perhaps.

[KashifCh-eth]

i have added @babel/plugin-proposal-nullish-coalescing-operator to my webpack config. But Same Error ? any other solution

[justin-schroeder]

can you make a reproduction repository for us to look at?