Skip to content

[@vitejs/plugin-react] VS Code Breakpoints do not get hit after first fast refresh in plugin-react in new project #23

@sevenfields-matt

Description

@sevenfields-matt

Describe the bug

After creating a brand new Vite project using create-vite(yarn create vite) breakpoints in VS Code do not get hit after the first change and refresh.

Refresh meaning the fast HMR refresh. The app refreshes well in the browser but it leaves the VS Code debugger in an unusable state.

Refreshing the browser, or refresh through VS Code allows breakpoints until the next refresh.

Reproduction

Reproduce:

  1. Create a react-ts vite project using yarn create vite
  2. run yarn dev
  3. Inside of VS Code create the following launch.json:
{
	// Use IntelliSense to learn about possible attributes.
	// Hover to view descriptions of existing attributes.
	// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
	"version": "0.2.0",
	"configurations": [
		{
			"name": "Launch Chrome",
			"request": "launch",
			"type": "pwa-chrome",
			"url": "http://localhost:3000",
			"webRoot": "${workspaceFolder}"
		}
	]
}
  1. Place a breakpoint on
  const [count, setCount] = useState(0)
  1. Debug the app in vs code
  2. Notice your breakpoint is hit
  3. Change the line "Hello Vite + React" to "Test breakpoint" and save
  4. Notice the app has successfully updated in the browser
  5. Notice that your breakpoint is not hit
  6. Refresh the page and notice your breakpoint is now hit

System Info

System:
    OS: Windows 10 10.0.19041
    CPU: (12) x64 AMD Ryzen 5 3600XT 6-Core Processor

    Memory: 2.59 GB / 15.91 GB
  Binaries:
    Node: 14.15.4 - C:\apps\dev\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.10 - C:\apps\dev\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1023.0), Chromium (93.0.961.47)
    Internet Explorer: 11.0.19041.1202

Used Package Manager

yarn

Logs

No response

Validations

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions