Fatal Issue : Unable to Setup Project (Iconify Integration & Build Issues)

[Nikhil-Nishad]

Steps to reproduce

I'm having trouble integrating Iconify and building the project. The build process is failing due to a combination of dependency conflicts, ES module issues, and a "Module not found" error. I am using "Javascript version".

To Reproduce

Clone the repository: [If applicable, provide the repository URL]
Install dependencies: npm install
Run the build command:

What is expected?

The build process should complete successfully, and the application should render with the correct icons.
There should be a file named '@assets/iconify-icons/generated-icons.css', but its not there.
Project to start, "npm run dev " should work.

What is actually happening?

Resolved: package.json JSON Parsing Error: A trailing comma in package.json caused a parsing error. This was resolved by removing the comma.

Partially Resolved: Peer Dependency Conflict: A peer dependency conflict existed between apexcharts and react-apexcharts.

Error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
// ... (rest of the error message)
Status: Downgrading apexcharts to a 4.x version seems to have resolved this particular conflict, but I'm unsure of the long-term implications. It would be preferable to find compatible versions that don't require downgrading.

Resolved: ES Modules Errors: After adding "type": "module" to package.json, I encountered errors related to require and __dirname in bundle-icons-css.js.

Errors:

ReferenceError: require is not defined in ES module scope
ReferenceError: __dirname is not defined in ES module scope
Resolution: Replaced require with import for JSON files and used the following to define __dirname:

JavaScript

import { fileURLToPath } from 'url';
import { dirname } from 'path';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
Unresolved: Module Not Found Error - Blocking Issue: The build process now fails with a "Module not found" error for generated-icons.css. This is preventing me from running the project.

Error:

Module not found: Can't resolve '@assets/iconify-icons/generated-icons.css'
Import statement in src/components/MyComponent.js (example):

JavaScript

import '@assets/iconify-icons/generated-icons.css'; // Or various relative paths I've tried
Context: generated-icons.css is generated by bundle-icons-css.js in src/assets/iconify-icons/. The build script runs bundle-icons-css.js before the main build. I've tried various relative import paths (./generated-icons.css, ../generated-icons.css, etc.) in the component, but none work. I suspect the issue is either with the import path or how the generated-icons.css file is being made available to the build process.

---

PS D:\Nikhil\files\JobAssignment\ticket\javascript-version> npm i react-apexcharts
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: next-app-test@0.1.0
npm error Found: apexcharts@3.54.1
npm error node_modules/apexcharts
npm error apexcharts@"^3.49.1" from the root project
npm error
npm error Could not resolve dependency:
npm error peer apexcharts@">=4.0.0" from react-apexcharts@1.7.0
npm error node_modules/react-apexcharts
npm error react-apexcharts@"^1.4.1" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error C:\Users\nikhi\AppData\Local\npm-cache_logs\2025-02-13T10_19_52_367Z-eresolve-report.txt
npm error A complete log of this run can be found in: C:\Users\nikhi\AppData\Local\npm-cache_logs\2025-02-13T10_19_52_367Z-debug-0.log
PS D:\Nikhil\files\JobAssignment\ticket\javascript-version> npm install react-apexcharts apexcharts
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: next-app-test@0.1.0
npm error Found: apexcharts@3.54.1
npm error node_modules/apexcharts
npm error apexcharts@"^3.49.1" from the root project
npm error
npm error Could not resolve dependency:
npm error peer apexcharts@">=4.0.0" from react-apexcharts@1.7.0
npm error node_modules/react-apexcharts
npm error react-apexcharts@"^1.4.1" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error C:\Users\nikhi\AppData\Local\npm-cache_logs\2025-02-13T10_21_03_323Z-eresolve-report.txt
npm error A complete log of this run can be found in: C:\Users\nikhi\AppData\Local\npm-cache_logs\2025-02-13T10_21_03_323Z-debug-0.log
PS D:\Nikhil\files\JobAssignment\ticket\javascript-version> npm install react-apexcharts apexcharts
npm error code EJSONPARSE
npm error path D:\Nikhil\files\JobAssignment\ticket\javascript-version/package.json
npm error JSON.parse Expected double-quoted property name in JSON at position 664 (line 23 column 5) while parsing near "...s": "^5.15.11",\n // "apexcharts": "^3..."
npm error JSON.parse Failed to parse JSON data.
npm error JSON.parse Note: package.json must be actual JSON, not just JavaScript.
npm error A complete log of this run can be found in: C:\Users\nikhi\AppData\Local\npm-cache_logs\2025-02-13T10_21_16_514Z-debug-0.log
PS D:\Nikhil\files\JobAssignment\ticket\javascript-version> npm install react-apexcharts apexcharts
npm warn deprecated @humanwhocodes/config-array@0.13.0: Use @eslint/config-array instead
npm warn deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead
npm warn deprecated eslint@8.57.1: This version is no longer supported. Please see https://eslint.org/version-support for other options.
npm warn deprecated @mui/base@5.0.0-beta.40: This package has been replaced by @base-ui-components/react

