Я пытаюсь собрать своё монорепо используя 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 не очень хочется, так что буду рад узнать есть ли какое-то иное решение :)
