vite.config.ts can't import untranspiled ts files from other packages in the same monorepo

[zheeeng]

Describe the bug

If we import something from symlink and the importee is ts file. We counter a such error:

failed to load config from /Users/zheeeng/Workspace/foo/bar/baz/vite.config.ts
error when starting dev server:
TypeError: defaultLoader is not a function

There are two workarounds: compile the ts file to the common js file, or specify the importee path to its real file path rather than symlink.

How could we use it without these two approaches?

Reproduction

https://github.com/zheeeng/test-symlink-vite-config

System Info

Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 1.60 GB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node
    Yarn: 1.22.11 - ~/.nvm/versions/node/v14.17.0/bin/yarn
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.0/bin/npm
  Browsers:
    Chrome: 95.0.4638.54
    Safari: 14.1.2

Used Package Manager

pnpm

Logs

failed to load config from /Users/zheeeng/Workspace/foo/bar/baz/vite.config.ts
error when starting dev server:
TypeError: defaultLoader is not a function
    at Object.require.extensions.<computed> [as .ts] (/Users/zheeeng/Workspace/foo/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-55830a1a.js:68633:13)
    at Module.load (internal/modules/cjs/loader.js:933:32)
    at Function.Module._load (internal/modules/cjs/loader.js:774:14)
    at Module.require (internal/modules/cjs/loader.js:957:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/Users/zheeeng/Workspace/foo/web/studio/vite.config.ts:37:32)
    at Module._compile (internal/modules/cjs/loader.js:1068:30)
    at Object.require.extensions.<computed> [as .ts] (/Users/zheeeng/Workspace/foo/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-55830a1a.js:68630:20)
    at Module.load (internal/modules/cjs/loader.js:933:32)
    at Function.Module._load (internal/modules/cjs/loader.js:774:14)

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[haoqunjiang]

Hi, we've discussed this issue at last Friday's team meeting.

Considering that:

1. I can't think of an efficient way to support this feature.
   • The packages are excluded by esbuild because they're external.
   • Most of the external packages used by vite.config.* don't (and shouldn't) require transpilation
   • It's already a configuration file, we don't want to introduce another option to configure the loading logic of the configuration file.
2. The use case is quite rare. The logic in the configuration file is usually not very complex. Even if it is extracted to a separate package, I think it's acceptable to be written in plain JS or processed by an additional run of tsc.

So this feature would be a low priority for the team.
But feel free to open a PR if you can find a better and efficient way to handle this use case.

[zheeeng]

Thx for your discussion, I would try to transpile the ts config file.

[zheeeng]

@sodatea Can we add an environment variable for configuring this?

[haoqunjiang]

Environment variables are also a kind of configuration, so I don't think we should do that.

[haoqunjiang]

I just realized that we could use a loader like esbuild-register for config loading.

I'm not sure if we can use esbuild-register directly. For now, I can think of a few edge cases:

1. Each TS module's tsconfig.json isn't correctly respected. We need to reuse https://github.com/dominikg/tsconfck for that.
2. Plain JS modules that aren't in the project should not be transpiled by esbuild due to performance concerns.

Anyway, this is a low-priority but doable feature.
We can fix it when we are going to refactor the configuration loading logic in the future.

[hiukky]

Are we still looking at it? because it is very useful when it comes to monorepo and workspaces. Even more so when we can create and use plugins in simple and shared ways within the project.

[github-actions]

Hello @zheeeng. We like your proposal/feedback and would appreciate a contribution via a Pull Request by you or another community member. We thank you in advance for your contribution and are looking forward to reviewing it!

[julianklumpers]

We also encounter this problem. Our use case is that we have a monorepo with 5 micro-frontends (vite apps). We want to have 1 base vite config file and extend from that.
It would be really nice to have an option to import and/or extends other config files in .ts format without compiling first.

Anyway, we ended up writing the base config file in plain js with module.exports.

• vite.apps.base.js

const react = require("@vitejs/plugin-react").default;

module.exports = function ({ root, isDev, plugins }) {
  return {
     ...
      resolve: {
       alias: {
         src: path.resolve(root, "src"),
       },
     },
     plugins: [
         react({
          babel: {
            plugins: [
              [
                "babel-plugin-styled-components",
                {
                  displayName: isDev,
                  fileName: false,
                  ssr: false,
                  minify: !isDev,
                  transpileTemplateLiterals: !isDev,
                  pure: !isDev,
                },
              ],
            ],
          },
        })
       ...more plugins
      ...plugins
     ]
  }
... more options
}

and then we could use like this:

import base from 'config/vite.apps.base';

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const isDev = mode === 'development';

  return base({
    root: __dirname,
    isDev,
    plugins: [
      partytownVite({
        dest: path.resolve(__dirname, 'build', '~partytown'),
      }),
    ],
  });
});

[airtonix]

use preconstruct on your packages... then you can just sidestep all this headache.

https://preconstruct.tools/

it sets up mjs and cjs stubs that behave differently in development than in production. 👍🏻

[julianklumpers]

@airtonix does that not need to setup babel and stuff to compile everything? The whole reason we use Vite is for the dx and no need to setup a lot of additional babel stuff.

[airtonix]

🤷🏻 it's not much tbh. compared to the drama llama of your current situation, i'd happily pick preconstruct.

[black7375]

@airtonix Preconstruct seems to be a monorepo management tool that scaffolding can do.
I think this issue is close to tsconfig's extends or prettier's sharing configurations feature.

IMO, I think we need a feature like webpack-merge of webpack production doc

---

@julianklumpers
I'am using config builder pattern. (Temporary solution)

• Library: https://github.com/black7375/vite-config-builder
• Custom Config: https://github.com/black7375/ts-monorepo-template/tree/main/configs/vite-config-custom
• Use Config: https://github.com/black7375/ts-monorepo-template/blob/main/packages/hello/vite.config.ts

[bluwy]

Wouldn't using something like esbuild-register pollutes the entire nodejs process? e.g. it would affect Vite SSR too which may bring a slight perf penalty, or perhaps inconsistency. Otherwise we'd need to spawn a child process to read the config, but that only works if the config is serializable.

I tried a different solution, by bundling the monorepo package when detected that the resolved path doesn't contain node_modules. It works but if the package defines it's own __filename or _dirname, it would break loading the config. Plus if you're linking Vite locally too, it'll have to re-bundle it entirely (also suffers from __filename issue).

Overall I'm also not sure if this is worth the complexity.

[Hobart2967]

Same issue here.

I created 6 package projects within a Lerna workspace.
Additionally, I created a "config" package, which is symlinked to each. Importing the tsconfig as extends option works fine, also all other tools complain.

When it comes to vite, it states the above error message when importing and using the configuration function from that other config package.

I would really like to have and use this, it's very useful to have the same configs for each project ( all of them bundle the exact same way), shared as one config in one Central place.

Looks like I really need to convert the shared config to a JS file, loosing TS Support :(

[jrson83]

If you want to use a monorepo/workspace with typescript, you should set it up correctly using project references with compilerOptions composite: true, since you can't import an untranspiled .ts file in a transpiled module. Every module (like a plugin) you import into vite.config.ts is already transpiled to js.
Even without vite, the projects need to be referenced. While developing you should use ts-node or tsx, so you don't need to rebuild the files all the time.

There are many different ways to set up a working typescript workspace. I created an example vite-typescript-monorepo.

[Hobart2967]

If you want to use a monorepo/workspace with typescript, you should set it up correctly using project references with compilerOptions composite: true, since you can't import an untranspiled .ts file in a transpiled module. Every module (like a plugin) you import into vite.config.ts is already transpiled to js. Even without vite, the projects need to be referenced. While developing you should use ts-node or tsx, so you don't need to rebuild the files all the time.

There are many different ways to set up a working typescript workspace. I created an example vite-typescript-monorepo.

May be true, but the expectation from a user's point of view is a little different. If typescript support for configs is coming out of the box, it should be supported fully. In my point of view there's only two ways of solving this:

1. Remove TypeScript support to avoid "misusage"
2. Make it work ;)

[airtonix]

