lumada-design / hv-uikit-react

UI library for the Next Design System.
https://lumada-design.github.io/uikit/master
Apache License 2.0
39 stars 21 forks source link

uikit-react-viz ERR_REQUIRE_ESM error on page reload #4398

Closed gobarcanin closed 1 hour ago

gobarcanin commented 3 days ago

Which UI Kit version is this bug for?

v5.x

Latest version

No 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

Screenshot 2024-10-27 at 09 02 32

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 "@/*"

  1. 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
  2. Delete file named layout.tsx
  3. Renamed app folder to pages
  4. 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 commented 15 hours ago

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 commented 14 hours ago

Would it be too much to provide your implementation?

gobarcanin commented 1 hour ago

I've got it to work with dynamic import.

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