Need an appropriate webpack loader

[rakibullahsazib]

I followed the instructions in the docs. But when I run npm run serve I get this error:

Module parse failed: Unexpected token (24:63)
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
| throw error;
| }

                throw new WalletSendTransactionError(error?.message, error);

| }
| }

@ ./node_modules/solana-wallets-vue/node_modules/@solana/wallet-adapter-base/lib/esm/index.js 3:0-28 3:0-28
@ ./node_modules/solana-wallets-vue/dist/solana-wallets-vue.es.js
@ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/@vue/cli-plugin-typescript/node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./src/components/DAOHeader.vue?vue&type=script&setup=true&lang=ts
@ ./src/components/DAOHeader.vue?vue&type=script&setup=true&lang=ts
@ ./src/components/DAOHeader.vue
@ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/@vue/cli-plugin-typescript/node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./src/views/dao/DAO.vue?vue&type=script&setup=true&lang=ts
@ ./src/views/dao/DAO.vue?vue&type=script&setup=true&lang=ts
@ ./src/views/dao/DAO.vue
@ ./src/router/index.ts
@ ./src/main.ts

my package.json is like this:{
"name": "abcd",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint",
"build-storybook": "build-storybook",
"storybook": "start-storybook -p 6006",
"storybook:build": "vue-cli-service storybook:build -c config/storybook",
"storybook:serve": "vue-cli-service storybook:serve -p 6006 -c config/storybook"
},
"dependencies": {
"@dafcoe/vue-notification": "^0.1.6",
"@microsoft/signalr": "^5.0.4",
"@popperjs/core": "^2.9.1",
"@solana/wallet-adapter-wallets": "^0.18.10",
"@vueform/slider": "^1.0.3",
"@xstate/vue": "^0.8.0",
"axios": "^0.21.4",
"buffer": "^6.0.3",
"core-js": "^3.6.5",
"date-fns": "^2.22.1",
"gretchen": "^1.3.0",
"humps": "^2.0.1",
"lodash": "^4.17.21",
"logrocket": "^1.2.0",
"logrocket-vuex": "^0.0.3",
"node-fetch": "^2.6.1",
"quill": "^1.3.7",
"sequential-task-queue": "^1.2.1",
"solana-wallets-vue": "^0.4.5",
"v-calendar": "^3.0.0-alpha.3",
"v-page": "^2.0.9",
"vue": "^3.0.0",
"vue-axios": "^3.4.0",
"vue-element-loading": "^2.0.2",
"vue-loading-overlay": "^4.0.2",
"vue-router": "^4.0.0-0",
"vue-tippy": "^6.0.0-alpha.28",
"vuedraggable": "^4.0.1",
"vuex": "^4.0.0",
"xstate": "^4.22.0"
},
"devDependencies": {
"@babel/core": "^7.13.10",
"@storybook/addon-essentials": "^6.0.26",
"@storybook/addon-links": "^6.0.26",
"@storybook/vue3": "^6.0.26",
"@tailwindcss/postcss7-compat": "^2.0.3",
"@types/jest": "^24.0.19",
"@typescript-eslint/eslint-plugin": "^4.18.0",
"@typescript-eslint/parser": "^4.18.0",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "^4.5.11",
"@vue/cli-plugin-typescript": "~4.5.0",
"@vue/cli-plugin-unit-jest": "~4.5.13",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"@vue/eslint-config-typescript": "^7.0.0",
"@vue/test-utils": "^2.0.0-0",
"autoprefixer": "^9.8.6",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0",
"postcss": "^7.0.35",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.3",
"ts-jest": "^26.5.4",
"typescript": "~4.1.5",
"vue-cli-plugin-storybook": "~2.1.0",
"vue-jest": "^5.0.0-0",
"vue-loader": "^16.1.2"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended",
"@vue/typescript"
],
"parserOptions": {
"parser": "@typescript-eslint/parser"
},
"rules": {},
"overrides": [
{
"files": [
"/tests/*.{j,t}s?(x)",
"/tests/unit//*.spec.{j,t}s?(x)"
],
"env": {
"jest": true
}
},
{
"files": [
"/tests/.{j,t}s?(x)",
"/tests/unit//.spec.{j,t}s?(x)"
],
"env": {
"jest": true
}
},
{
"files": [
"/tests/*.{j,t}s?(x)",
"/tests/unit//*.spec.{j,t}s?(x)"
],
"env": {
"jest": true
}
},
{
"files": [
"/tests/.{j,t}s?(x)",
"/tests/unit//.spec.{j,t}s?(x)"
],
"env": {
"jest": true
}
},
{
"files": [
"/tests/*.{j,t}s?(x)",
"/tests/unit//*.spec.{j,t}s?(x)"
],
"env": {
"jest": true
}
},
{
"files": [
"/tests/.{j,t}s?(x)",
"/tests/unit//.spec.{j,t}s?(x)"
],
"env": {
"jest": true
}
},
{
"files": [
"/tests/*.{j,t}s?(x)",
"/tests/unit/**/.spec.{j,t}s?(x)"
],
"env": {
"jest": true
}
}
]
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
],
"jest": {
"moduleFileExtensions": [
"js",
"ts",
"json",
"vue"
],
"transform": {
".\.(vue)$": "vue-jest",
"^.+\.tsx?$": "ts-jest",
"^.+\.vue$": "vue-jest"
},
"testRegex": "(/tests/.*|(\.|/)(test|spec))\.(jsx?|tsx?)$",
"testURL": "http://localhost/",
"preset": "@vue/cli-plugin-unit-jest/presets/typescript-and-babel"
}
}

[jeyjeycodes]

having the same exact issue

[DimitarDechew]

I am having the same issue, tried with older versions, but didn't fix the problem. Using Vue3