uikit-react-viz ERR_REQUIRE_ESM error on page reload

[gobarcanin]

Which UI Kit version is this bug for?

v5.x

Latest version

• [X] I have tested the latest version

No Hitachi confidential content

• [X] I'm not including any Hitachi confidential content

Current behavior 😯

I'm trying to create web page which contains simple bar chart but I'm presented with ERR_REQUIRE_ESM error

Expected behavior 🤔

Present bar chart without error

Steps to reproduce 🕹

I've created project setup with following steps 1 . npx create-next-app@latest demo-app --use-npm --app --ts --no-eslint --no-tailwind --no-src-dir --import-alias "@/*"

2. Added following packages to project npm install -s @hitachivantara/uikit-react-core @emotion/react @emotion/styled @mui/material npm install -D mini-css-extract-plugin npm i @hitachivantara/uikit-react-viz
3. Delete file named layout.tsx
4. Renamed app folder to pages
5. Added into index.ts

   
   'use client';
   import React, { useState, useEffect } from 'react';
   import classes from './page.module.css';
   // @ts-ignore
   import { HvButton } from '@hitachivantara/uikit-react-core';
   // @ts-ignore
   import { HvBarChart } from '@hitachivantara/uikit-react-viz';

const TOP = () => { const onEvents7457839 = (event: any) => { console.log(event); console.log('Implement this onEvents7457839'); }; const onOptionChange7457839 = (option: any) => { console.log('Implement this onOptionChange7457839'); return option; }; return ( <div id="TOP" className={classes.baseComponent}

<div id="base-content" className={classes.baseContent}

<HvBarChart onEvents={{ event: onEvents7457839 }} onOptionChange={onOptionChange7457839} measures="Sales Target" groupBy="Month" data={{ Month: ['January', 'February', 'March', 'April'], 'Sales Target': [6000, 5000, 4000, 3000], }} tooltip={{ show: false }} grid={{ left: 40 }} />

); }; export default TOP;

package.json

{
    "name": "demo-app-without-turbo",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint"
    },
    "dependencies": {
        "@emotion/react": "^11.13.3",
        "@emotion/styled": "^11.13.0",
        "@hitachivantara/uikit-react-core": "5.74.0",
        "@hitachivantara/uikit-react-viz": "5.7.0",
        "@mui/material": "^5.16.7",
        "echarts": "5.4.2",
        "hoist-non-react-statics": "^3.3.2",
        "next": "15.0.1",
        "react": "^18.3.1",
        "react-dom": "^18.3.1"
    },
    "devDependencies": {
        "@types/node": "^20",
        "@types/react": "^18",
        "@types/react-dom": "^18",
        "mini-css-extract-plugin": "^2.9.1",
        "typescript": "^5"
    }
}

next configuration

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {};

export default nextConfig;

Context 🔦

trying to present BarChart inside NextJS webpage

Your Environment 🌎

Build tool: Next Device & OS: MacbookPro, macOS Sequioa Browser: Chrome 129

[zettca]

Hey @gobarcanin

This doesn't seem to be related to HvBarChart or @hitachivantara/uikit-react-viz, but to your project configuration. You're using import, but your project is CJS, and CJS cannot import ESM code.

We've tried using HvBarChart on our own nextjs config and it worked fine

[gobarcanin]

Would it be too much to provide your implementation?

[gobarcanin]

I've got it to work with dynamic import.

const HvBarChart = React.lazy(() =>
    import('@hitachivantara/uikit-react-viz').then((module) => ({
        default: module.HvBarChart,
    }))
);