vue3+vite+tsx TSX files in Google debug exception

[gogHeroDream]

🧐 as the img, i can not debug in chrome

💻 Sample code

file : data-picker.vue

<script type="text/babel" lang="tsx" name="DataPicker">
import { reactive, ref, toRefs } from 'vue'
import { isArray } from '../../utils/methods/types';
export default {
    props: {
        placeholder: {
            type: String,
            default: '请输入'
        },
        label: {
            type: String
        },
        clearable: {
            type: Boolean,
            default: true
        },
        shortcuts: {
            type: Array,
            default: ()=> [],
    
        },
    },

    setup(props: any) {
        debugger
        // const state = reactive({
        //     inputVal: ''
        // })

        const value2 = ref('')
        const defaultTime2: [Date, Date] = [new Date(2000, 1, 1, 12, 0, 0), new Date(2000, 2, 1, 8, 0, 0)] // '12:00:00', '08:00:00'
        const scopeShortcuts = ref([
           
        ])
        const mergeShortcuts = computed(()=> {
            debugger
            if(props.shortcuts && isArray(props.shortcuts) && props.shortcuts.length>0) {
                return props.shortcuts
            } else {
                return scopeShortcuts
            }
        })

        return { value2, defaultTime2,mergeShortcuts }
    },
    render() {
        debugger
        return (
            <el-date-picker
                vModel={this.value2}
                type="datetimerange"
                shortcuts={this.mergeShortcuts}
                range-separator="To"
                start-placeholder="Start date"
                end-placeholder="End date"
                default-time={this.defaultTime2}
            />
        )
    }
}
</script>
<style scoped></style>

🚑 Other information config

// vite.config.ts
{
        // 静态资源基础路径 base:"./":"/"
        base: './',
        envDir: './env', //这里使用相对路径，绝对路径其实也可以（环境变量配置的文件路径）
        envPrefix: ['VITE', 'VENUS'], //vite默认只加载VITE（设置prefix可识别其他配置项）
        plugins: [
            vue({ reactivityTransform: true }),
            vueJsx(),
            // 自动引入compostitionApi和全局typescript说明
            autoImport({
                resolvers: [ElementPlusResolver()],
                include: [
                    /\.[t]sx?$/, //匹配.ts,.tsx,.js,.jsx
                    /\.vue$/,
                    /\.vue\?vue/, //.vue
                    /\.md$/ //.md
                ],
                imports: ['vue', 'vue-router'], //自动导入vue和vue-router相关方法
                dts: 'src/auto-imports.d.ts' //生成auto-import.d.ts  全局声明
            }),
            componentsVite({
                resolvers: [ElementPlusResolver()],
                dts: 'src/components-imports.d.ts', //生成components-import.d.ts  全局声明
                dirs: ['src/components'] //按需加载的文件夹
            }),
            visualizer({
                open: true, //设置为 true,否则无效
                gzipSize: true,
                brotliSize: true
            }),
            resolveExternalsPlugin({ AMap: 'AMap' }),
            // 需要时可以放开，这里暂时没有调用
            viteCompression({
                // 生成压缩包gz
                verbose: true, //输出压缩成功
                disable: false, // 是否禁用
                threshold: 10240, // 体积大于阈值会被压缩，单位是b
                algorithm: 'gzip', // 压缩算法
                ext: '.gz' // 生成的压缩包后缀
            })
        ],
        // 强制预构建插件包
        optimizeDeps: {
            include: ['axios']
        },
        css: {
            // css预处理器
            preprocessorOptions: {
                less: {
                    chartset: false,
                    modifyVars: {
                        // 全局less变量存储路径(配置less的全局变量)
                        hack: `true; @import (reference) "${path.resolve('src/styles/common.less')}";`
                    },
                    javascriptEnabled: true
                }
            },
            postcss: {
                plugins: [
                    {
                        postcssPlugin: 'internal:charset-removal',
                        AtRule: {
                            charset: (atRule: any) => {
                                // 去除elementPlus内部charset警告
                                if (atRule.name === 'charset') {
                                    atRule.remove()
                                }
                            }
                        }
                    }
                ]
            }
        },
        build: {
            sourcemap: mode === 'prod' && command === 'build', //是否构建source map 文件
            outDir: 'dist', //指定输出路径
            assetsDir: 'assets', //指定静态资源存放路径
            chunkSizeWarningLimit: 1000,
            cssCodeSplit: true, //提取css一个文件
            emptyOutDir: true, //打包前先清空原有打包文件
            // 生产情况下清空console
            // minify: 'terser',Vite3需要单独安装插件
            terserOptions: {
                compress: {
                    drop_console: true,
                    drop_debugger: true
                },
                ie8: true,
                output: { comments: true } // 删除注释
            },
            rollupOptions: {
                input: {
                    index: path.resolve(__dirname, 'index.html')
                },
                compact: true,
                // 拆分代码，按需加载
                manualChunks: {
                    vue: ['vue', 'vue-router']
                },
                output: {
                    chunkFileNames: 'assets/js/[name]-[hash].js',
                    entryFileNames: 'assets/js/[name]-[hash].js',
                    assetFileNames: 'assets/[ext]/[name]-[hash].[ext]'
                },
                brotliSize: false // 不统计
            }
        },
        ...
        
    }



// tsconfig.json
{
 "compilerOptions": {
 "target": "ESNext",
 "useDefineForClassFields": true,
 "module": "ESNext",
 "moduleResolution": "Node",
 "strict": true,
 "jsx": "preserve",
 "jsxFactory": "h",
 "jsxFragmentFactory": "Fragment",
 "importHelpers": true,
 "sourceMap": true,
  ...


 "include": [
 "src/**/*.ts",
 "src/**/*.d.ts",
 "src/**/*.tsx",
 "src/**/*.vue",
 "src/auto-imports.d.ts",
 "./commitlint.config.ts",
 "./config",
 ".eslintrc.js",
  ],
 "exclude": [
 "node_modules",
 "dist",
 "**/*.js"
  ],
 "references": [
    {
 "path": "./tsconfig.node.json"
    }
  ]
}


// components-imports.d.ts
declare module '@vue/runtime-core' {
  export interface GlobalComponents {
   ...,
   TableCustom: typeof import('./components/tableCustom/index.vue')['default']
   TmsDataPicker: typeof import('./components/TMSBase/tms-data-picker.vue')['default']
   TmsNumberInput: typeof import('./components/TMSBase/tms-number-input.vue')['default']
  }
}

[abearxiong]

这不是这个库的问题，说不定你console.log都打印不了

[gogHeroDream]

这不是这个库的问题，说不定你console.log都打印不了

打印是能打印的 只不过都在导出的那一行了。

[abearxiong]

你进不去setup，实在不行，有一个办法，你build一下，然后把对应的terser关了，看看打包后的源码。

我还是认为这不是这个库的问题。是不是因为type='text/babel'的问题啊，我从没加过这个

[gogHeroDream]

terser

terser关了 type 去掉了 也都是不行的 怀疑 soucemap文件就指到那一行，或者就是内存里压缩了的样子

[abearxiong]

排查下吧 @gogHeroDream 是单个的这个vue文件进不去，还是所有的vue文件都进不去setup啊，多多思考，总会解决的。

要不你配置一个有这问题的demo提交到一个仓库里面，让我排查下是啥问题

[gogHeroDream]

排查下吧 @gogHeroDream 是单个的这个vue文件进不去，还是所有的vue文件都进不去setup啊，多多思考，总会解决的。

要不你配置一个有这问题的demo提交到一个仓库里面，让我排查下是啥问题

就这种类型的不行，应该是别的配置的问题， 提交了个demo https://github.com/gogHeroDream/tsx-question-1229 有时间的话帮看下哈~。

[abearxiong]

排查下吧 @gogHeroDream 是单个的这个vue文件进不去，还是所有的vue文件都进不去setup啊，多多思考，总会解决的。
要不你配置一个有这问题的demo提交到一个仓库里面，让我排查下是啥问题

就这种类型的不行，应该是别的配置的问题， 提交了个demo https://github.com/gogHeroDream/tsx-question-1229 有时间的话帮看下哈~。

打包后，如果不开启minify,minify:false，是可以进去的，开发环境debugger到不了正确位置。

应该是你说的开发环境下的sourcemap的问题吧，真的是还能运行过去【不报错执行成功】，但是sourmap指定不到正确位置（ps：我短时间解决不了）。babel-plugin-jsx解决不了这问题的，尽量不用这种写法吧，等下班啦

[gogHeroDream]

排查下吧 @gogHeroDream 是单个的这个vue文件进不去，还是所有的vue文件都进不去setup啊，多多思考，总会解决的。
要不你配置一个有这问题的demo提交到一个仓库里面，让我排查下是啥问题

就这种类型的不行，应该是别的配置的问题， 提交了个demo https://github.com/gogHeroDream/tsx-question-1229 有时间的话帮看下哈~。

打包后，如果不开启minify,minify:false，是可以进去的，开发环境debugger到不了正确位置。

应该是你说的开发环境下的sourcemap的问题吧，真的是还能运行过去【不报错执行成功】，但是sourmap指定不到正确位置（ps：我短时间解决不了）。babel-plugin-jsx解决不了这问题的，尽量不用这种写法吧，等下班啦

嗯 好的 👌 debugger 位置不对 永远是导出的那个位置 应该不是babel-plugin-jsx 的问题 大概是其他配置引起的问题吧，之前也没确认问题在哪~