added 625 packages, and audited 626 packages in 2m

203 packages are looking for funding
run npm fund for details

found 0 vulnerabilities
PS D:\Nikhil\files\JobAssignment\ticket\javascript-version> "apexcharts": "^3.49.1",

"react-apexcharts": "^1.4.1",^C

PS D:\Nikhil\files\JobAssignment\ticket\javascript-version> npm install

next-app-test@0.1.0 postinstall
npm run build:icons

next-app-test@0.1.0 build:icons
tsx src/assets/iconify-icons/bundle-icons-css.js

(node:18312) [MODULE_TYPELESS_PACKAGE_JSON] Warning: Module type of file:///D:/Nikhil/files/JobAssignment/ticket/javascript-version/src/assets/iconify-icons/bundle-icons-css.js is not specified and it doesn't parse as CommonJS.
Reparsing as ES module because module syntax was detected. This incurs a performance overhead.
To eliminate this warning, add "type": "module" to D:\Nikhil\files\JobAssignment\ticket\javascript-version\package.json.
(Use node --trace-warnings ... to show where the warning was created)
file:///D:/Nikhil/files/JobAssignment/ticket/javascript-version/src/assets/iconify-icons/bundle-icons-css.js:23
require.resolve('@iconify/json/json/ri.json'),
^

ReferenceError: require is not defined in ES module scope, you can use import instead
at file:///D:/Nikhil/files/JobAssignment/ticket/javascript-version/src/assets/iconify-icons/bundle-icons-css.js:23:5
at ModuleJob.run (node:internal/modules/esm/module_job:271:25)
at async onImport.tracePromise.proto (node:internal/modules/esm/loader:547:26)
at async asyncRunEntryPointWithESMLoader (node:internal/modules/run_main:116:5)

Node.js v22.13.0
npm error code 1
npm error path D:\Nikhil\files\JobAssignment\ticket\javascript-version
npm error command failed
npm error command C:\WINDOWS\system32\cmd.exe /d /s /c npm run build:icons
npm error A complete log of this run can be found in: C:\Users\nikhi\AppData\Local\npm-cache_logs\2025-02-13T10_24_41_258Z-debug-0.log
PS D:\Nikhil\files\JobAssignment\ticket\javascript-version>

• History restored

PS D:\Nikhil\files\JobAssignment\ticket\javascript-version> npm install

next-app-test@0.1.0 postinstall
npm run build:icons

next-app-test@0.1.0 build:icons
tsx src/assets/iconify-icons/bundle-icons-css.js

(node:11680) [MODULE_TYPELESS_PACKAGE_JSON] Warning: Module type of file:///D:/Nikhil/files/JobAssignment/ticket/javascript-version/src/assets/iconify-icons/bundle-icons-css.js is not specified and it doesn't parse as CommonJS.
Reparsing as ES module because module syntax was detected. This incurs a performance overhead.
To eliminate this warning, add "type": "module" to D:\Nikhil\files\JobAssignment\ticket\javascript-version\package.json.
(Use node --trace-warnings ... to show where the warning was created)
file:///D:/Nikhil/files/JobAssignment/ticket/javascript-version/src/assets/iconify-icons/bundle-icons-css.js:23
require.resolve('@iconify/json/json/ri.json'),
^

