Uncaught SyntaxError: Invalid or unexpected token

[jaindivij21]

Package

• [ ] lucide
• [ ] lucide-angular
• [ ] lucide-flutter
• [ ] lucide-preact
• [X] lucide-react
• [ ] lucide-react-native
• [ ] lucide-solid
• [ ] lucide-svelte
• [ ] lucide-vue
• [ ] lucide-vue-next
• [ ] Figma plugin
• [ ] source/main
• [ ] other/not relevant

Version

0.303.0

Browser

• [X] Chrome/Chromium
• [ ] Firefox
• [ ] Safari
• [ ] Edge
• [ ] iOS Safari
• [ ] Opera
• [ ] Other/not relevant

Operating system

• [ ] Windows
• [ ] Linux
• [X] macOS
• [ ] Other/not relevant

Description

I encounter a SyntaxError in my Next.js v14.0.4 project when using lucide-react for icons. The error specifically points to a file named dynamicIconImports.js within the lucide-react package. The error message is as follows:

layout.js:150 Uncaught SyntaxError: Invalid or unexpected token (at layout.js:150:29)

Upon investigating the layout.js file, it appears that the issue is associated with the dynamicIconImports.js file from lucide-react. The problematic code snippet in layout.js:150 is part of an eval statement about importing dynamic icon data.

layout.js. : build output or the generated JavaScript bundle for my project's excerpt:

/***/ "(app-pages-browser)/./node_modules/lucide-react/dynamicIconImports.js":
/*!*********************************************************!*\
  !*** ./node_modules/lucide-react/dynamicIconImports.js ***!
  \*********************************************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
  "use strict";
  eval(__webpack_require__.ts("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ ..........

The peculiar aspect of this issue is that the error only occurs during the initial render, the first load of the application. Subsequent reloads resolve the issue and the application functions as expected with no syntax errors.

Additional Information:

• The error disrupts the execution of client-side JavaScript during the initial render, affecting dynamic functionality.
• The issue is not present upon subsequent reloads, suggesting a possible race condition or timing-related problem.

Environment: Next.js Version: 14.0.4 Lucide-React Version: 0.303.0 Node.js Version: 21.4.0

Note: I am a novice in troubleshooting such issues, so any guidance or assistance in resolving this would be greatly appreciated. Thank you!

Steps to reproduce

1. Create a Next.js v14.0.4 project.
2. Install lucide-react for icons.
3. Incorporate lucide-react icons in the project.
4. Observe the SyntaxError during the initial render.

For better insight into my code, you can clone and check my repository.

Checklist

• [X] I have searched if someone has submitted a similar issue before and there weren't any. (Please make sure to also search closed issues, as this issue might already have been resolved.)