Getting `RollupError: Expression expected` when building NPM package

After that I finished the preparation of my environment to build my first NPM package for React JS with ROLLUP bundler I got RollupError: Expression expected as shown in below

Error output

> rollup -c --environment NODE_ENV:development

development mode bundle

src/index.js → dist/index.js...
[!] RollupError: Expression expected
src/horizon-card/index.js (15:8)
13:     dataList.forEach((service)=>{
14:       serviceList.push(
15:         <li key={index}
            ^

I tried to fixe it by using curly braces "{}" but it seems that the problem is occured due to using angle brackets "<" inside .push method

rollup.config.js

import terser from "@rollup/plugin-terser";

const devMode = (process.env.NODE_ENV === 'development');
console.log(`${ devMode ? 'development' : 'production' } mode bundle`);


export default [
  {
    input: 'src/index.js',
    output: {
      file: "dist/index.js",
      format: 'es',
      sourcemap: devMode ? 'inline' : false,
      plugins: [
        terser({
          ecma: 2020,
          mangle: { toplevel: true },
          compress: {
            module: true,
            toplevel: true,
            unsafe_arrows: true,
            drop_console: !devMode,
            drop_debugger: !devMode
          },
          output: { quote_style: 1 }
        })
      ]
    }
  }
]

I want to build my NPM package for ReactJS by using ROLLUP bundler, but my package use HTML tags inside push array's method.

In my case, I created the project using Vite and by default it uses the .jsx extension on its javascript files. I had this error because I was trying to import a component from a .js file. After I changed its extension, the error disappeared.