Vite Support is in Beta! #136
Replies: 9 comments 14 replies
-
|
That's great. Thank you for that monumental work. Unfortunately, it still doesn't work on Windows. Looks like I only one who use Windows here 🥲 |
Beta Was this translation helpful? Give feedback.
-
|
Sorry to hear that! Windows support is essential. Can you open an issue when you have time so we can get it sorted out? |
Beta Was this translation helpful? Give feedback.
-
|
Just opened #137 |
Beta Was this translation helpful? Give feedback.
-
|
Version 4.0.1-11 just hit NPM! This release adds support for CSS imports in content scripts! Since Vite does the heavy lifting for CSS imports, we get PostCSS, CSS Modules, and CSS Pre-processor support in content scripts for free! In addition, the content script is using proper CSS, not CSS-in-JS, so your Chrome Extension will be faster. |
Beta Was this translation helpful? Give feedback.
-
|
I just discovered that if you're using Svelte, the CSS in your Svelte files gets the same treatment: Vite writes it to the assets folder, and RPCE adds it to the content script in the manifest. Amazing what you get for free! |
Beta Was this translation helpful? Give feedback.
-
|
Version 4.0.1-12 just hit NPM! This release adds support for the Chrome Scripting API, Vite-style static-asset imports, and importing HTML files. |
Beta Was this translation helpful? Give feedback.
-
|
Hey, first a lot of thanks for all you hard work on that ❤️ |
Beta Was this translation helpful? Give feedback.
-
|
When trying to reproduce I noticed that this error pops up when you have declared |
Beta Was this translation helpful? Give feedback.
-
|
Versions 4.0.1-11 and 4.0.1-12 introduced some regressions regarding building HTML files. A fix is in the works, you can expect a new release in the next 2-3 days. |
Beta Was this translation helpful? Give feedback.
-
|
I'm having trouble with dynamic imports in Code like this in shared component Do you know if that is an unimplemented feature, bug or my usage/config might be wrong? |
Beta Was this translation helpful? Give feedback.
-
|
@filipw01 It's an unimplemented feature 😅 The next beta version uses ESM for content scripts (see #200), and we're adding support for code-splitting/dynamic imports in dynamic scripts in #206. |
Beta Was this translation helpful? Give feedback.
-
|
@filipw01 Thanks for sharing your use cases! To make sure I understand:
|
Beta Was this translation helpful? Give feedback.
-
|
@jacksteamdev I have a content script that directly imports a library that uses dynamic imports. The extension I migrated to vite was written with MV2, so I guess it's time to migrate it to MV3 soon. I also noticed that in 4.0.1-12, when importing HTML files, their JS resources are ignored. Is this feature added in the big rewrite, or is that intended? What I ended up doing is that I added vite config entries for necessary scripts and changed script path in HTML files to match |
Beta Was this translation helpful? Give feedback.
-
That should be OK since RPCE bundles content scripts straight to disk. However, HMR for content scripts is different from extension pages; changes to content scripts will trigger a full extension reload and then a refresh for each page with a content script. True HMR for content scripts is coming, but it requires a custom HMR client that I'm working on next week.
HTML bundling suffered a regression, but it's fixed in 4.0.1-16. In addition, I've added e2e tests that will ensure nothing like that happens again. |
Beta Was this translation helpful? Give feedback.
-
|
We've gotten so much great feedback on Vite support over the last few weeks! Thanks to everyone who participated for taking the time to test this library and post issues. All of you have been a great help. Beta version 4.0.1-16 has just hit NPM!I've updated the article on DEV with the new API; check it out for more info. Here are some of the highlights: Better HTML output 📄The most wide-reaching problem involved invalid or missing HTML build output. I found a way to fix this by pushing extension pages into Vite's HTML pipeline. This works great but left behind lots of dead code in RPCE. So I decided to do a rewrite using what we've learned in our previous attempts. The result is a much leaner codebase that is more stable and extendable. A new testing strategy uses snapshot testing to track how changes impact the output files, and E2E tests make sure everything works in the browser, including HMR. ✨ New API ✨Since Vite supports importing JSON and TypeScript into config files, I've delegated manifest discovery and loading to Vite. Here's what it looks like now: // vite.config.js
import { crx } from 'rollup-plugin-chrome-extension'
import { defineConfig } from 'vite'
import manifest from './manifest.json'
export default defineConfig({
plugins: [crx({ manifest })],
})If you want to write your manifest in TypeScript, you can do it in the Vite config or import it from a separate file. RPCE exports a Vite-style define function now that provides types and IntelliSense. // manifest.config.ts
import { defineManifest } from 'rollup-plugin-chrome-extension'
export default defineManifest({
// define your manifest
})// vite.config.ts
import { crx, defineManifest } from 'rollup-plugin-chrome-extension'
import { defineConfig } from 'vite'
import manifest from './manifest.config'
export default defineConfig({
plugins: [crx({ manifest })],
})Like Vite's // manifest.config.ts
import { defineManifest } from 'rollup-plugin-chrome-extension'
export default defineManifest(({ command, mode }) => ({
// manifest
}))
|
Beta Was this translation helpful? Give feedback.
-
|
RPCE v4.0.1-18 just hit NPM! I'm totally pumped about this: True HMR in Content ScriptsThe browser loads content scripts from the file system, so Vite's HMR server doesn't work. This release ports Vite's HMR to the file system. It took a lot of sweat to get all the pieces working, but it's here! Instructions here: Real Vite-React HMR in Chrome Extension Content Scripts - DEV Community 👩💻👨💻 |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for all your hard work @jacksteamdev 👏🏻 Recently I started to develop an extension to scratch my own itch and found out about this project by googling how to build one with Vite. Initially I couldn't get to make the imports work and only the code in the main file (main.tsx or index.tsx) was actually working, any other code which would be imported wasn't working and emitting an error about the preamble detection. After two days trying to make it work I discovered that this is solved by adding this code into a separate script since MV3 doesn't support inline scripts. For now, the dev build and HMR are working but there is an issue when running Build debug logVite.config.jsimport { defineConfig } from "vite";
import { resolve } from "path";
import react from "@vitejs/plugin-react";
import { crx } from "rollup-plugin-chrome-extension";
import manifest from "./public/manifest.json";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
crx({
manifest,
contentScripts: {
preambleCode: false,
},
}),
],
build: {
sourcemap: "inline",
outDir: "dist",
rollupOptions: {
input: {
main: resolve(__dirname, "popup.html"),
},
},
},
}); |
Beta Was this translation helpful? Give feedback.
-
|
@jpozo20 Thanks for debugging this;
It's hard to give advice without more details. It could be something with the manifest. Could you open an issue? 🙏 |
Beta Was this translation helpful? Give feedback.
-
|
After doing some more test I found the problem with tailwind.css only occurs when using a background script, otherwise it works fine. Though I think the fix should be applied just in case.
After looking through the issues I saw your comment about paths being relative to the viteconfig.root in the manifest. It built fine after doing that 👍. |
Beta Was this translation helpful? Give feedback.
-
|
Unfortunately, there are still some issues with CSS when using tailwind.css, I opened the issue #274 |
Beta Was this translation helpful? Give feedback.
-
|
@jacksteamdev is there a way to get access to the latest beta source code? I need to be applying the fix above every time I install or upgrade a package since npm reverses the original file. With the source at least I could link RPCE to the I have modified on disk so my fix would stay between installs. |
Beta Was this translation helpful? Give feedback.
-
|
The |
Beta Was this translation helpful? Give feedback.
-
I'm excited to announce that RPCE now supports Vite! It's been quite a journey, and I'm grateful to everyone who helped get it ready for public consumption. 😅
Get started in 90 seconds
Check out this how-to guide on DEV Community to get started: Create a Vite-React Chrome Extension in 90 seconds
Please contribute 🤝
Vite support will stay under the beta tag on NPM while we squash any remaining bugs. Please don't hesitate to create an issue if you run into something, and if you can, please contribute.
New releases
Watch this discussion for news and release announcements! 🚀
Beta Was this translation helpful? Give feedback.
All reactions