turbopack to support custom condition names for resolving package exports

[chriscoomber]

Goals

Support of custom condition names, to tell turbopack which conditions to apply when resolving package exports.

Non-Goals

N/A

Background

See node's documentation for background on package exports, and conditions.

Custom condition names can be passed into various other tools:

• webpack, via config.resolve.conditionNames
• typescript, via compilerOptions.customConditions
• metro, via config.resolver.unstable_conditionNames
• ...and others

Proposal

I feel like turbopack could emulate webpack's config interface, e.g. add a config option resolveConditionNames which accepts an array of conditions, defaulting to ['browser', 'require', 'import'] or something like that.

[chriscoomber]

I'm hitting this issue again in a different place. Some more detail about my use case:

Problem statement

I have a monorepo like:

• package.json
• packages
  • my-components
    • package.json
    • src/
    • dist/
• apps
  • my-next-app
    • package.json
    • next.config.js
    • src/

When building my-next-app, I want to consume my-components from source (i.e. .tsx files). This massively simplifies a lot of things; I don't want to have to build the .js files in the dist/ folder just to run next dev. However, I still want to be able to build and publish my-components to npm for use outside this monorepo by other apps.

Therefore, within this monorepo, when writing import { Example } from 'my-components/example' I want this to resolve to my-components/src/example.tsx, but for other apps outside this monorepo they need to resolve to my-components/dist/example.js (because publishing .tsx files on npm is frowned upon, even though the react-native community seem to do it).

My attempted solution

The modern way to do this seems to be:

my-components/package.json

{
  "name": "my-components",
  "type": "module",
  "exports": {
    "./*": {
      "my-source": [
        "./src/*/index.ts",
        "./src/*/index.tsx",
        "./src/*.tsx",
        "./src/*.ts"
      ],
      "typescript": ["./dist/*/index.d.ts", "./dist/*.d.ts"],
      "default": ["./dist/*/index.js", "./dist/*.js"]
    }
  },
}

Here, I've defined a custom condition name my-source. For any consumers which specify that condition name, they resolve imports to the src/ folder. However, all other consumers use default, so they resolve imports to the compiled JS code. (I'm lazy so I'm using wildcards to just export all files - in the real world you'd want to be more careful about what you export.)

Then, I just need to tell all the bundlers within the monorepo to use this custom condition name my-source. Fortunately, webpack, metro, etc., even jest, all support this. Turbopack, which I want to use, does not.

I'd be also interested to know if there's a better way to solve my problem.

[smoores-dev]

I have the same setup for the same problem! It would be great if turbopack supported this. maybe we should open an issue?

[Simo-Taousi]

#The Awesomer