question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug Report] Vuetify loader breaks JSX

See original GitHub issue

Environment

Browsers: Chrome 76.0.3809.100 OS: Windows 10

Steps to reproduce

  1. Create new Vue CLI app (using defaults)
  2. Add Vuetify package (using defaults)
  3. Edit HelloWorld.vue: remove template and add a simple render function using JSX: render () { return <div>hello</div> }

Expected Behavior

It should render “hello” div

Actual Behavior

Fails to compile:

ERROR  Failed to compile with 1 errors                                                                                                                                                              11:25:27
 error  in ./src/components/HelloWorld.vue?vue&type=script&lang=js&

Module parse failed: Unexpected token (4:11)
You may need an appropriate loader to handle this file type.
| export default {
|   render () {
>     return <div>hello</div>
|   },
|   data: () => ({

 @ ./src/components/HelloWorld.vue?vue&type=script&lang=js& 1:0-227 1:243-246 1:248-472 1:248-472
 @ ./src/components/HelloWorld.vue
 @ ./node_modules/vuetify-loader/lib/loader.js!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.155:8083/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

Reproduction Link

https://github.com/danbaechtold/repro-vuetify-jsx-bug

Other comments

  • JSX works before adding Vuetify
  • JSX also works again after removing vuetify-loader (npm uninstall)

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:15
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

6reactions
xyannikcommented, Aug 21, 2019

Any news on this? I have the same problem. After vue add vuetify the vuetify-loader is installed and JSX render functions stop working. Is there any way to fix this? Thanks

2reactions
Zylabcommented, Aug 30, 2019

Same issue here

Read more comments on GitHub >

github_iconTop Results From Across the Web

vue-template-loader breaks vuetify components - Stack Overflow
I'm using vue-template-loader to load html files in .ts files using decorators, before I use it vuetify was working fine , but after...
Read more >
Frequently asked questions — Vuetify
How do I report a bug or request a feature? The vuetify-loader doesn't load all components · How long will version 1.5 be...
Read more >
vuetify-jsx-loader - npm
Start using vuetify-jsx-loader in your project by running `npm i vuetify-jsx-loader`. There are no other projects in the npm registry using ...
Read more >
error when upgrading to 19.2 | Vue Forums - Syncfusion
The error completely goes away if syncfusion components are ... and we have confirmed it as a bug and logged the defect report...
Read more >
Why I Converted from Vue to React - DEV Community ‍ ‍
There is no magic in React, you simply return JSX? ... of typescript in general is limited to preventing other developers to break...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found