search

vuejs / rollup-plugin-vue

Roll .vue files
https://vuejs.github.io/rollup-plugin-vue
MIT License
843 stars 148 forks source link

JSX Transform #51

Closed miljan-aleksic closed 7 years ago

miljan-aleksic commented 7 years ago

Thank you @znck, this plugin is very much needed!

After the error ReferenceError: React is not defined and LOL I can confirm the plugin doesn't support JSX transformation and somehow uses the React one. I can even see in yarn.lock the react references, although is not a direct dependency.

I am not sure about the solution, relatively new to Rollup and bundlers plugins, but would like to help in any matter possible, so let me know!

znck commented 7 years ago

Can provide your rollup config file and the file (or part ) that is causing the error?

miljan-aleksic commented 7 years ago

It's a migration in progress, so please ignore all the noise - Rollup config, JSX example.

miljan-aleksic commented 7 years ago

I have converted the JSX code into pure functions and the react issue is gone, but some still persist. 

[Vue warn]: Error when rendering component <transition>: 
[Vue warn]: Unknown custom element: <tabcontent>

Transition is a global component and tabcontent (functional) is locally declared.

znck commented 7 years ago

rollup-plugin-vue works with .vue files only. For JSx there is babel-plugin-transform-vue-jsx.

miljan-aleksic commented 7 years ago

I know, I'm talking about .vue files with JSX code inside, which is converted to js with babel-plugin-transform-vue-jsx. Anyway, even without JSX code, seems failing with functional components.

Did you tried those?

znck commented 7 years ago

I haven't. I'm trying now.

posva commented 7 years ago

@miljan-aleksic You seem to be passing a babel options object to buble at https://github.com/vuikit/vuikit/blob/rollup_issue/rollup.config.js#L20 You can use the rollup-plugin-jsx to handle that as in https://github.com/posva/vue-plugin-template/blob/master/template/build/build.js#L44

miljan-aleksic commented 7 years ago

@posva, interesting. How is that for Webpack Evan has created a Vue specific plugin but for Rollup this generic one is enough?

posva commented 7 years ago

@miljan-aleksic You may miss some very specific features: https://github.com/vuejs/babel-plugin-transform-vue-jsx#jsx-spread. But using babel instead of buble is perfectly fine

miljan-aleksic commented 7 years ago

ok, thanks :)

znck commented 7 years ago

Check out this example repository. It got it working.

miljan-aleksic commented 7 years ago

I am currently refactoring the library and when finish will get pack to the build. You are both awesome, thank you guys!