src/components: Is fast refresh / reload supported?

[theogravity]

I've moved most of my stuff into the src/ directory, and everything is fine except for fast refresh.

• When I modify a page in src/pages, fast refresh works.
• When modifying a component in src/components, there is no refresh or even a page reload.
• Manual page reload is fine

Anything I need to do to get this to work?

• on "next": "latest"
• Using typescript
• tailwindcss
• next-redux-wrapper

my startup script:

{
    "dev": "NODE_ENV=development ts-node --project tsconfig.server.json src/index.ts | pino-pretty",
}

calls a custom server:

import express, { Request, Response } from 'express'
import next from 'next'
import { requestContextMiddleware } from './controllers/req-context-middleware'
import { handleErrorMiddleware } from './controllers/handle-err-middleware'

const dev = process.env.NODE_ENV !== 'production'
const nextApp = next({ dev })
const handle = nextApp.getRequestHandler()
const port = process.env.PORT || 3000

export async function initApp () {
  try {
    await nextApp.prepare()
    const server = express()

    server.use(requestContextMiddleware())

    server.all('*', (req: Request, res: Response) => {
      return handle(req, res)
    })

    server.use(handleErrorMiddleware())

    server.listen(port, (err?: any) => {
      if (err) throw err
      console.log(`> Ready on localhost:${port} - env ${process.env.NODE_ENV}`)
    })
  } catch (e) {
    console.error(e)
    process.exit(1)
  }
}

The component I'm modifying is pretty simple:

export default function ThoughtStream (props) {
  return (
    <div className={'grid grid-cols-r-a-100 gap-px-2'}>
      {props.children}
    </div>
  )
}

There is nothing in the console or terminal that indicates it has detected a change.

[theogravity]

I read somewhere that deleting your node_modules dir and yarn.lock file and reinstalling fixes the issue.

And what do you know... it works now.