search

JuniorTour / vue-template-babel-compiler

Enable Optional Chaining(?.), Nullish Coalescing(??) and many new ES syntax for Vue.js SFC based on Babel
https://www.npmjs.com/package/vue-template-babel-compiler
118 stars 9 forks source link

[Fixed Bug] Unexpected token for optional?.chaining #3

Open jwtong opened 2 years ago

jwtong commented 2 years ago

invalid expression: Unexpected token '.' in

optional?.chaining

v1.0.0

JuniorTour commented 2 years ago

@jwtong Thank yor for your feedback

Could you provide more context? So that we can help you ASAP.

For example:

  1. Your usage, Vue-cli, Nuxt.js, Webpack etc.
  2. Your steps or code snippets whiclh got the error above.
  3. A minimal reproduction project is prefer, eg: vue-template-babel-compiler-nuxt-project
jwtong commented 2 years ago

@JuniorTour This was from the Nuxt demo project actually (vue-template-babel-compiler-nuxt-project), and is consistent with my other project I am trying to set this up for. "nuxt": "^2.15.7", "vue-template-babel-compiler": "^1.0.0"

JuniorTour commented 2 years ago

@jwtong Sorry for late reply.

Is your problem solved?

I just test Nuxt.js DEMO project again.

It will throw the same error when not config nuxt.config.js: ZI$4NLF%)_DDOT0SST13FVV

So the solution could be add build.loaders.vue to your nuxt.config.js:

// nuxt.config.js
export default {
  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    loaders: {
      vue: {
        compiler: require('vue-template-babel-compiler')
      }
    },
  },
  // ...
}

If the problem still not be solved, feel free to ask my again.

jwtong commented 2 years ago

@JuniorTour Yes, so it now works with that config, just from upgrading to 1.0.2. There is now just a SSR issue, I know someone else opened a PR for that as well.

https://github.com/JuniorTour/vue-template-babel-compiler/issues/7

JuniorTour commented 2 years ago

@jwtong Thank you for your help!

It is a bug indeed, I just published 1.0.3 to fix it.

You can try it by:

npm install vue-template-babel-compiler@1.0.3 -D
// or yarn
yarn add vue-template-babel-compiler@1.0.3 -D

Now this compiler will work for SSR too!

8b40e54c646984a92edb58ac2fcf7b4

I also update vue-template-babel-compiler-nuxt-project

Thank you for your feedback again!

flozero commented 2 years ago

Doesnt work with latest nuxt project

JuniorTour commented 2 years ago

Doesnt work with latest nuxt project

@f3ltron Thanks for your feedback.

I just test by this demo-nuxt-project with "nuxt": "^2.15.8" and "vue-template-babel-compiler": "^1.0.6-0".

It works fine.

How do you use this lib?

Could you provide more details? For example:

I'd be glad to help you use this lib.

zavaremre commented 2 years ago

Hi, Having error with demo-nuxt-project. I cloned the demo repo and started the project. then got the following error:

It is working while building but it doesn't work with npm run dev Using node v12.22.4 Nuxt v2.15.7 image

JuniorTour commented 2 years ago

Hi, Having error with demo-nuxt-project. I cloned the demo repo and started the project. then got the following error:

It is working while building but it doesn't work with npm run dev Using node v12.22.4 Nuxt v2.15.7

Currently, The nullish coealasing (??) only work for node.js v14+.

So a temp workaround is:

I'm still look into can we use it below v14, welcome for working toghther.

Thanks for your feedback.

Related:

Songoo7 commented 1 year ago

npm Installed to vue 2 webpack project, added "compiler: require('vue-template-babel-compiler'),"

But code still crash on .?
Anybody who got this working ? Are there some additional installation settings needed ?

JuniorTour commented 1 year ago

npm Installed to vue 2 webpack project, added "compiler: require('vue-template-babel-compiler'),"

But code still crash on .?
Anybody who got this working ? Are there some additional installation settings needed ?

@Songoo7

What is your Nodejs version? Currently this lib need nodejs v14 aboce.

Could your provide a reproduction repo or online demo?

It would be my pleasure to help you.

Songoo7 commented 1 year ago

npm Installed to vue 2 webpack project, added "compiler: require('vue-template-babel-compiler')," But code still crash on .? Anybody who got this working ? Are there some additional installation settings needed ?

@Songoo7

What is your Nodejs version? Currently this lib need nodejs v14 aboce.

Could your provide a reproduction repo or online demo?

It would be my pleasure to help you.

Hello , I have node v16.15, webpack 3, babel 6, vue 2.4.4 . (tried to update to webpack 4 and babel 7, but was really not able to :) ) https://i.imgur.com/8Z6GBzi.png . Not sure how to do demo hmm, maybe copy package.json and then npm install and do some blank project uh oh ?

JuniorTour commented 1 year ago

@Songoo7 What is the version of vue-loader you are using?

If version is smaller than v15.0.0, the compiler option is not valid. It only valid for vue-loader >= v15.0.0.

vue-loader v14 does NOT have this option to use vue-template-babel-compiler.

Songoo7 commented 1 year ago

"vue-loader": "^13.0.5", so I should raise to 15 ? I'll try if it let me.

Songoo7 commented 1 year ago

I got to vue-loader 14.0.0. But sadly going to 15 is impossible for me :( tried to follow https://vue-loader.vuejs.org/migrating.html#notable-breaking-changes and https://vue-loader.vuejs.org/guide/#vue-cli . But those guides are not enough detailed for this. Added new loader, added new less sass configs installed less-loader, sass-loader but in the end got an hundreds and hundreds red errors :) .