ReferenceError: require is not defined in ES module scope, you can use import instead
at file:///D:/Nikhil/files/JobAssignment/ticket/javascript-version/src/assets/iconify-icons/bundle-icons-css.js:23:5
at ModuleJob.run (node:internal/modules/esm/module_job:271:25)
at async onImport.tracePromise.proto (node:internal/modules/esm/loader:547:26)
at async asyncRunEntryPointWithESMLoader (node:internal/modules/run_main:116:5)

Node.js v22.13.0
npm error code 1
npm error path D:\Nikhil\files\JobAssignment\ticket\javascript-version
npm error command failed
npm error command C:\WINDOWS\system32\cmd.exe /d /s /c npm run build:icons
npm error A complete log of this run can be found in: C:\Users\nikhi\AppData\Local\npm-cache_logs\2025-02-13T10_31_12_143Z-debug-0.log
PS D:\Nikhil\files\JobAssignment\ticket\javascript-version> npm install

next-app-test@0.1.0 postinstall
npm run build:icons

next-app-test@0.1.0 build:icons
tsx src/assets/iconify-icons/bundle-icons-css.js

file:///D:/Nikhil/files/JobAssignment/ticket/javascript-version/src/assets/iconify-icons/bundle-icons-css.js:61
const target = join(__dirname, 'generated-icons.css')
^

ReferenceError: __dirname is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and 'D:\Nikhil\files\JobAssignment\ticket\javascript-version\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
Node.js v22.13.0
npm error code 1
npm error path D:\Nikhil\files\JobAssignment\ticket\javascript-version
npm error command failed
npm error command C:\WINDOWS\system32\cmd.exe /d /s /c npm run build:icons
npm error A complete log of this run can be found in: C:\Users\nikhi\AppData\Local\npm-cache_logs\2025-02-13T10_38_45_903Z-debug-0.log
PS D:\Nikhil\files\JobAssignment\ticket\javascript-version> npm install

next-app-test@0.1.0 postinstall
npm run build:icons

next-app-test@0.1.0 build:icons
tsx src/assets/iconify-icons/bundle-icons-css.js

ReferenceError: require is not defined
at file:///D:/Nikhil/files/JobAssignment/ticket/javascript-version/src/assets/iconify-icons/bundle-icons-css.js:92:24

up to date, audited 626 packages in 9s

203 packages are looking for funding
run npm fund for details

found 0 vulnerabilities
PS D:\Nikhil\files\JobAssignment\ticket\javascript-version> npm run dev

next-app-test@0.1.0 dev
next dev

▲ Next.js 14.2.24

• Local: http://localhost:3000
• Environments: .env

✓ Starting...
✓ Ready in 5.6s
○ Compiling / ...
(node:10852) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead.
(Use node --trace-deprecation ... to show where the warning was created)
⨯ ./src/app/layout.jsx:8:1
Module not found: Can't resolve '@assets/iconify-icons/generated-icons.css'
6 |
7 | // Generated Icon CSS Imports

