Hot Reload not working after an error in NextJS 14 with App Router

[theaafofficial]

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 | <h1 className="text-md font-bold">Order Items 148 |

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.

[github-actions[bot]]

Thanks for opening this issue! A maintainer will review it soon.

[tobySolutions]

Could you provide screenshots @theaafofficial? I'm going to need a walkthrough of your setup and I'll still need a reproduction though.

Is it that your application totally crashes and doesn't work again?

[theaafofficial]

sure, what kinda screenshots do you need? and to your question, no the application doesn't crash, it still runs fine. but whenever I make a change in code, it doesn't reflect in the app due to broken hot-reload ig.

[tobySolutions]

sure, what kinda screenshots do you need? and to your question, no the application doesn't crash, it still runs fine. but whenever I make a change in code, it doesn't reflect in the app due to broken hot-reload ig.

The error, your next config and to clarify you are using automatic mode, right?

[theaafofficial]

Yes, auto.

config file

Flow of error:

• just removed ">"
• got the error:
• added it ">" back: but the error is still there, it doesn't reload, which isn't a good development experience.

[tobySolutions]

Yes, auto.

config file

Flow of error:

• just removed ">"
• got the error:
• added it ">" back: but the error is still there, it doesn't reload, which isn't a good development experience.

Thanks for this. I'll discuss this with core team and have conversations with them. Thanks for this, a lot of things like this will be fixed in Million 3.0 though

[theaafofficial]

Thank you, I noticed one more thing, what compiled initially(like a homepage compiled) works fine after that error but if I click on the page that wasn't compiled before, it gets stuck on compiling

[tobySolutions]

Thank you, I noticed one more thing, what compiled initially(like a homepage compiled) works fine after that error but if I click on the page that wasn't compiled before, it gets stuck on compiling

Hmm, that's certainly weird.

[skushagra9]

please assign me @tobySolutions

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs within the next 7 days.

[jahirfiquitiva]

I am facing the same issue with Million.js 2.6.4 ... I haven't been able to use 3.x due to another error: https://github.com/aidenybai/million/issues/936

[lxsmnsyc]

It's weird. This only happens if you do example={} in the JSX. I don't think this is fixable as the error is expected.

Without any repros, I can't look into this further.

[FlorianLeChat]

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.

 ⨯ unhandledRejection: SyntaxError: C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\app\[locale]\dashboard\components\share-manager.tsx: Unexpected token (88:8)

  86 |                                                  <Check className="h-4 w-4" />
  87 |                                                  </span>
