Parcel: When migrating to Typescript, renaming file.jsx to file.tsx breaks parcel serve until cache is deleted

[FreyrThorv]

🐛 bug report

I'm migrating my front end codebase to typescript one file at a time when this issue cropped up.

While parcel serve is running, if I have an import without a file extension such as:

import Dashboard from "./components/Dashboard";

Normally, it will resolve the file whether or not it's a .jsx or .tsx file. However, if I change the file from Dashboard.jsx to Dashboard.tsx the reloaded build will display the following error:

🚨  Cannot read property 'type' of undefined
    at Bundler.createBundleTree (/Users/user/project/node_modules/parcel-bundler/src/Bundler.js:654:54)
    at Bundler.createBundleTree (/Users/user/project/node_modules/parcel-bundler/src/Bundler.js:721:12)
    at Bundler.createBundleTree (/Users/user/project/node_modules/parcel-bundler/src/Bundler.js:721:12)
    at Bundler.createBundleTree (/Users/user/project/node_modules/parcel-bundler/src/Bundler.js:721:12)
    at Bundler.createBundleTree (/Users/user/project/node_modules/parcel-bundler/src/Bundler.js:721:12)
    at Bundler.bundle (/Users/user/project/node_modules/parcel-bundler/src/Bundler.js:298:14)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

Then, the second time the bundler runs it'll error out with the following:

🚨  /Users/user/project/app/components/Dashboard.jsx: ENOENT: no such file or directory, open '/Users/user/project/app/components/Dashboard.jsx'
Error: ENOENT: no such file or directory, open '/Users/user/project/app/components/Dashboard.jsx'

If I exit the bundler, and re run the command, the same "no such file or directory" error crops up until I either:

1. Delete the .cache folder and re-run parcel serve
2. Make a change to the files which are importing the component. So if index.jsx is importing dashboard.tsx, I need to make a change to the index.jsx file to fix the bug. Making a change to Dashboard.tsx does nothing.

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

The command I used is:
parcel serve app/200.html --out-dir backend/public/

🤔 Expected Behavior

Expected Parcel to dynamically figure out that the import was for a typescript file without specifically reloading the file(s) doing the importing or deleting the cache.

😯 Current Behavior

if I change the file from Dashboard.jsx to Dashboard.tsx the reloaded build will display the following error:

🚨  Cannot read property 'type' of undefined
    at Bundler.createBundleTree (/Users/user/project/node_modules/parcel-bundler/src/Bundler.js:654:54)
    at Bundler.createBundleTree (/Users/user/project/node_modules/parcel-bundler/src/Bundler.js:721:12)
    at Bundler.createBundleTree (/Users/user/project/node_modules/parcel-bundler/src/Bundler.js:721:12)
    at Bundler.createBundleTree (/Users/user/project/node_modules/parcel-bundler/src/Bundler.js:721:12)
    at Bundler.createBundleTree (/Users/user/project/node_modules/parcel-bundler/src/Bundler.js:721:12)
    at Bundler.bundle (/Users/user/project/node_modules/parcel-bundler/src/Bundler.js:298:14)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

Then, the second time the bundler runs it'll error out with the following:

🚨  /Users/user/project/app/components/Dashboard.jsx: ENOENT: no such file or directory, open '/Users/user/project/app/components/Dashboard.jsx'
Error: ENOENT: no such file or directory, open '/Users/user/project/app/components/Dashboard.jsx'

If I exit the bundler, and re run the command, the same error crops up until I delete the cache.

💁 Possible Solution

Given the work arounds, this seems to be an issue with how you're doing caching.

🔦 Context

Initially I thought that the mistake was in my code and that the component was being imported from somewhere where I hadn't changed the file ending. So I trolled through my code base to find the import mentioned in the error. Nothing came up. It wasn't until I ran parcel build that I wised up and realised this had to do with Parcel's caching mechanism.

One way to mitigate this issue and future issues is to show from where the import is failing, not just the file that the bundler is trying to import. Something like this:

🚨 /Users/user/project/app/components/Main.jsx:  /Users/user/project/app/components/Dashboard.jsx: ENOENT: no such file or directory, open '/Users/user/project/app/components/Dashboard.jsx'

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.12.4
| Node | 10.16.0
| npm/Yarn | v6.9.0
| Operating System | macOS Catalina, 10.15.3

[DeMoorJasper]

I can confirm this happens in both Parcel 1 and Parcel 2 as I've experienced this in both. Hopefully we can figure out a good way to fix this for Parcel 2

[mischnic]

For Parcel 2, once https://github.com/parcel-bundler/parcel/pull/4997 is merged, the default resolver can be updated to track all file changes.

[devongovett]

@DeMoorJasper are you sure you can reproduce this in Parcel 2? I'm trying to write a test for it but it seems to be passing without any changes.

[DeMoorJasper]

@devongovett yes it still happens (although less explicit than in Parcel 1, which is probably even worse?), just tested it with latest v2, builds do pass but the references do end being incorrect because sourcemap throws a warning:

@parcel/reporter-sourcemap-visualiser: Error while loading content of ./src/message.js, ENOENT: no such file or directory, open '/Users/jasperdemoor/Documents/open-source/parcel/packages/examples/kitchen-sink/src/message.js'

Also if the file content gets modified Parcel doesn't catch it, so it's probably just Parcel using the cached version for the build without checking if the file actually still exists.

Steps to reproduce in kitchen-sink example (I also commented out the async imports because they're broken):

• Clear cache
• Do a build or serve
• Change message.js to message.ts
• Nothing happens and Parcel will use the cached version of a file that no longer exists (message.js)
• Change content of message.ts, still nothing happens
• Changing content of index.js also doesn't retrigger any file searching