Vue-loader: Vue loader doesn't compile coffeescript

[liveforeverx]

Using example app (created with vue cli), after that running, as in instruction ( http://vuejs.github.io/vue-loader/configurations/pre-processors.html )

npm install coffee-loader --save-dev

After that, I do

<script lang="coffee">
console.log "test"
</script>

And get:

ERROR in ./src/components/Hello.vue

  error    Parsing error: Unexpected token "test"
  /Users/druss/dev/test_app/src/components/Hello.vue:6:13
  console.log "test"
               ^


✖ 1 problem (1 error, 0 warnings)

Versions used:

"webpack": "^1.12.2",
"coffee-loader": "^0.7.2",
"vue-loader": "^8.1.3"

Bundled with webpack.

[yyx990803]

You need to disable eslint if you are using coffeescript. Remove the module.preLoaders block in your webpack.base.config.js.

On Tue, Feb 23, 2016 at 3:42 PM Dmitry Russ(Aleksandrov) <
[email protected]> wrote:

Using example app (created with vue cli), after that running, as in
instruction (
http://vuejs.github.io/vue-loader/configurations/pre-processors.html )

npm install coffee-loader --save-dev

After that, I do

And get:

ERROR in ./src/components/Hello.vue

error Parsing error: Unexpected token "test"
/Users/druss/dev/test_app/src/components/Hello.vue:6:13
console.log "test"
^

✖ 1 problem (1 error, 0 warnings)

Versions used:

"coffee-loader": "^0.7.2",
"vue-loader": "^8.1.3"

—
Reply to this email directly or view it on GitHub
https://github.com/vuejs/vue-loader/issues/162.

[liveforeverx]

Thanks! That works!

[hedefalk]

Hi! Just a follow up on this. I just experienced the same issue and I'm wondering if there's anyway to have both? I mean "You need to disable eslint if you are using coffeescript" - this project has a bit off coffee and a bit of es2015 and I would like to lint the es?

[yyx990803]

@hedefalk then you need to somehow differentiate them in filenames (e.g. xxx.coffee.vue) and change the test regex in the webpack preLoaders config.

[hedefalk]

@yyx990803 I'm trying to understand this, and sorry to ask for education here, but I just read https://github.com/vuejs/vue-loader/blob/master/docs/workflow/linting.md too and there you have loader: 'vue!eslint'which makes total sense to me but I don't understand how

{
        test: /.vue$/,
        loader: 'eslint',
        exclude: /node_modules/
      }

works? Even if on preLoader, how can eslint lint a straight .vue file? I see that it DO work, I just don't understand why :)

[yyx990803]

It's using eslint-html-plugin which makes ESLint support Vue files.

[hedefalk]

Ah, ok I see!

On Sun, Mar 27, 2016 at 10:13 AM Evan You [email protected] wrote:

It's using eslint-html-plugin which makes ESLint support Vue files.

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
https://github.com/vuejs/vue-loader/issues/162#issuecomment-202014599

[pbgc]

This is very old and closed ... but just wanted to say that I have the same problem (project with .vue files with Javascript and Coffeescript) and just solve this problem by adding the .vue files with

it gives me:

error: Parsing error: Unexpected token, expected ";"

  3 |
  4 | component_obj =

5 |   data: ->
    |       ^
  6 |    {
  7 |      loginError: false,
  8 |      username: '', at src/views/Login.vue:52:6:
  50 |
  51 | component_obj =
52 |   data: ->
     |      ^
  53 |    {
  54 |      loginError: false,
  55 |      username: '',

1 error found.

zor-el escreveu em 02/05/19 09:36:
>

Though old and closed, I haven't found any working solution for this
problem anywhere. But I think I found a sweet workaround for this. :)

The main problem here is that eslint-plugin-html ignores the |lang|
attribute in |

For the more standards-sensitive folks, perhaps this might feel more
appropriate:

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/vuejs/vue-loader/issues/162#issuecomment-488592070,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABMEWI653C4OREQWE3NFSDPTKRZJANCNFSM4B4ECLZQ.

[zor-el]

@pbgc you probably replied to my comment which I've withdrawn since. The solution I proposed would have worked with the eslint-html-plugin (it did for me once), but Vue has since switched to eslint-plugin-vue, which doesn't seem to have any regard for any <script> attributes. As soon as I npm-updated, I saw it didn't work, so I deleted my comment. Too bad though... :(

[joallard]

I have spent a few 4-5 hours too trying to set up an Hello World project with Coffeescript and trying to make EsLint work (and eslint-plugin-vue), unfortunately I was not successful.

[pbgc]

@joallard I can use coffeescript in vue with:

"coffee-loader": "^0.9.0",
"coffeescript": "^2.5.1",
"vue-cli-plugin-coffee": "^0.1.0",

by disabling eslint ...

<script lang="coffee" type="text/coffeescript">
# /* eslint-disable */

import { mapActions } from 'vuex'

component_obj =
   data: ->
    {
      loginError: false,
      username: '',
      password: ''
    }
   ,
   methods: {
     mapActions(['login'])...,
     submit: ->
       this.login(
         { username: this.username, password: this.password }
       ).catch((e) =>
         console.log(e);
         this.loginError = true;
       )
   }

export default component_obj
</script>

[joallard]

@pbgc Thanks! I was looking for a way to make Eslint work, but any help will be useful to people who try to do this. The workaround I found for the moment, was indeed to just disable Eslint entirely.