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

[rmartins0]

Material UI X (MUI X) is telling us to do this

https://github.com/mui/mui-x/blob/a23189f6bc6a73cff66f14ef22bae6b0f143ce44/docs/data/migration/usage-with-material-ui-v5-v6/usage-with-material-ui-v5-v6.md#L64

But how do you do that using turbopack instead of webpack?

Quote from the document:

Next.js Pages Router

With Next.js App Router, you don't need to do anything.

With Next.js Pages Router, update Next.js configuration to pass the require condition and transpile MUI X packages:

export default {
  webpack: (config) => {
    // '...' is important here – it keeps the default webpack conditionNames
    config.resolve.conditionNames = ['require', '...'];
    return config;
  },
  transpilePackages: [
    '@mui/x-data-grid',
    '@mui/x-data-grid-pro',
    '@mui/x-data-grid-premium',
    '@mui/x-date-pickers',
    '@mui/x-date-pickers-pro',
    '@mui/x-charts',
    '@mui/x-charts-pro',
    '@mui/x-tree-view',
    '@mui/x-tree-view-pro',
  ],
};

[rmartins0]

Please advise what to do about turbopack instead of webpack (Next.js version 16, pages router)
cc @cherniavskii , @oliviertassinari

[cherniavskii]

Do you experience this issue with turbopack? Can you provide a repro?
From what I can see, there's no way to enforce export resolution condition in Turbopack, but I was under impression that it's not necessary.