8 | import '@assets/iconify-icons/generated-icons.css'
| ^
9 |
10 | export const metadata = {
11 | title: 'Demo: Materio - NextJS Dashboard Free',

https://nextjs.org/docs/messages/module-not-found
⨯ ./src/app/layout.jsx:8:1
Module not found: Can't resolve '@assets/iconify-icons/generated-icons.css'
6 |
7 | // Generated Icon CSS Imports

8 | import '@assets/iconify-icons/generated-icons.css'
| ^
9 |
10 | export const metadata = {
11 | title: 'Demo: Materio - NextJS Dashboard Free',

https://nextjs.org/docs/messages/module-not-found
⨯ ./src/app/layout.jsx:8:1
Module not found: Can't resolve '@assets/iconify-icons/generated-icons.css'
6 |
7 | // Generated Icon CSS Imports

8 | import '@assets/iconify-icons/generated-icons.css'
| ^
9 |
10 | export const metadata = {
11 | title: 'Demo: Materio - NextJS Dashboard Free',

https://nextjs.org/docs/messages/module-not-found
GET / 500 in 48126ms
⨯ ./src/app/layout.jsx:8:1
Module not found: Can't resolve '@assets/iconify-icons/generated-icons.css'
6 |
7 | // Generated Icon CSS Imports

8 | import '@assets/iconify-icons/generated-icons.css'
| ^
9 |
10 | export const metadata = {
11 | title: 'Demo: Materio - NextJS Dashboard Free',

https://nextjs.org/docs/messages/module-not-found
✓ Compiled /[...not-found] in 1419ms (1038 modules)
GET /_next/static/webpack/74524c46b70632ce.webpack.hot-update.json 500 in 2862ms
⚠ Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload
GET / 500 in 40ms
PS D:\Nikhil\files\JobAssignment\ticket\javascript-version>
pnpm install
pnpm : The term 'pnpm' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the
spelling of the name, or if a path was included, verify that the path is correct and try again.
At line:1 char:1

• pnpm install

•   + CategoryInfo          : ObjectNotFound: (pnpm:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException
  
  

PS D:\Nikhil\files\JobAssignment\ticket\javascript-version> npm run dev

next-app-test@0.1.0 dev
next dev

▲ Next.js 14.2.24

• Local: http://localhost:3000
• Environments: .env

✓ Starting...
✓ Ready in 4.8s
○ Compiling / ...
⨯ ./src/app/layout.jsx:8:1
Module not found: Can't resolve '@assets/iconify-icons/generated-icons.css'
6 |
7 | // Generated Icon CSS Imports

8 | import '@assets/iconify-icons/generated-icons.css'
| ^
9 |
10 | export const metadata = {
11 | title: 'Demo: Materio - NextJS Dashboard Free',

https://nextjs.org/docs/messages/module-not-found
⨯ ./src/app/layout.jsx:8:1
Module not found: Can't resolve '@assets/iconify-icons/generated-icons.css'
6 |
7 | // Generated Icon CSS Imports

8 | import '@assets/iconify-icons/generated-icons.css'
| ^
9 |
10 | export const metadata = {
11 | title: 'Demo: Materio - NextJS Dashboard Free',

https://nextjs.org/docs/messages/module-not-found
⨯ ./src/app/layout.jsx:8:1
Module not found: Can't resolve '@assets/iconify-icons/generated-icons.css'
6 |
7 | // Generated Icon CSS Imports

8 | import '@assets/iconify-icons/generated-icons.css'
| ^
9 |
10 | export const metadata = {
11 | title: 'Demo: Materio - NextJS Dashboard Free',

https://nextjs.org/docs/messages/module-not-found
⨯ ./src/app/layout.jsx:8:1
Module not found: Can't resolve '@assets/iconify-icons/generated-icons.css'
6 |
7 | // Generated Icon CSS Imports

8 | import '@assets/iconify-icons/generated-icons.css'
| ^
9 |
10 | export const metadata = {
11 | title: 'Demo: Materio - NextJS Dashboard Free',

https://nextjs.org/docs/messages/module-not-found
GET /_next/static/webpack/74524c46b70632ce.webpack.hot-update.json 500 in 18068ms
⚠ Fast Refresh had to perform a full reload due to a runtime error.
GET / 500 in 1758ms
GET / 500 in 37ms

package.json

Additional data

If technical bug
NodeJS Version: v22.13.0
Package manager(npm|yarn|pnpm): npm
Browser name & version: edge (Latest Version)
System: Windows 11 (64bit)

package.json

[aayush-makwana]

Hi @Nikhil-Nishad,

Thank you for reaching out.

Could you please confirm if you are using the latest version of the Materio template? This information will help us better understand the issue and provide you with an accurate solution.

We appreciate your cooperation and look forward to your reply.

[Nikhil-Nishad]

I have downloaded the code from the website mentioned in the project. Link- https://themeselection.com/item/materio-free-mui-nextjs-admin-template
I have downloaded the free version.
Although the typescript version of the template working fine.

[aayush-makwana]

Hi @Nikhil-Nishad,

We’re aware that this issue is specific to the JavaScript version when using Node.js v22.x., this will be fixed in an upcoming release. In the meantime, please apply the following workaround:

1. Replace the file at:
   javascript-version/src/assets/iconify-icons/bundle-icons-css.js
2. With the bundle-icons-css.mjs file provided in the attached .zip archive.

bundle-icons-css.zip

[github-actions]

This issue has been automatically marked as stale because it has no recent activity. It will be closed if no further activity occurs. Thank you for raising the concern.

[github-actions]

This issue has been automatically marked as closed because it has no recent activity.