How to share Vite config in monorepo?

[Rusinas]

I am trying to make monorepo using Turborepo. I have a lot of Vue projects there and I need to share Vite config across all applications. Here's how I'm trying to achieve this.

I have package named @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' 

And in the other application's vite.config.ts:

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

import { ViteConfigBase } from '@monorepo/configs/src/vite.config.base' // notice import from '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))
      }
    }
  }
))

Here I import ViteConfigBase as a file from 'src' folder and this is the error that I get after npm run dev:

> @monorepo/[email protected] 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.

If I change import from 'src' folder to import from index, like this:

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

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

import { defineConfig, mergeConfig } from 'vite'

// other config...

Then the error will be this:

> @monorepo/[email protected] 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'

OOokkay, I've seen it before. Let's try "type": "module" in package.json. Now that's the error:

> @monorepo/[email protected] 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

And this is where I'm stuck. I need those files to be .ts for sure (and I'm not sure if they would work if I change extention to .js).

I could also easily fix this by just adding the build step, but I don't think it is that necessary and there should be the way around. The build step will add a lot of overhead to development process and the code itself. I've tried it and the dist folder was around ~4Mb for no reason. Also, I won't be able to use "Go to definition" feature in this case, and last but not least, it has to be rebuilt after every change, so I really wish to avoud this step and just use raw config files everywhere.