Skip to content
This repository has been archived by the owner on Jan 18, 2022. It is now read-only.

can not compile jsx in vue file #278

Closed
masongzhi opened this issue Mar 21, 2019 · 9 comments
Closed

can not compile jsx in vue file #278

masongzhi opened this issue Mar 21, 2019 · 9 comments

Comments

@masongzhi
Copy link

Version

4.7.2

Reproduction link

https://github.com/masongzhi/vugular-ui

Steps to reproduce

yarn build

What is expected?

compile success

What is actually happening?

@znck
Copy link
Member

znck commented Mar 21, 2019

RPV does not process script code, it provides script code to other plugins like rollup-plugin-babel or rollup-plugin-typescript2. Include required babel configuration for JSX, see https://github.com/vuejs/jsx

@znck znck closed this as completed Mar 21, 2019
@masongzhi
Copy link
Author

could you give a example code?

RPV does not process script code, it provides script code to other plugins like rollup-plugin-babel or rollup-plugin-typescript2. Include required babel configuration for JSX, see https://github.com/vuejs/jsx

@masongzhi
Copy link
Author

it is also error when i write from https://github.com/vuejs/jsx

// rollup.config.js
import commonjs from 'rollup-plugin-commonjs';
import vue from 'rollup-plugin-vue';
import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';

export default {
  input: 'src/index.js',
  output: {
    format: 'esm',
    file: 'dist/index.js',
  },
  extensions: ['.js', '.vue'],
  plugins: [
    vue(),
    resolve({
      extensions: ['.js', '.vue'],
    }),
    commonjs(),
    babel({
      exclude: 'node_modules/**',
      runtimeHelpers: true,
    }),
  ],
};
// .babelrc
{
  "presets": ["@vue/babel-preset-jsx"]
}

@houd1ni
Copy link

houd1ni commented Aug 31, 2019

@masongzhi any success?

@houd1ni houd1ni mentioned this issue Aug 31, 2019
@zouhangwithsweet
Copy link

i found the same errror

@zouhangwithsweet
Copy link

when i use lang=babel in .vue file, it can work

<script lang="babel">
 // some code
</script>

@fubangfu
Copy link

fubangfu commented Dec 6, 2019

const acornJSX = require( 'acorn-jsx' );

rollup({
...
acornInjectPlugins : [acornJSX( { allowNamespaces : false } )],
})

@Akryum
Copy link
Member

Akryum commented Jan 31, 2021

@znck Still seing this error in 5.1.9. Building JSX in normal js files works, but not in .vue files.

@Akryum
Copy link
Member

Akryum commented Jan 31, 2021

See #429

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants