defineProps is not defined with ESbuild

[KevinBerthier]

I moved from webpack to ESbuild but I get ReferenceError: defineProps is not defined

My config is a bit different from the doc : plugins: [rails(), vuePlugin(), require('unplugin-vue2-script-setup/esbuild').default()], instead of plugins: [rails(), vuePlugin(), require('unplugin-vue2-script-setup/esbuild')()],

[xiaoxiangmoe]

try plugins: [rails(), require('unplugin-vue2-script-setup/esbuild').default(), vuePlugin(), ],

[KevinBerthier]

@xiaoxiangmoe I get :

✘ [ERROR] The JSX syntax extension is not currently enabled

    apps/notification-center/NotificationCenter.vue:1:0:
      1 │ <template>
        ╵ ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

Here is my config :

const config = {
  absWorkingDir: path.join(process.cwd(), 'app/javascript'),
  bundle: true,
  chunkNames: 'chunks/[name]-[hash]',
  entryPoints,
  format: 'esm',
  minify: process.env.RAILS_ENV == 'production',
  metafile: true,
  outdir: path.join(process.cwd(), 'app/assets/builds'),
  platform: 'browser',
  plugins: [rails(), require('unplugin-vue2-script-setup/esbuild').default(), vuePlugin()],
  sourcemap: process.env.RAILS_ENV != 'production',
  splitting: true,
  treeShaking: true,
  loader: {
    '.svg': 'dataurl'
  }
}

[xiaoxiangmoe]

Can you provide a minimal reproducible repo

[KevinBerthier]

@xiaoxiangmoe here it is https://github.com/KevinBerthier/unplugin-vue2-script-setup-esbuild-bug

[xiaoxiangmoe]

@sxzz Can you help to fix this?

[sxzz]

@sxzz Can you help to fix this?

OK, I'll check it later.

[sxzz]

It seems to be a problem with unplugin or esbuild-vue, I'll try to fix it later.

[sxzz]

We need to wait for esbuild to resolve this issue https://github.com/evanw/esbuild/issues/1902

[sxzz]

Maybe you can use this plugin https://github.com/nativew/esbuild-plugin-pipe

[sxzz]

I wrote a plugin esbuild-plugin-transform. You can try this.