.ts files don't seem to hot reload

rbhalla commented 1 year ago

Build tool

Vite

Where do you see the problem?

[X] In the browser
[ ] In the terminal

Describe the bug

When importing a .ts file, an update doesn't seem to result in an update to the build folder. Restarting the build process does update the file.

Reproduction

Reproduction here: https://github.com/rbhalla/crxjs-bug-repro/tree/ts-not-updating

You can compare to the main branch to see what I needed to add to the basic starter repo to get this working.

After checking out, just run npm run dev. Then go to src/test.ts and update the object literal. You'll notice that in the dist folder, the test.ts.js file did not change. Cancelling the process and restarting it will update the file.

Logs

N/A

System Info

System:
    OS: macOS 12.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 272.97 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 15.10.0 - ~/.nvm/versions/node/v15.10.0/bin/node
    npm: 7.5.3 - ~/.nvm/versions/node/v15.10.0/bin/npm
  Browsers:
    Chrome: 108.0.5359.124
    Safari: 16.0
  npmPackages:
    @crxjs/vite-plugin: ^1.0.14 => 1.0.14
    vite: ^2.9.0 => 2.9.15

Severity

annoyance

rbhalla commented 1 year ago

Anecdotally, I am also seeing this sometimes affect .tsx files, but I can't seem to reproduce this reliably in the example repo I have.

Another odd observation though, is that sometimes a duplicate .tsx file is being created. For example, if the file is called App.tsx in the dist folder I am seeing App.tsx.js, and then when I make a change, a new App.tsx2.js file appears. Neither of the files actually have the change. The new App.tsx2.js contains the built code from before the change!

Lastly, when I delete either of those files and make a new change, vite immediately crashes with the following error:

/Users/rbhalla/dev/chrome_extension/node_modules/@crxjs/vite-plugin/dist/index.cjs:711
            throw err;
            ^

Error: ENOENT: no such file or directory, stat 'dist/src/app/helpers/AuthContext.tsx2.js'
    at Object.statSync (node:fs:1132:3)
    at /Users/rbhalla/dev/chrome_extension/node_modules/graceful-fs/polyfills.js:319:16
    at /Users/rbhalla/dev/chrome_extension/node_modules/@crxjs/vite-plugin/dist/index.cjs:2180:19
    at Array.every (<anonymous>)
    at /Users/rbhalla/dev/chrome_extension/node_modules/@crxjs/vite-plugin/dist/index.cjs:2179:38
    at /Users/rbhalla/dev/chrome_extension/node_modules/@crxjs/vite-plugin/dist/index.cjs:2101:72
    at /Users/rbhalla/dev/chrome_extension/node_modules/@crxjs/vite-plugin/dist/index.cjs:2000:99
    at OperatorSubscriber._this._next (/Users/rbhalla/dev/chrome_extension/node_modules/@crxjs/vite-plugin/dist/index.cjs:1067:21)
    at OperatorSubscriber.Subscriber.next (/Users/rbhalla/dev/chrome_extension/node_modules/@crxjs/vite-plugin/dist/index.cjs:778:18)
    at /Users/rbhalla/dev/chrome_extension/node_modules/@crxjs/vite-plugin/dist/index.cjs:1868:24
    at OperatorSubscriber._this._next (/Users/rbhalla/dev/chrome_extension/node_modules/@crxjs/vite-plugin/dist/index.cjs:1067:21)
    at OperatorSubscriber.Subscriber.next (/Users/rbhalla/dev/chrome_extension/node_modules/@crxjs/vite-plugin/dist/index.cjs:778:18)
    at AsyncAction.<anonymous> (/Users/rbhalla/dev/chrome_extension/node_modules/@crxjs/vite-plugin/dist/index.cjs:1967:28)
    at AsyncAction._execute (/Users/rbhalla/dev/chrome_extension/node_modules/@crxjs/vite-plugin/dist/index.cjs:1399:18)
    at AsyncAction.execute (/Users/rbhalla/dev/chrome_extension/node_modules/@crxjs/vite-plugin/dist/index.cjs:1387:26)
    at AsyncScheduler.flush (/Users/rbhalla/dev/chrome_extension/node_modules/@crxjs/vite-plugin/dist/index.cjs:1460:33)
    at listOnTimeout (node:internal/timers:557:17)
    at processTimers (node:internal/timers:500:7) {
  errno: -2,
  syscall: 'stat',
  code: 'ENOENT',
  path: 'dist/src/app/helpers/AuthContext.tsx2.js'
}

(In this case the file was AuthContext.tsx)

The reason I give the stack trace, is because this is the only reference in the terminal I can see to a second file being created. If I run vite in debug mode, I don't see any reference to the v2 file.

Does anyone have any idea what might be going on here?

rbhalla commented 1 year ago

I'm moving this second comment to its own issue, since it seems to be getting weirder: https://github.com/crxjs/chrome-extension-tools/issues/624

crxjs / chrome-extension-tools