How to share Vite config in monorepo?

Question

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/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.

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/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'

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

> @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

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.

Answer 1

If you using Turborepo, how about this way?

/
├── apps
|  ├── app1
|  |  ├── src
|  |  ├── package.json
|  |  └── vite.config.ts
|  └── app2
|     ├── src
|     ├── package.json
|     └── vite.config.ts
├── packages
|  └── viconfig
|     ├── index.js
|     └── package.json

// apps/app1/package.json

{
  "name": "app1",
  "devDependencies": {
    "viconfig": "workspace:*",
    "vite": "4.0.0"
  }
}

// apps/app1/vite.config.ts

import { defineConfig } from "vite";
import customConfig from "viconfig";

export default defineConfig(() => {
  return {
    ...customConfig,
  };
});

// packages/viconfig/index.js

import path from "node:path";

export default {
  resolve: {
    alias: {
      "@": path.resolve(process.cwd(), "src"),
    },
  },
};

// packages/viconfig/package.json

{
  "name": "viconfig",
  "main": "index.js",
  "type": "module",
  "types": "index.js"
}