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

Hot reload not reloading for aliased imports #6235

Closed
zachbryant opened this issue May 6, 2021 · 7 comments
Closed

Hot reload not reloading for aliased imports #6235

zachbryant opened this issue May 6, 2021 · 7 comments

Comments

@zachbryant
Copy link

zachbryant commented May 6, 2021

🐛 bug report

I'm attempting to run the parcel dev server using a resolver I wrote for typescript tsconfig paths. However, the watcher does not detect changes in files resolved through an alias. You can see my repo here.

Update: updating my resolver to use absolute paths (in place of relative to the src root) fixes the watcher (albeit with significant performance drop), but the reload part of hot-reloading continues to be an issue.

🎛 Configuration (.babelrc, package.json, cli command)

Running parcel src/index.html to start. No babel configuration.

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"]
  },
  "validators": {
    "*.{ts,tsx}": ["@parcel/validator-typescript"]
  },
  "resolvers": ["...", "parcel-resolver-tspaths"],
  "reporters": ["...", "@parcel/reporter-bundle-analyzer"]
}

🤔 Expected Behavior

Parcel should hot-reload when changes are made in a file referenced through a resolved alias.

😯 Current Behavior

Changes are not detected not reloaded in files referenced through a resolved alias. No error.

💁 Possible Solution

I believe HMR should function the same as a build when it comes to resolving files.

🔦 Context

The context is that my index.ts imports from @components/App, which is aliased in my tsconfig.js. This builds fine, and I don't want to move my paths to package.json

💻 Code Sample

My repo: https://github.com/zachbryant/react-starter

Specifically, look in src/index.tsx and arc/components/App.tsx.

🌍 Your Environment

Software Version(s)
Parcel 2.0.0-beta.3.1
Node v14.16.0
npm/Yarn yarn 1.22.5
Operating System Ubuntu 20.04 64bit
@zachbryant
Copy link
Author

Updated environment from beta 2 to 3.1 since this has persisted

@vdtrung
Copy link

vdtrung commented Jun 19, 2021

Maybe you're using WSL2, I don't know but I have the same issue then I change back to use WSL1, and it's worked.

To see what WSL version are you on (open PowerShell by admin):
wsl --list --verbose - if you're in version 2 then try to go back version 1 by wsl --set-version <distribution name> 1

@zachbryant
Copy link
Author

zachbryant commented Jun 20, 2021

Maybe you're using WSL2, I don't know but I have the same issue then I change back to use WSL1, and it's worked.

To see what WSL version are you on (open PowerShell by admin):
wsl --list --verbose - if you're in version 2 then try to go back version 1 by wsl --set-version <distribution name> 1

I'm using Ubuntu, but perhaps something changed in your Linux subsystem configuration when you made the switch. In any case I don't have this issue with other bundlers, so I think it's a parcel related issue.

@zachbryant zachbryant changed the title HMR doesn't account for resolver Hot reload not resolving aliased imports Jun 20, 2021
@devongovett
Copy link
Member

Two problems I see:

  1. You should probably have your custom resolver run before the default rather than after. Resolvers short circuit - the first plugin that returns a result wins.

  2. I didn't run your code but just glancing at your plugin make sure it returns an absolute path, not a relative one. Otherwise watching won't work.

@zachbryant
Copy link
Author

Two problems I see:

  1. You should probably have your custom resolver run before the default rather than after. Resolvers short circuit - the first plugin that returns a result wins.

  2. I didn't run your code but just glancing at your plugin make sure it returns an absolute path, not a relative one. Otherwise watching won't work.

Thanks for the suggestions Devon, I'll check these out and report back

@zachbryant
Copy link
Author

zachbryant commented Jun 23, 2021

@devongovett, I tried your suggestions and point 2 was part of the issue. I really appreciate you sharing it! Although I don't understand why parcel needs a full path vs relative to the project root. AFAICT, this nuance needs documented.

Now that it's working, a few things stick out to me:

  • The behavior is similar to hot reload or hot module replacement not working with electron #6229: it builds files resolved by my plugin, but does not reload when they change. When I edit unaliased files like index.tsx all changes appear in browser as expected.
  • Using absolute paths, cold build time (cached or not) spikes by 21x and rebuilds by 3x. I checked if it's resolving the paths that causes this, but it must be something internal to parcel. With relative paths I get 1.5s build/~500ms reload time, compared to 21s build/1.5s reload time. I wonder if optimization using relative paths is possible here?

For point 1, I was aware that it short circuits, but in the past this caused some errors. Seems it's been fixed in beta 3.1 :)

@zachbryant zachbryant changed the title Hot reload not resolving aliased imports Hot reload not reloading for aliased imports Jun 28, 2021
@zachbryant
Copy link
Author

Seems like this was fixed in the v2 release. Closing now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants