Как расшарить Vite конфиг в монорепо (Turborepo)?

Question

[Андрей]

Я пытаюсь собрать своё монорепо используя Turborepo. Там у меня есть множество разных Vue проектов, между которыми я бы хотел расшарить конфиг Vite. Вот что я пытаюсь сделать.

У меня есть пакет, который называется `@monorepo/configs`:

packages/
  configs/
    package.json
    index.ts
    vite.config.base.ts

package.json:

{
  "name": "@monorepo/configs",
  "version": "0.0.1",
  "private": true,
  "type": "module",
  "main": "index.ts",
  "types": "index.ts",
  "files": [
    "./src/tsconfig.base.json",
    "./src/vite.config.base.js"
  ]
}

vite.config.base.ts:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'

// regular config
export const ViteConfigBase = defineConfig({
  resolve: {
    alias: {
      // some aliases
    }
  }
})

index.ts:

export { ViteConfigBase } from './vite.config.base'

Я пытаюсь смёржить этот конфиг в vite.config.ts другого приложения:

import { fileURLToPath, URL } from 'node:url'

import { ViteConfigBase } from '@monorepo/configs/src/vite.config.base' // обратите внимание на импорт из 'src'

import { defineConfig, mergeConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig(mergeConfig(
  ViteConfigBase,
  {
    plugins: [vue()],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    }
  }
))

Тут я импортирую ViteConfigBase как просто файл, находящийся в папке src и я получаю вот такую ошибку:

> @monorepo/sandbox@0.0.0 dev
> vite

failed to load config from C:\Users\user\Desktop\Code\Personal\monorepo\apps\Sandbox\vite.config.ts
error when starting dev server:
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\user\Desktop\Code\Personal\monorepo\packages\Config\src\vite.config.base.js from C:\Users\user\Desktop\Code\Personal\monorepo\apps\Sandbox\vite.config.ts not supported.
Instead change the require of vite.config.base.js in C:\Users\user\Desktop\Code\Personal\monorepo\apps\Sandbox\vite.config.ts to a dynamic import() which is available in all CommonJS modules.

Если попытаться импортировать конфиг не из файла, а из index.ts, вот так:

import { fileURLToPath, URL } from 'node:url'

import { ViteConfigBase } from '@monorepo/configs' // <-- here

import { defineConfig, mergeConfig } from 'vite'

То ошибка будет такая:

> @monorepo/sandbox@0.0.0 dev
> vite

failed to load config from C:\Users\user\Desktop\Code\Personal\monorepo\apps\Sandbox\vite.config.ts
error when starting dev server:
C:\Users\user\Desktop\Code\Personal\monorepo\packages\Config\index.ts:1
export { ViteConfigBase } from './src/vite.config.base' 
^^^^^^

SyntaxError: Unexpected token 'export'

Т.к. я уже сталкивался с такой проблемой ранее, то пробую поменять поле "type" в package.json на "module", но получаю эту ошибку:

> @monorepo/sandbox@0.0.0 dev
> vite

failed to load config from C:\Users\user\Desktop\Code\Personal\monorepo\apps\Sandbox\vite.config.ts
error when starting dev server:
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for C:\Users\user\Desktop\Code\Personal\monorepo\packages\Config\index.ts

И вот на этом месте я и застрял :( Уверен, что менять type на module в данном случае абсолютно не обязательно и должен быть какой-то простой осуществить задуманное.

Насколько я понимаю, тут проблема вовсе не в монорепо, но я решил, что это важное уточнение. Проблема, полагаю. на уровне vite, который стартует внутри nodejs, который, в свою очередь, ничего знать не знает про ESM синтаксис и TypeScript. Переписывать всё на CommonJS и голый JS не очень хочется, так что буду рад узнать есть ли какое-то иное решение :)

Answer 1

[Станислав Макаров]

Уверен, что менять type на module в данном случае абсолютно не обязательно и должен быть какой-то простой осуществить задуманное.

Не обязательно, можно просто пользоваться соответствующими расширениями файлов - cjs/mjs (соответственно cts/mts для TS-файлов).

Instead change the require of vite.config.base.js

У вас tsconfig есть? Судя по всему ваш конфиг компилится в CommonJS, а не в ES-модуль.

nodejs, который, в свою очередь, ничего знать не знает про ESM синтаксис

Да всё он знает, просто ему по умолчанию CommonJS использует, чтобы не сломать существующий мир.

Проблема, полагаю. на уровне vite

Очевидно, index.ts не проходит автоматическую компиляцию через TypeScript, как это делается для файлов с именем vite.config.ts.

Comments

[Андрей]

Спасибо за ответ! tsconfig есть, да, в него не был включен текущий vite.config.ts, но добавление его в include не помогло. Пробовал разные опции:

"module": "esnext",
    "target": "esnext",
    "moduleResolution": "node",
    "esModuleInterop": true,

Не помогло. Но произошла интересная вещь. Из "пакета", то есть из '@monorepo/config', "завести" проект получилось только когда я перевел vite.base.config.ts в js расширение и убрал реэкспорт из index.ts (и сам index.ts я тоже убрал, оставив просто экспорт через files в package.json). Не самое лучшее решение, но в рамках конкретной задачи вроде бы окей. Может кому-то поможет.

Но я решил копнуть глубже и попытаться заставить заработать .ts файл нужным мне образом. Пришел к тому, что если импортировать конфиг через относительный путь, то всё работает отлично. Тот же файл, из той же папки, но никаких проблем абсолютно. Какая-то хрень!

То есть я просто поменял import { ViteBaseConfig } from '@monorepo/config' на

import { ViteBaseConfig } from '../../../packages/Config/src/'vite.base.config.ts'

и всё нормально запустилось. Чудеса.

Что касается сборки - да, этот шаг я сознательно избегаю, потому что билдить один конфиг файл кажется какой-то глупостью. Во-первых это сразу же минус скорость разработки (и вообще можно забыть пересобрать или словить какой-то кеш и ломать голову, почему ниче не работает), во-вторых после компиляции появляется огроооомнейший оверхед от tsup, папка dist начинает весить ~5Мб, нахрен бы оно надо вообще :D Плюс пропадает возможность "проваливаться" в файл по ctrl+export. Чаще всего это приводит в папку dist в скомпилированный файл, что тоже негативно сказывается на скорости разработки. Но да, это тоже одно из решений - просто скомпилировать файлы и юзать как обычный пакет. Но весь смысл переезда на монорепо и заключался в том, чтобы отказаться от компиляции расшаренных библиотек и компонентов.