请教如何解决这个问题。expected "</>/<=/>="

[Richard-Choooou]

注释掉下面的 jsx 语法可以正常工作。

babel.config.js

module.exports = {
    presets: [
        '@vue/app',
        "@babel/preset-typescript",
        "@vue/babel-preset-jsx",
    ],
    plugins: [
        "@babel/plugin-transform-typescript"
    ] 
}

在另一个文件中也使用到了 jsx ，但是没有任何影响。

代码如下：

const createWaringDialog = function(options: {
    title?: string,
    type?: 'danger' | 'primary',
    message?: string,
    render?: (h: CreateElement) => JSX.Element,
    confirmBtnText?: string,
    cancelBtnText?: string
}) {
    options = Object.assign({
        type: 'primary',
        title: '提示',
        confirmBtnText: '确认',
        cancelBtnText: '取消'
    }, options)
    return new Vue<{
        dialogVisible: boolean
    }, {
        open: () => void
        close: () => void
        cancel: () => void
        confirm: () => void
    }>({
        setup: function(props, ctx) {
            const dialogVisible = ref(false)

            function open() {
                dialogVisible.value = true
            }

            function close() {
                ctx.emit('cancel')
                dialogVisible.value = false
            }

            function cancel() {
                ctx.emit('cancel')
                dialogVisible.value = false
            }

            function confirm() {
                ctx.emit('confirm')
                dialogVisible.value = false
            }

            return {
                cancel,
                confirm,
                open,
                close,
                dialogVisible
            }
        },

        render(h) {
            return <dialog-template
                    title={options.title}
                    visible={this.dialogVisible}
                    onClose={this.close}
                    append-to-body={true}
                    destroy-on-close={true}
                    width={"400px"}
                >
                {options.message && <div>{options.message}</div>}
                {options.render && options.render(h)}
                <div slot="footer" style="text-align: center">
                    <el-button size="medium" onClick={this.confirm} type={options.type}>
                        {options.confirmBtnText}
                    </el-button>
                    <el-button size="medium" onClick={this.cancel} plain>{options.cancelBtnText}</el-button>
                </div>
            </dialog-template>
        }
    })
}

[Richard-Choooou]

@sodatea 求教

[sodatea]

<script lang="tsx">
有设置正确吗？

[sodatea]

应该是 babel-preset-typescript 的设置问题
https://babeljs.io/docs/en/babel-preset-typescript
没有自动识别你这个文件内容是 TSX

[Richard-Choooou]

大佬就是大佬，一眼就定位了问题，修改如下配置解决了。

{
    "presets": [
        ["@babel/preset-typescript", {
            "allExtensions": true,
            "isTSX": true
        }]
    ]
}

顺便吐槽下，vue cli typescript 用的 ts-loader, 是真的慢啊！

[sodatea]

如果支持了 incremental build 应该性能会好一点……不过工作量比较大，暂时还没时间去仔细研究。欢迎贡献代码 TypeStrong/ts-loader#999