Fatal Issue : Unable to Setup Project (Iconify Integration & Build Issues) #32
Comments
|
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. |
|
I have downloaded the code from the website mentioned in the project. Link- https://themeselection.com/item/materio-free-mui-nextjs-admin-template |
|
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:
|
|
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. |
|
This issue has been automatically marked as closed because it has no recent activity. |
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: [email protected]
npm error Found: [email protected]
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 [email protected]
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: [email protected]
npm error Found: [email protected]
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 [email protected]
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/[email protected]: Use @eslint/config-array instead
npm warn deprecated @humanwhocodes/[email protected]: Use @eslint/object-schema instead
npm warn deprecated [email protected]: This version is no longer supported. Please see https://eslint.org/version-support for other options.
npm warn deprecated @mui/[email protected]: 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 fundfor detailsfound 0 vulnerabilities
PS D:\Nikhil\files\JobAssignment\ticket\javascript-version> "apexcharts": "^3.49.1",
PS D:\Nikhil\files\JobAssignment\ticket\javascript-version> npm install
(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>
PS D:\Nikhil\files\JobAssignment\ticket\javascript-version> npm install
(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
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
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 fundfor detailsfound 0 vulnerabilities
PS D:\Nikhil\files\JobAssignment\ticket\javascript-version> npm run dev
▲ Next.js 14.2.24
✓ Starting...
✓ Ready in 5.6s
○ Compiling / ...
(node:10852) [DEP0040] DeprecationWarning: The
punycodemodule 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
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
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
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
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
PS D:\Nikhil\files\JobAssignment\ticket\javascript-version> npm run dev
▲ Next.js 14.2.24
✓ 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
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
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
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
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
The text was updated successfully, but these errors were encountered: