crxjs / chrome-extension-tools

Bundling Chrome Extensions can be pretty complex. It doesn't have to be.
https://crxjs.dev/vite-plugin
2.6k stars 177 forks source link

@crxjs/vite-plugin will break the build if build.rollupOptions.inputs added #876

Open jurijsk opened 3 months ago

jurijsk commented 3 months ago

Build tool

Vite

Where do you see the problem?

Describe the bug

@crxjs/vite-plugin will break Typescript project build if build.rollupOptions.inputs added, because pluginFileWriter strips all plugins except .startsWith("crx:") and rollup does not like it.

Why do I have to add additional entry point?

Because I want to use browser.scripting.executeScript on user action, so I need to compile and emit a file that isn't mentioned in manifest.json.

Workaround: and it as content_scripts with with matches ftp://with-match-that-will-never-match.lv

Reproduction

Add another entry point to build.rollupOptions.inputs vite config

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-1260P
    Memory: 16.76 GB / 31.71 GB
  Binaries:
    Node: 18.18.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (123.0.2420.65), ChromiumDev (123.0.2420.10)
    Internet Explorer: 11.0.19041.3636

Severity

annoyance

Toumash commented 1 month ago

Reproduction does not work. I am successfully using this config on prod with react + typescript. How does it break the build? Any errors? Maybe after adding executeScript?

"vite": "^5.2.11",
"typescript": "^5.4.5",
"@crxjs/vite-plugin": "^2.0.0-beta.23",
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd()) as unknown as ImportMetaEnv;
  return {
    root: '.',
    build: {
      sourcemap: process.env.SOURCE_MAP === 'true' ? true : process.env.SOURCE_MAP === 'inline' ? 'inline' : false,
      outDir: 'dist',
      chunkSizeWarningLimit: 2000,
      modulePreload: false,
      rollupOptions: {
        input: {
          tabs: 'src/entrypoints/pages/template.html', // works just fine
          tabs2: 'src/entrypoints/pages/index.tsx', // same here
        },
      },
    },
    plugins: [
      crx({ manifest: createManifest(env) }),
      react(),
    ],
    server: {
      port: 5000,
      warmup: {
        clientFiles: ['./src/entrypoints/popup/index.tsx'],
      },
    },
    define: {
      APP_NAME: JSON.stringify(process.env.npm_package_name),
      APP_VERSION: JSON.stringify(process.env.npm_package_version),
    },
  };
});