NextJS-ReferenceError: Element is not defined

After I bundled my ReactJS components using rollup.js , I am trying to use with nextjs. But it gives this error with nextjs:

ReferenceError: Element is not defined

Here is my rollup.config.js

const extensions = [".js", ".jsx", ".ts", ".tsx"];

export default {
  input: "./src/index.js",
  output: [
    {
      file: pkg.main,
      format: "cjs",
    },
    {
      file: pkg.module,
      format: "esm",
    },
  ],
  plugins: [
    external(),
    postcss({
      plugins: [
        simplevars(),
        cssvariables(),
        nested(),
        cssnext({ warnForDuplicates: false}),
        cssnano(),
      ],
      extensions: [".css"],
    }),
    babel({
      exclude: "node_modules/**",
      extensions,
    }),
    // Allows node_modules resolution
    resolve({
      mainFields: ["module", "main", "jsnext:main", "browser"],
      extensions,
    }),
    commonjs(),
    image(),
    visualizer(),
  ],
};

Normally there is no usage problem in reactjs app. But this happens with nextjs. I assume it is maybe about ssr. But I am not sure.

How can I fix this error? Is there any needs to change on rollap.config.js for eliminating this error?

Thanks