If you want to use a monorepo/workspace with typescript, you should set it up correctly using project references with compilerOptions composite: true, since you can't import an untranspiled .ts file in a transpiled module. Every module (like a plugin) you import into vite.config.ts is already transpiled to js. Even without vite, the projects need to be referenced. While developing you should use ts-node or tsx, so you don't need to rebuild the files all the time.

There are many different ways to set up a working typescript workspace. I created an example vite-typescript-monorepo.

This is precisely the point of preconstruct.

Feels like everyone is trying to reinvent nodejs to avoid using preconstruct?

because there are several problems here you can keep using your project references with preconstruct.

1. how do you speed up vscode intellisense resolving and compiling? tsconfig references
2. how do you resolve packages? either:
   a. a root tsconfig with all the monorepo packages listed in paths, or
   b. just use normal nodejs way where each package has it's own package.json and then you use preconstruct to provide easy no-compile access to ts and non ts tooling.

If you go for 2.a, then you cant dogfood your own typescript tooling packages with any tooling you use that doesn't know how to typescript.

because of that, i choose to work with preconstruct

[btakita]

Now that vite 3 is using esm, I'm getting an issue with importing *.ts files in monorepo packages (TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts"). The "right" answer is to compile the *.ts files. I would love to avoid the extra build step, as it takes development maintenance, time, complexity, & makes the DX considerably worse. Bun will handle this but it's is 6+ months away. At this point, what would be the best way to import *.ts files without having to compile those files? I get that it's a low priority & the "right" answer is to compile the *.ts files, but it sure would be great if it were not necessary.

TSX has been working great for running from the cli. Importing *.ts from monorepo packages worked in vite v2. Now how do we get the automatic transpilation of *.ts back in vite3 + nodejs?

There seems to be a confluence of underlying approaches which cause this problem. The need to automatically transpile ts to js. The need to use a monorepo with separate npm packages. The need to have a quick build...etc

May be true, but the expectation from a user's point of view is a little different. If typescript support for configs is coming out of the box, it should be supported fully. In my point of view there's only two ways of solving this:

1. Remove TypeScript support to avoid "misusage"
2. Make it work ;)

Agreed. The problem with partial support for TypeScript is that the support becomes a moving target...such as the ERR_UNKNOWN_FILE_EXTENSION regression between v2 & v3...which makes for some nasty surprises when upgrading.

[garydex]

Would love someone to take a look at the PR above.

FYI @mandarini I have also created a demo Nx workspace with my patched version of Vite, to demonstrate how a shared config file can be imported and extended - check out https://github.com/garydex/nx-vite-tsconfig-paths

[Neo-Ciber94]

"NODE_OPTIONS='--import tsx' vite ..."

Thanks, that worked for me

[juliusfriedman]

/* eslint-disable import/no-relative-packages */ // https://github.com/vitejs/vite/issues/5370
import defaultConfig from './node_modules/@myPackage/vite-config/vite.config';

Where vite.config is /vite.config.ts in the directory of where you want to share it from.

This works around the issue aforementioned and allows you to share the config.

Hopefully it helps someone as it doesn't require any other hacks / changes and keeps the config in TypeScript.

[7086cmd]

In my opinion, an alternative effective approach is to pre-bundle the configuration file using Rolldown or Esbuild. Recently, I attempted to execute the command rolldown vite.config.ts -d dist/config -e vite,@vitejs/plugin-react && vite -c dist/config/vite.config.js (Rolldown is not currently available for command-line options), and it starts the dev server, and builds without any issues.

Although it may be somewhat intricate, it could prove to be highly effective for managing complex configurations.

[tylerrrkd]

Hi friends, is there any best practice?

[alamhubb]

Try to fix this issue. If the file path contains node_modules, the file will not be compiled. If it does not contain node_modules, it means the local path, so it will be compiled. Is there any unexpected situation? If not, can you merge the PR and close this issue?

#18146

[alamhubb]

type must be commonjs

  "type": "commonjs",
  "scripts": {
    "dev": "tsx ./node_modules/vite/bin/vite.js",
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --build --force"
  },

