Rollup-plugin-vue: can not compile jsx in vue file

Created on 21 Mar 2019  路  9Comments  路  Source: vuejs/rollup-plugin-vue

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?

Most helpful comment

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"]
}

All 9 comments

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

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

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"]
}

@masongzhi any success?

i found the same errror

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

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

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

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

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

See #429

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Tidyzq picture Tidyzq  路  7Comments

iassasin picture iassasin  路  6Comments

alvarosabu picture alvarosabu  路  4Comments

Infeligo picture Infeligo  路  4Comments

ale-grosselle picture ale-grosselle  路  4Comments