geist-org / vue

Vue implementation of Geist
https://vue.geist-ui.dev
MIT License
716 stars 38 forks source link

Failed to compile, confused as a beginner #220

Open KisinTheFlame opened 3 years ago

KisinTheFlame commented 3 years ago

Bug report 🐞

Version & Environment

Expection

A successful compilation.

Actual results (or Errors)

The error information displayed in the terminal is below:

gram Files\nodejs\node.exe" "D:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" run dev --scripts-prepend-node-path=auto

> project-test@1.0.0 dev D:\Workspace\project-test
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 13% building modules 29/35 modules 6 active ...D:\Workspace\project-test\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 94% asset optimization

 ERROR  Failed to compile with 1 errors                                                                                                                                  上午8:06:41

 error  in ./node_modules/_@geist-ui_vue@3.0.0@@geist-ui/vue/dist/geist-ui.common.js

Module parse failed: Unexpected token (1851:25)
You may need an appropriate loader to handle this file type.
| const props = { size: [String, Number], color: String }
| const computed = {
|   listeners() { return { ...this.$listeners } },
|   styles() {
|     const sizes = this.size ? { height: this.size, width: this.size } : {}

 @ ./src/main.js 7:0-36
 @ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.js
unix commented 3 years ago

It looks like the error came from the webpack configuration, but I'm not sure. Can you provide the simplest online project as an example to reproduce this error so that I can track down the cause of the error?

KisinTheFlame commented 3 years ago

I have created a repository named "project-test", which may be what you required. Hoping that you can help me solve the problem, thanks!

unix commented 3 years ago

You can focus on the following points:

  1. Compiling object-rest-spread syntax with babel. (this is the object-rest-spread statement of @geist-ui/vue that was not compiled)
  2. babel does not compile the contents of node_modules by default. You can upgrade babel to version 7 and then use configuration file babel.config.js to compile the module from file node_modules. references: You want to compile node_modules?