How to share Vite config in monorepo? #3323

Rusinas · 2023-01-16T09:21:56Z

Rusinas
Jan 16, 2023

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.

yogasanas · 2025-04-26T06:05:19Z

yogasanas
Apr 26, 2025

Struggling with doing the same setup. We are running into the following error when trying to import the base config

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /Users/shashankgoyal/openrouter/openrouter-web/configs/vitest/index.ts
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:189:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:232:36)
    at defaultLoad (node:internal/modules/esm/load:145:22)
    at async ModuleLoader.loadAndTranslate (node:internal/modules/esm/loader:477:45) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to share Vite config in monorepo? #3323

{{title}}

Replies: 1 comment

{{title}}

Select a reply

How to share Vite config in monorepo? #3323

Rusinas Jan 16, 2023

Replies: 1 comment

yogasanas Apr 26, 2025

Rusinas
Jan 16, 2023

yogasanas
Apr 26, 2025