Issue after uprading to latest hv-uikit library

[aanjum154]

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 😯

After upgrading to latest hv-uikit library, facing below issues in our project:

node version - v18.19.1 npm version - 10.2.4

Expected behavior 🤔

No response

Steps to reproduce 🕹

Sandbox link:

Steps to reproduce:

1. 2. 3. 4.

Context 🔦

No response

Your Environment 🌎

Build tool: (e.g. Vite 4, Webpack 5) Device & OS: (e.g. Windows 11 laptop, iPhone 13 iOS15) Browser: (e.g. Chrome 112, Safari 15.4) Other details (e.g. 4K resolution, ...)

[aanjum154]

Pleas find below the package.json file: package.json

[aanjum154]

Please find contents of webpack for development below:

/**

• DEVELOPMENT WEBPACK CONFIGURATION */

const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CircularDependencyPlugin = require('circular-dependency-plugin');

module.exports = require('./webpack.base.babel')({ mode: 'development',

// Add hot reloading in development entry: [ require.resolve('react-app-polyfill/ie11'), 'webpack-hot-middleware/client?reload=true', path.join(process.cwd(), 'app/app.js'), // Start with js/app.js ],

// Don't use hashes in dev mode for better performance output: { filename: '[name].js', chunkFilename: '[name].chunk.js', },

optimization: { splitChunks: { chunks: 'all', }, },

// Add development plugins plugins: [ new webpack.HotModuleReplacementPlugin(), // Tell webpack we want hot reloading new HtmlWebpackPlugin({ inject: true, // Inject all files that are generated by webpack, e.g. bundle.js template: 'app/index.html', }), new CircularDependencyPlugin({ exclude: /a.js|node_modules/, // exclude node_modules failOnError: false, // show a warning when there is a circular dependency }), ],

// Emit a source map for easier debugging // See https://webpack.js.org/configuration/devtool/#devtool devtool: 'eval-source-map',

performance: { hints: false, }, });

[MEsteves22]

Hello @aanjum154 👋

Did you start having this issue when upgrading from another major (3.x, 4.x, etc) to 5.x, or you were already using 5.x and upgraded to the latest version?

Looking at the image, it seems like you are missing some babel loaders in your project. My guess is that you probably need to add the @babel/plugin-proposal-nullish-coalescing-operator and @babel/plugin-proposal-optional-chaining plugins.

Let us know if this solves your issue.

[aanjum154]

@babel/plugin-proposal-optional-chaining

@MEsteves22 Yes adding this plugin solved the issue, thank you so much. But I am facing other errors after importing HvBarChart and other components from @hitachivantara/uikit-react-viz:

Can you please tell me what is it that I am missing here!!!

[MEsteves22]

I'm glad it worked @aanjum154 🙏

Do you have the following dependencies in your node_modules: arquero, echarts, and echarts-for-react? If not, can you try reinstalling your project again. They should come with uikit-react-viz out of the box.

[aanjum154]

echarts

Hey @MEsteves22, it worked after adding the dependencies arquero, echarts, and echarts-for-react in the package.json file. Thank you so much for your help!!!!