VueJS. Module parse failed: Unexpected token <

Question

One of my .vue scripts has this import statement:

import ElSlider from 'element-ui/packages/slider/src/main.vue'

The problem is, when it compiles, it throws an error:

Failed to compile.

./node_modules/element-ui/packages/slider/src/marker.js 13:6
Module parse failed: Unexpected token (13:6)
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
| 
|     return (
>       <div class="el-slider__marks-text" style={ this.mark.style || {} }>
|         { label }
|       </div>

As you can see, the source code contains these lines:

 return (
 <div class="el-slider__marks-text" style={ this.mark.style || {} }>
 { label }
 </div>

And it seems, that Vue by default does not like this syntax. I tried to specify a loader in vue.config.js like so:

   ...
   chainWebpack: config => {

    config.module
    .rule('jsx')
    .test(/marker\.js$/)
    .use('babel-loader')
    .loader('babel-loader')
    .tap(options => {
      options.presets = ["jsx", "es2015"]
      return options
    })

But it does not help. If it matters, I also modified babel.config.js. So it now looks like:

 module.exports = {
   presets: ["@vue/app", "@vue/babel-preset-jsx", "es2015"],
   plugins: ["@babel/plugin-proposal-object-rest-spread"]
 }

But it has no effect. So, what am I doing wrong and how can I fix it?

tony19 · Accepted Answer · 2021-01-22 12:15:53Z

3

There's no need to setup Babel for JSX, as Vue CLI already does that automatically. The problem is your Vue CLI project needs to be configured to transpile Element UI, which could be done with the transpileDependencies config:

// vue.config.js
module.exports = {
  transpileDependencies: ['element-ui']
}

Also remember to include the CSS for the slider:

import ElSlider from 'element-ui/packages/slider/src/main.vue'
import 'element-ui/lib/theme-chalk/slider.css' 👈

edited Jan 22, 2021 at 12:15

answered Jan 22, 2021 at 12:13

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ElectRocnic Over a year ago

Thanks, you pointed me into the right direction for the same problem with another dependency: vue-meta. Just added vue-meta instead of element-ui and it built :)

vir us Over a year ago

just had the same problem after updating dependencies and this fixed it. Question - how did I suppose to know this option? I never used it before and unless you provided this answer here, how one supposed to fix it?

Collectives™ on Stack Overflow

VueJS. Module parse failed: Unexpected token <

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related