Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React component in node_modules doesn't fast-refresh #18102

Closed
7 tasks done
Jinjiang opened this issue Sep 13, 2024 · 2 comments
Closed
7 tasks done

React component in node_modules doesn't fast-refresh #18102

Jinjiang opened this issue Sep 13, 2024 · 2 comments
Labels
duplicate This issue or pull request already exists

Comments

@Jinjiang
Copy link
Contributor

Describe the bug

The case is I'd like to support fast-refresh for React components in node_modules.

For example a React component in package foo, I've configured as:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { createRequire } from 'module'

const require = createRequire(import.meta.url);

const packages = ['foo']

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    watch: {
      ignored: packages.map((p) => `!**/node_modules/${p}/**`)
    }
  },
  optimizeDeps: {
    entries: packages.map((p) => require.resolve(p)),
    exclude: packages
  },
  plugins: [react()],
})

From what I've tested so far:

  • On macOS it works as expected. When I modify the React component. The UI updates immediately.
  • However, on GitHub Codespaces, or WSL (Windows Subsystem for Linux), nothing happens after I modify it.
  • In @teambit, we have a self-maintained Cloud Workspace service, quite like GitHub Codespaces. It doesn't work on there neither.

Reproduction

https://github.com/Jinjiang/reproductions/tree/vite-watch-node-modules-20240913

Steps to reproduce

How to reproduce:

pnpm install
pnpm dev

then modify ./node_modules/foo/index.js:

  • on macOS the fast refresh works
  • on GitHub Codespace the UI doesn't update at all
  • on WSL the UI doesn't update at all (even with { usePolling: true })

System Info

System:
    OS: Linux 6.5 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (2) x64 AMD EPYC 7763 64-Core Processor
    Memory: 4.64 GB / 7.74 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 20.16.0 - ~/nvm/current/bin/node
    Yarn: 1.22.22 - /usr/bin/yarn
    npm: 10.8.1 - ~/nvm/current/bin/npm
    pnpm: 9.7.1 - ~/nvm/current/bin/pnpm
  npmPackages:
    @vitejs/plugin-react: ^4.3.1 => 4.3.1 
    vite: ^5.4.1 => 5.4.4

Used Package Manager

pnpm

Logs

No response

Validations

@hi-ogawa
Copy link
Collaborator

I thought this is expected, but just confirmed it's not working on my Linux PC either.
Also, it even requires server restart + devtool disable cache to have a new code on browser after modifying ./node_modules/foo/index.js.

@sapphi-red
Copy link
Member

The file add event seems to be not called.

Duplicate of #8619

@sapphi-red sapphi-red closed this as not planned Won't fix, can't repro, duplicate, stale Sep 17, 2024
@sapphi-red sapphi-red added duplicate This issue or pull request already exists and removed pending triage labels Sep 17, 2024
@github-actions github-actions bot locked and limited conversation to collaborators Oct 2, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
duplicate This issue or pull request already exists
Projects
None yet
Development

No branches or pull requests

3 participants