Getting roll up error

[yashwp]

I'm deploying my site to Vercel, were I'm getting the below error:

[15:28:52.582] [info] [nitro] Initializing prerenderer
[15:28:57.673] [warn] (inject plugin) rollup-plugin-inject: failed to parse /vercel/path0/node_modules/vue3-table-lite/src/components/TableLiteTs.vue. Consider restricting the plugin to particular files via options.include
[15:28:57.678] [error] [nitro] RollupError: Expression expected (Note that you need plugins to import files that are not JavaScript)
[15:28:57.679] 
[15:28:57.679] 
[15:28:57.679] 1: <!-- eslint-disable @typescript-eslint/no-explicit-any -->
[15:28:57.679]    ^
[15:28:57.679] 2: <template>
[15:28:57.679] 3:   <div class="vtl vtl-card">
[15:28:57.680] [error] Expression expected (Note that you need plugins to import files that are not JavaScript)
[15:28:57.680]   at error (node_modules/rollup/dist/es/shared/parseAst.js:337:30)
[15:28:57.680]   at nodeConverters (node_modules/rollup/dist/es/shared/parseAst.js:2084:9)
[15:28:57.680]   at convertNode (node_modules/rollup/dist/es/shared/parseAst.js:969:12)
[15:28:57.680]   at convertProgram (node_modules/rollup/dist/es/shared/parseAst.js:960:48)
[15:28:57.680]   at parseAstAsync (node_modules/rollup/dist/es/shared/parseAst.js:2150:20)
[15:28:57.681]   at async Module.tryParseAsync (node_modules/rollup/dist/es/shared/node-entry.js:13496:21)
[15:28:57.681]   at async Module.setSource (node_modules/rollup/dist/es/shared/node-entry.js:13077:35)
[15:28:57.681]   at async ModuleLoader.addModuleSource (node_modules/rollup/dist/es/shared/node-entry.js:17724:13) 
[15:28:57.681] 
[15:28:57.681] [error] Expression expected (Note that you need plugins to import files that are not JavaScript)
[15:28:57.741] Error: Command "nuxt build" exited with 1
[15:28:58.061] 

When I'm commenting VueTableLite component, the error goes away

[Chalks]

I ran into the exact same issue using Nuxt 3.5.1 when generating (to deploy to netlify) and vue3-table-lite 1.3.7... and I figured out how to fix it.

In nuxt.config.tx add this to your configuration:

    build: {
        transpile: ['vue3-table-lite'],
    },

And... that fixed it for me! Hope it works for you too.

[linmasahiro]

Hi, @Chalks and @yashwp Thanks for issue. I am want to resolve this problem, and how can I reproduce the problem? Nuxt3 + vue3-table-lite?

[yashwp]

Hi @linmasahiro,

I'm using "vue": "^3.4.21", of Vue in my application where I have install latest version of the this package, but at the time of nuxt build command, the above error is coming.

[linmasahiro]

Hi @linmasahiro,

I'm using "vue": "^3.4.21", of Vue in my application where I have install latest version of the this package, but at the time of nuxt build command, the above error is coming.

Hi, @yashwp , Thanks for your reply. I think because vue3-table-lite is only for client-side? Here has 2 solutions

1: Use <ClientOnly> tag to wrap your vue3-table-lite tag.

<template>
  <div>
    <ClientOnly>
      <Vue3TableLite />
    </ClientOnly>
  </div>
</template>

2: Add below configuration to your nuxt.config.ts

build: {
  transpile: ['vue3-table-lite'],
},