> 88 |                                                  )}
     |                                                   ^
  89 |
  90 |                                  <ClipboardCopy className="mr-2 h-4 w-4" />
  91 |                                  Copier
    at constructor (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:353:19)
    at TypeScriptParserMixin.raise (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:3277:19)
    at TypeScriptParserMixin.unexpected (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:3297:16)
    at TypeScriptParserMixin.checkExpressionErrors (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:3677:12)
    at TypeScriptParserMixin.parseMaybeAssign (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:10370:12)
    at TypeScriptParserMixin.parseMaybeAssign (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:9405:20)
    at TypeScriptParserMixin.parseExpressionBase (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:10292:23)
    at C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:10288:39
    at TypeScriptParserMixin.allowInAnd (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:11926:12)
    at TypeScriptParserMixin.parseExpression (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:10288:17)
    at TypeScriptParserMixin.jsxParseExpressionContainer (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:6687:31)
    at TypeScriptParserMixin.jsxParseElementAt (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:6766:36)
    at TypeScriptParserMixin.jsxParseElementAt (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:6753:32)
    at TypeScriptParserMixin.jsxParseElementAt (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:6753:32)
    at TypeScriptParserMixin.jsxParseElement (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:6804:17)
    at TypeScriptParserMixin.parseExprAtom (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:6816:19)
    at TypeScriptParserMixin.parseExprSubscripts (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:10580:23)
    at TypeScriptParserMixin.parseUpdate (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:10563:21)
    at TypeScriptParserMixin.parseMaybeUnary (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:10541:23)
    at TypeScriptParserMixin.parseMaybeUnary (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:9456:18)
    at TypeScriptParserMixin.parseMaybeUnaryOrPrivate (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:10395:61)
    at TypeScriptParserMixin.parseExprOps (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:10400:23)
    at TypeScriptParserMixin.parseMaybeConditional (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:10377:23)
    at TypeScriptParserMixin.parseMaybeAssign (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:10338:21)
    at C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:9394:39
    at TypeScriptParserMixin.tryParse (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:3608:20)
    at TypeScriptParserMixin.parseMaybeAssign (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:9394:18)
    at C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:10308:39
    at TypeScriptParserMixin.allowInAnd (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:11926:12)
    at TypeScriptParserMixin.parseMaybeAssignAllowIn (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:10308:17)
    at TypeScriptParserMixin.parseParenAndDistinguishExpression (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:11189:28)
    at TypeScriptParserMixin.parseExprAtom (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:10847:23)
    at TypeScriptParserMixin.parseExprAtom (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:6821:20)
    at TypeScriptParserMixin.parseExprSubscripts (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:10580:23)
    at TypeScriptParserMixin.parseUpdate (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:10563:21)
    at TypeScriptParserMixin.parseMaybeUnary (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:10541:23)
    at TypeScriptParserMixin.parseMaybeUnary (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:9456:18)
    at TypeScriptParserMixin.parseMaybeUnaryOrPrivate (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:10395:61)
    at TypeScriptParserMixin.parseExprOps (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:10400:23)
    at TypeScriptParserMixin.parseMaybeConditional (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:10377:23)
    at TypeScriptParserMixin.parseMaybeAssign (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:10338:21)
    at TypeScriptParserMixin.parseMaybeAssign (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:9405:20)
    at TypeScriptParserMixin.parseExpressionBase (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:10292:23)
    at C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:10288:39
    at TypeScriptParserMixin.allowInAnd (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:11921:16)
    at TypeScriptParserMixin.parseExpression (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:10288:17)
    at TypeScriptParserMixin.parseReturnStatement (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:12609:28)
    at TypeScriptParserMixin.parseStatementContent (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:12260:21)
    at TypeScriptParserMixin.parseStatementContent (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:9132:18)
    at TypeScriptParserMixin.parseStatementLike (C:\Users\Megaport\Documents\GitHub\Simple-File-Storage\node_modules\@babel\parser\lib\index.js:12229:17) {
  code: 'BABEL_PARSE_ERROR',
  reasonCode: 'UnexpectedToken',
  loc: Position { line: 88, column: 8, index: 2441 },
  pos: 2441
}

[Prains]

Have the same issue here.

Appeared for me when i wrote incomplete useState initializer.

Hot reload became disabled and dev server could not compile other pages until i reloaded fully

[Prains]

Dig further into the problem:

Error occurs only when incorrect client component file was saved and put to change to the dev server.

Whenever dev server that uses million js compiler finds an error in client component, hot reload dying and compiler stops working with other components, forcing dev to restart the server.

Right now it is a serious DX issue and i have to uninstall compiler so i can develop my project without any further troubles

[tobySolutions]

Dig further into the problem:

Error occurs only when incorrect client component file was saved and put to change to the dev server.

Whenever dev server that uses million js compiler finds an error in client component, hot reload dying and compiler stops working with other components, forcing dev to restart the server.

Right now it is a serious DX issue and i have to uninstall compiler so i can develop my project without any further troubles

Hmm, thank you for sharing this; you can also help by providing us with steps to reproduce this, but, i will also share this with the team too.

[Prains]

Dig further into the problem: Error occurs only when incorrect client component file was saved and put to change to the dev server. Whenever dev server that uses million js compiler finds an error in client component, hot reload dying and compiler stops working with other components, forcing dev to restart the server. Right now it is a serious DX issue and i have to uninstall compiler so i can develop my project without any further troubles

Hmm, thank you for sharing this; you can also help by providing us with steps to reproduce this, but, i will also share this with the team too.

Steps to reproduce:

1. install next js using npx create-next-app@latest install app with app router, typescript and tailwind, without src folder.

2. create any client component ('use client')

3. create any syntax \ typescript error and save file

4. 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

[Aslemammad]

Can we have a stackblitz reproduction?

[Prains]

Can we have a stackblitz reproduction?

https://stackblitz.com/edit/stackblitz-starters-f7sykc?file=app%2Fpage.tsx

Comment the syntax error line, start development server, uncomment syntax error, get rid of line that causes error and try to edit page content

[Aslemammad]

@Prains #973 should fix it.

[Prains]

@Prains #973 should fix it.

Thank you! Will be happy to check after pull request will get merged

[Aslemammad]

Sure, I appreciate your help!