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.

Sign up for GitHub

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

Jump to bottom

Path Aliases Not Working on node targets #9519

Open
chin2km opened this issue Feb 2, 2024 · 1 comment
Open

Path Aliases Not Working on node targets #9519

chin2km opened this issue Feb 2, 2024 · 1 comment

Comments

@chin2km
Copy link

chin2km commented Feb 2, 2024 •
edited
Loading

🐛 bug report

After updating to [email protected] (from v2.8.3), the alias config in package.json stopped working on the node target.

🎛 Configuration

Created a very lean reproduction with just the alias config in package.json

Repo: https://github.com/chin2km/parcel-bug-reproduction

{
  "targets": {
    "server": {
      "context": "node",
      "outputFormat": "esmodule",
      "source": "./src/server-entry.tsx",
      "distDir": "./dist/server"
    }
  },
  "alias": {
    "lodash": "./src/patch/lodash.ts"
  },
}

🤔 Expected Behavior

The path alias should work on all targets (node and browser)

😯 Current Behavior

Path alias only works on browser target. Node target throws runtime error.

TypeError: (0 , _lodash.xxx) is not a function

💁 Possible Solution -> 🤷🏻

🔦 Context

Our company (a popular Fashion MarketPlace in the EU) is trying to migrate away from Webpack. We have been beta testing Parcel as a bundler in dev mode and it has been a success. But now we are trying to get out of this beta phase and go all in on Parcel.

💻 Code Sample

Repo: https://github.com/chin2km/parcel-bug-reproduction

🌍 Your Environment

Software Version(s)
Parcel 2.11.0
Node 20.0.0
Yarn 1
Operating System MacOs
This was referenced Jul 9, 2024
Merged
Merged
hanbyul-here added a commit to NASA-IMPACT/veda-ui that referenced this issue Jul 11, 2024
@hanbyul-here
Make library build work with Parcel 2.12 (#1045)
e443338 
**Related Ticket:**  (Not a ticket) #1029 

### Context
To use the USWDS Design System, we had to update Parcel to 2.12.
(Because of invalid CSS selectors that Parcel will complain about.
@dzole0311 described the problem very well here:
#1029 (comment))

While trying to build the library with Parcel 2.12, I faced the problem
of Parcel failing to build the library with an error like `add
'$components' as a dependency`. This error made me think that something
related to aliases is not working for library build with the new version
of Parcel.

We are bumping quite a number for Parcel (from 2.7 to 2.12), so I
gradually bumped up the minor version of Parcel and its related packages
to see where this error was introduced. The problem appeared in Parcel
2.9.0 when Parcel rewrote its resolvers
extensively.https://parceljs.org/blog/v2-9-0/ There seem to be other
people who are facing alias-related problems with targeting Node:
parcel-bundler/parcel#9519

**In short, Parcel 2.12 seems to have a problem building a library with
aliases. (Or at least our set up doesn't seem to work for library
build)**

### What this PR does

Parcel offers the api for custom Resolver :
https://parceljs.org/plugin-system/resolver/
From what I understand, I can make my own translation of dependency such
as `import x from ...` through Resolver. Using this Resolver api, I
added an alias-resolver, which basically just swaps the file name to its
full name when the file name includes one of aliases.

I also separated Parcel configuration that should be used for library
build from the application build. So we can scope down the impact only
to library build. Currently, the library build configuration extends the
application configuration, and adds alias resolver on top of it.

In addition to these changes, the library build command is included in
the `stage` command. When the library build fails, the preview build
will also fail.

### Things I wish I could figure out better
#### Resolver chain?
I want alias resolver to resolves only the alias, and leave the other
stuffs (absolute path or module name resolution) to Parcel default
resolver. For example, let's say a syntax like below was used

```
import Panel from '$components/Panel'
```
I want alias-resolver to translate this into 

```
import Panel from '/app/scripts/components/Panel'
```
and leave it up to further translating this syntax into either
```
import Panel from '/app/scripts/components/Panel.tsx'
```

or 
```
import Panel from '/app/scripts/components/Panel/index.tsx'
```
(There can be even more variety such as
'./app/scripts/components/Panel/index.jsx',
'./app/scripts/components/Panel/index.ts' ...) However, it seems like
Resolver has to return the absolute path for the file or null to pass it
to the next resolver
(https://parceljs.org/plugin-system/resolver/#relevant-api). So I
included a logic to tell if imported file is module or file in
alias-resolver.

#### Update other Parcel-related packages

I tried, but I also faced bunch of other problems that I feel like I
would need another day to figure out. So here, I only ditched parecel's
experimental bundler, which seems to be included in the higher version
by default. The context for experimental bundler is in this PR:
#306


### We need to check

I only checked the library suceeds at being built. We need to check if
the built assets from this branch are the same from the ones of main
branch.
@hanbyul-here
Copy link

I also encountered the alias problem when building a library when I bumped the minor version of Parcel from 2.7 to 2.12. I tested with several minor versions of Parcel, and this problem started appearing in v2.9.

In case this helps anybody, I worked around this problem by putting the alias resolver when the build target is library. But it will be great to see aliases working for all the targets.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@hanbyul-here @chin2km