This code works for me

[antitoxic]

For the examples above that use a custom loader like tsx, just keep in mind this will inevitably add performance penalty for all imports that vite has inside itself and all your configured plugins. Not just the imports in your config.

[jesse23]

type must be commonjs

  "type": "commonjs",
  "scripts": {
    "dev": "tsx ./node_modules/vite/bin/vite.js",
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --build --force"
  },

This code works for me

Thx for the solution! This works for me.

But it will trigger warning below:

The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.

[spacedawwwg]

import { tsImport } from 'tsx/esm/api';
import { defineConfig, mergeConfig } from 'vite';

const { viteConfig } = await tsImport('@mynamespace/configs/vite', import.meta.url);

export default mergeConfig(
  viteConfig,
  defineConfig({
    // custom config here
  }),
);

This is what I'm doing to work around this.

Using: https://tsx.is/dev-api/ts-import

[vjpr]

I'm using Bun, and it works great for this use case...except that Bun can crash sometimes.

There is also this issue with Bun: sveltejs/kit#12807

[kuus]

import { tsImport } from 'tsx/esm/api';
import { defineConfig, mergeConfig } from 'vite';

const { viteConfig } = await tsImport('@mynamespace/configs/vite', import.meta.url);

export default mergeConfig(
  viteConfig,
  defineConfig({
    // custom config here
  }),
);

This is what I'm doing to work around this.

Using: https://tsx.is/dev-api/ts-import

It does not seem to work with tsconfig paths aliases (I am within an Nx monorepo), you confirm?

[jikyu]

I'm using Bun, and it works great for this use case...except that Bun can crash sometimes.

There is also this issue with Bun: sveltejs/kit#12807

@vjpr How are you using bun to resolve this issue, if you don't mind me asking?

[rtritto]

If Bun uses something like a loader for .ts files, can we also use it in vite.config.ts?

My use case:

import { pathToFileURL } from 'node:url'

const filepath = '<FILEPATH>.ts'

const file = await import(pathToFileURL(filepath).href)

Then I get:

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for <FILEPATH>.ts
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:218:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:244:36)
    at defaultLoad (node:internal/modules/esm/load:122:22)
    at async nextLoad (node:internal/modules/esm/hooks:748:22)
    at async nextLoad (node:internal/modules/esm/hooks:748:22)
    at async Hooks.load (node:internal/modules/esm/hooks:385:20)
    at async MessagePort.handleMessage (node:internal/modules/esm/worker:199:18) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

tsconfig.json

{
  "compilerOptions": {
    "allowImportingTsExtensions": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "noEmit": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "ESNext"
  }
}

FYI @bluwy @hi-ogawa @himself65

[himself65]

If Bun uses something like a loader for .ts files, can we also use it in vite.config.ts?

My use case:

import { pathToFileURL } from 'node:url'

const filepath = '<FILEPATH>.ts'

const file = await import(pathToFileURL(filepath).href)

Then I get:

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for <FILEPATH>.ts
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:218:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:244:36)
    at defaultLoad (node:internal/modules/esm/load:122:22)
    at async nextLoad (node:internal/modules/esm/hooks:748:22)
    at async nextLoad (node:internal/modules/esm/hooks:748:22)
    at async Hooks.load (node:internal/modules/esm/hooks:385:20)
    at async MessagePort.handleMessage (node:internal/modules/esm/worker:199:18) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

tsconfig.json

{
  "compilerOptions": {
    "allowImportingTsExtensions": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "noEmit": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "ESNext"
  }
}

FYI @bluwy @hi-ogawa @himself65

I'm not sure why you ping me. But as a Node.js member, I would recommend you add nodejs loader to support load ts file in node.js

import { register } from 'tsx/esm/api'

// Register tsx enhancement
const unregister = register()

await import('./file.ts')

// Unregister when needed
unregister()

https://tsx.is/dev-api/register-esm

I think vite.config.ts is out of vite runtime so you cannot run ts by vite in a vite config (sounds like a chicken or egg problem)

[AuTa]

@jikyu This is bun example: https://bun.sh/guides/ecosystem/vite