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