million: Hot Reload not working after an error in NextJS 14 with App Router
What version of million are you using?
2.6.4
Are you using an SSR adapter? If so, which one?
Vercel
What package manager are you using?
npm
What operating system are you using?
Windows
What browser are you using?
Chrome
Describe the Bug
Whenever an error occurs, hot-reload stops working and gets stuck there. This is an error ⨯ unhandledRejection: SyntaxError: D:\codebase\pod-webapp\src\app\home\orders\detail\page.jsx: JSX attributes must only be assigned a non-empty expression. (149:65)
147 |
Order Items
148 | </div>149 | <Accordion title="Order Items" defaultExpandedKeys={}> | ^ 150 | {order?.order_items?.map((item) => { 151 | return ( 152 | <AccordionItem at constructor (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:356:19) at JSXParserMixin.raise (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:3223:19) at JSXParserMixin.jsxParseAttributeValue (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:6762:16) at JSXParserMixin.jsxParseAttribute (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:6813:38) at JSXParserMixin.jsxParseOpeningElementAfterName (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:6827:28) at JSXParserMixin.jsxParseOpeningElementAt (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:6822:17) at JSXParserMixin.jsxParseElementAt (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:6846:33) at JSXParserMixin.jsxParseElementAt (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:6858:32) at JSXParserMixin.jsxParseElementAt (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:6858:32) at JSXParserMixin.jsxParseElementAt (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:6858:32) at JSXParserMixin.jsxParseElementAt (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:6858:32) at JSXParserMixin.jsxParseElementAt (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:6858:32) at JSXParserMixin.jsxParseElement (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:6915:17) at JSXParserMixin.parseExprAtom (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:6927:19) at JSXParserMixin.parseExprSubscripts (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:10857:23) at JSXParserMixin.parseUpdate (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:10840:21) at JSXParserMixin.parseMaybeUnary (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:10816:23) at JSXParserMixin.parseMaybeUnaryOrPrivate (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:10654:61) at JSXParserMixin.parseExprOps (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:10659:23) at JSXParserMixin.parseMaybeConditional (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:10636:23) at JSXParserMixin.parseMaybeAssign (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:10597:21) at D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:10567:39 at JSXParserMixin.allowInAnd (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:12284:12) at JSXParserMixin.parseMaybeAssignAllowIn (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:10567:17) at JSXParserMixin.parseParenAndDistinguishExpression (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:11499:28) at JSXParserMixin.parseExprAtom (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:11137:23) at JSXParserMixin.parseExprAtom (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:6932:20) at JSXParserMixin.parseExprSubscripts (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:10857:23) at JSXParserMixin.parseUpdate (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:10840:21) at JSXParserMixin.parseMaybeUnary (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:10816:23) at JSXParserMixin.parseMaybeUnaryOrPrivate (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:10654:61) at JSXParserMixin.parseExprOps (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:10659:23) at JSXParserMixin.parseMaybeConditional (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:10636:23) at JSXParserMixin.parseMaybeAssign (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:10597:21) at JSXParserMixin.parseExpressionBase (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:10551:23) at D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:10547:39 at JSXParserMixin.allowInAnd (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:12279:16) at JSXParserMixin.parseExpression (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:10547:17) at JSXParserMixin.parseReturnStatement (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:13003:28) at JSXParserMixin.parseStatementContent (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:12621:21) at JSXParserMixin.parseStatementLike (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:12588:17) at JSXParserMixin.parseStatementListItem (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:12568:17) at JSXParserMixin.parseBlockOrModuleBlockBody (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:13189:61) at JSXParserMixin.parseBlockBody (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:13182:10) at JSXParserMixin.parseBlock (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:13170:10) at JSXParserMixin.parseFunctionBody (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:11935:24) at JSXParserMixin.parseFunctionBodyAndFinish (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:11921:10) at D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:13318:12 at JSXParserMixin.withSmartMixTopicForbiddingContext (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:12261:14) at JSXParserMixin.parseFunction (D:\codebase\pod-webapp\node_modules@babel\parser\lib\index.js:13317:10) { code: ‘BABEL_PARSE_ERROR’, reasonCode: ‘AttributeIsEmpty’, syntaxPlugin: ‘jsx’, loc: Position { line: 149, column: 65, index: 5382 }, pos: 5382 }
What’s the expected result?
After disabling million in next.config.js I get this, I guess it should work like that
./src/app/home/orders/detail/page.jsx ⚠ Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload ✓ Compiled /_error in 4.9s (3228 modules) ⚠ Fast Refresh had to perform a full reload due to a runtime error.
Link to Minimal Reproducible Example
cant seem to install next 14.0.4 on stackblitz
Participation
- I am willing to submit a pull request for this issue.
About this issue
- Original URL
- State: closed
- Created 6 months ago
- Reactions: 4
- Comments: 22 (6 by maintainers)
Steps to reproduce:
install next js using npx create-next-app@latest install app with app router, typescript and tailwind, without src folder.
create any client component (‘use client’)
create any syntax \ typescript error and save file
page should display your error, compiler should display custom million.js typescript error, when navigating through pages console should tell you that some page is compiling, but page should not reload and page compiling will be stuck
@Prains #973 should fix it.
I have the same issue with latest version of NextJS 14 and Million but can’t find a consistent reproduction path. Sometimes this error disappears for a while after restarting my NextJS local server, but reappears after several hot reloads. This is a strange message in itself, because it referred to a piece of code I’d just modified and which is now completely error-free.
Yes, auto.
config file
Flow of error: