solidjs / solid-refresh

MIT License
86 stars 18 forks source link

HMR duplicates component on page #43

Closed drgarlic closed 1 year ago

drgarlic commented 1 year ago

Describe the bug

Hi !

I just initialized a new a TS project with the almost default index.tsx (it's not important but I suppose you may want to see it)

/* @refresh reload */
import { render } from 'solid-js/web'

import './styles/main.css'

import App from './app'

const root = document.getElementById('root')

if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
  throw new Error(
    'Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?'
  )
}

render(() => <App />, root!)

The problem is that with the following the following app/index.tsx

export default () => {
  console.log('run app/index.tsx')
  return <div>hey</div>
}

Which don't happen with the following code:

const App = () => {
  console.log('run app/index.tsx')
  return <div>hey</div>
}

export default App

Your Example Website or App

.

Steps to Reproduce the Bug or Issue

app/index.tsx

export default () => {
  console.log('run app/index.tsx')
  return <div>hey</div>
}

Expected behavior

Not duplicate

Screenshots or Videos

https://github.com/solidjs/solid/assets/32246972/140ec1b2-0120-4de9-a49f-096e145d60bf

Platform

Additional context

No response

Debbl commented 1 year ago

Based on the code you provided, it seems that I did not reproduce your issue, this may be a hot update issue with Vite. Can you still repeat this issue when you refresh the page?

lxsmnsyc commented 1 year ago
export default () => {
  console.log('run app/index.tsx')
  return <div>hey</div>
}

is not a component solid-refresh can manage, see: https://github.com/solidjs/solid-refresh#how-it-works

drgarlic commented 1 year ago

@lxsmnsyc thanks, read it then forgot about it ! (if it's possible it would great if it wouldn't allow such files)

This was just a reproduction, I'll update my codebase and see if it'll fix all the reload duplicates

lxsmnsyc commented 1 year ago

it would great if it wouldn't allow such files

solid-refresh doesn't do anything if it can't manage the component.

drgarlic commented 1 year ago

Noted.

I confirm that exporting named functions works much better, I suppose it's better practice anyway.

Thanks again !