when using a nested dir and a nested vite.config.ts, crx doesn't respect the root when looking for entry points

[z-br]

Build tool

Vite

Where do you see the problem?

• In the browser
• In the terminal

Describe the bug

I get the error RollupError: Could not resolve entry module "Popup.html". when building a nested project from a root package.json

If I change manifest to (erroneously) include the nested dir name , e.g.

{
  "manifest_version": 3,
  "name": "My React Chrome Extension",
  "version": "1.0.0",
  "description": "A Chrome extension built with React and TypeScript.",
  "permissions": ["storage", "tabs"],
  "action": {
    "default_popup": "extension/Popup.html"
  }
}

I can get the build to work, but then the extension doesn't work in chrome (unsuprising, it shouldnt have the dir name in there) .

I shouldn't need the nested dir name there because that dir is the root of the vite.config.js via root: __dirname configuration, which works for everything else. It just doesn't seem to work for crx. I tried to find a parameter to tell crx to use that as the root explicity but I can't find one. Is there a simple configuration parameter I am missing?

Reproduction

create a directory nested inside of an existing web probject, e.g. {project_root}/extension with extension/vite.config.ts as such:

import { resolve } from 'path';

import { crx } from '@crxjs/vite-plugin';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

import manifest from './public/manifest.json';

export default defineConfig({
  plugins: [react(), crx({ manifest })],
  root: __dirname, // Use the extension directory as root
  build: {
    outDir: '../dist-extension', // Output directory for the extension
    sourcemap: true,
    emptyOutDir: true,
  },
});

in root package.json, add script:

"build:extension": "vite build --config extension/vite.config.ts"

run pnpm run build:extension

Error:

RollupError: Could not resolve entry module "Popup.html".

Logs

No response

System Info

System:
    OS: macOS 14.1.1
    CPU: (16) arm64 Apple M3 Max
    Memory: 109.94 MB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
    pnpm: 9.0.0-alpha.1 - ~/.nvm/versions/node/v20.11.0/bin/pnpm
    bun: 1.0.20 - ~/.bun/bin/bun
  Browsers:
    Chrome: 128.0.6613.138
    Safari: 17.1
  npmPackages:
    @crxjs/vite-plugin: ^1.0.14 => 1.0.14
    vite: ^5.2.8 => 5.2.8

Severity

blocking all usage of RPCE

[Toumash]

Out of curiosity what setup is this lerna or something with extension as one of the packages?

[z-br]

Out of curiosity what setup is this lerna or something with extension as one of the packages?

Its just a normal (complicated) react app originally created from CRA and ported to vite. extension is just the subdirectory I put the chrome extension code/subproject in.