antoniandre / wave-ui

A UI framework for Vue.js 3 (and 2) with only the bright side. ☀️
https://antoniandre.github.io/wave-ui
MIT License
546 stars 41 forks source link

Can't use waveUI with vue3 #16

Closed EpsilonYi closed 3 years ago

EpsilonYi commented 3 years ago

I use vue cli to create a project, and use waveUI ,but i meet this problem: error in ./node_modules/wave-ui/src/wave-ui/index.js

Module parse failed: Unexpected token (13:18) 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 | | export default class WaveUI {

static instance = null static vueInstance = null // Needed until constructor.

@ ./src/main.js 7:0-41 8:4-10 @ multi (webpack)-dev-server/client?http://192.168.3.2:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

Here is my package: { "name": "wave", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "@babel/cli": "^7.12.10", "@babel/core": "^7.12.10", "@babel/parser": "^7.12.11", "@babel/plugin-proposal-class-properties": "^7.12.1", "@babel/plugin-transform-runtime": "^7.12.10", "@babel/polyfill": "^7.12.1", "@babel/preset-env": "^7.12.11", "@babel/preset-react": "^7.12.10", "@babel/runtime": "^7.12.5", "babel-loader": "^8.2.2", "babel-plugin-lodash": "^3.3.4", "babel-plugin-react-transform": "^3.0.0", "babel-upgrade": "^1.0.1", "core-js": "^3.6.5", "vue": "^3.0.0", "wave-ui": "^1.14.9" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/compiler-sfc": "^3.0.0", "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^7.0.0-0" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/vue3-essential", "eslint:recommended" ], "parserOptions": { "parser": "babel-eslint" }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ] }

babel configration file: module.exports = { presets: [ '@babel/preset-react', '@babel/preset-env', '@vue/cli-plugin-babel/preset', ], plugins: [ 'lodash', '@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties' ] }

EpsilonYi commented 3 years ago

So have anyone can teach me to solve this problem?

antoniandre commented 3 years ago

Hi @EpsilonYi, I am glad you solved this issue! Do you mind to share your solution for the next person facing this? :) Thanks!

antoniandre commented 3 years ago

The solution to this issue is to transpile Wave UI as you are using the source code. https://antoniandre.github.io/wave-ui/customization#modify-your-config