Icon web3uikit issues with Next Js

Hi Guys,

I am getting some issues when trying to use icons from web3uikit at my Next Js project. I am importing Icon from web3uikit, as you can see below and also using it as follow. The others classes I am importing I am not facing issue, just the Icon.

import { ConnectButton, TabList, Tab, Icon } from “web3uikit”;

  <div className={classes.tabButtons}>
    <TabList defaultActiveKey={1} tabStyle="bar">
      <Tab tabKey={1} tabName={"Assets"}></Tab>
      <Tab tabKey={2} tabName={"New Assets"}></Tab>
    </TabList>
  </div>
  <div>
    <Icon fill="#ffffff# size={24} svg="bell" />
    <ConnectButton />
  </div>

But when start my project the following error is showing up:

error - Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.
at renderElement (/home/smartcitybr/projects/frontend_next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6043:9)
at renderNodeDestructiveImpl (/home/smartcitybr/projects/frontend_next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
at renderNodeDestructive (/home/smartcitybr/projects/frontend_next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
at renderNode (/home/smartcitybr/projects/frontend_next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
at renderChildrenArray (/home/smartcitybr/projects/frontend_next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
at renderNodeDestructiveImpl (/home/smartcitybr/projects/frontend_next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
at renderNodeDestructive (/home/smartcitybr/projects/frontend_next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
at renderNode (/home/smartcitybr/projects/frontend_next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
at renderHostElement (/home/smartcitybr/projects/frontend_next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5642:3)
at renderElement (/home/smartcitybr/projects/frontend_next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5952:5) {
page: ‘/’
}

Anyone can explain me what can be the issue?

Thanks.

Which version of web3uikit are you using?

<Icon fill="#ffffff# size={24} svg=“bell” />

Looks like you’re missing a closing ". That may need to be #ffffff also.

Hi Glad, thanks for your quick response. The dependencies I am usinf are below, related to your question it is was just a mistake that I commit when openning this request. But, the one that is in my code is: which is still returning error.

"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^14.4.3",
"antd": "^4.23.1",
"assert": "^2.0.0",
"crypto-browserify": "^3.12.0",
"dotenv": "^16.0.2",
"express": "^4.18.1",
"https-browserify": "^1.0.0",
"magic-sdk": "^9.0.0",
"moralis": "^2.4.0",
"moralis-v1": "^1.11.0",
"next": "12.3.0",
"os-browserify": "^0.3.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-moralis": "^1.4.2",
"react-router-dom": "^6.4.0",
"react-scripts": "^5.0.1",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"styled-components": "^5.3.5",
"url": "^0.11.0",
"web-vitals": "^3.0.1",
"web3uikit": "^1.0.4"